交互設(shè)計(jì)工作核心在于信息架構(gòu)和交互細(xì)節(jié)設(shè)計(jì)。信息架構(gòu)包括信息分類(lèi)以及信息展示邏輯設(shè)計(jì);交互細(xì)節(jié)則多表現(xiàn)為控件的選擇,，交互效果的定義等,。在信息設(shè)計(jì)中，遇到最棘手的問(wèn)題就是信息量太多而顯得設(shè)計(jì)結(jié)果不盡人意,，那么在砍不掉需求的前提下(信息太多,，也許是需求本身還有被精簡(jiǎn)的可能性)，如何解決這類(lèi)問(wèn)題呢?

　　通常來(lái)說(shuō),，信息設(shè)計(jì)的時(shí)候有很對(duì)可遵循的關(guān)系在,，信息間互斥，信息間相輔相成,，信息間屬于包含與被包含關(guān)系等,。那么今天要探討的是”父子關(guān)系”。所謂”父子關(guān)系”也就是核心信息與輔助信息(同類(lèi)信息),，重點(diǎn)信息與次要信息(非同類(lèi)信息)在界面設(shè)計(jì)上的對(duì)比關(guān)系,。

　　一、 “父子關(guān)系”在設(shè)計(jì)中的意義

　　如果你不能做到讓一個(gè)頁(yè)面不言而喻,，那么至少應(yīng)該讓它自我解釋?zhuān)@是由Krug先生在《Don’t make me think》中提及的觀點(diǎn),。而“父子”關(guān)系的體現(xiàn)，則是向用戶解釋哪些是需要被關(guān)注的,，哪些是當(dāng)前最重要的,，以保證主路徑的暢通無(wú)阻(即便是廣告，如果是定制化的也是有積極意義的),。

　　二,、如何在設(shè)計(jì)中找到“父子關(guān)系”

　　設(shè)計(jì)師首先需要判斷需要設(shè)計(jì)的信息間關(guān)系。而判斷依據(jù)可以是業(yè)務(wù)邏輯,，可以是用戶操作邏輯,。 互聯(lián)網(wǎng)的一些事

　　比如一個(gè)成功反饋?lái)?yè)面。如果業(yè)務(wù)邏輯到此為止結(jié)束,，沒(méi)有下一步動(dòng)作,，那么反饋信息顯得比較重要;如果業(yè)務(wù)邏輯中這個(gè)成功反饋只是邏輯中的一個(gè)環(huán)節(jié)，那么下一步動(dòng)作的引導(dǎo)則強(qiáng)于反饋信息,。

　　三,、 如何在設(shè)計(jì)中體現(xiàn)“父子關(guān)系”

　　第一步：信息分類(lèi)

　　將所有的信息按照某種邏輯(card sorting)歸類(lèi)。歸類(lèi)前將所有信息設(shè)置為相同字號(hào),，字體,，顏色。

　　分類(lèi)的設(shè)計(jì)方法：

　　線：設(shè)計(jì)輔助線，實(shí)線,，虛線等

　　面：背景底色,，背景框 yixieshi

　　留白：通過(guò)信息間空白區(qū)域來(lái)分割

　　比如郵箱驗(yàn)證成功頁(yè)面，按照業(yè)務(wù)不同,，將信息劃分為三種：

　　原有頁(yè)面 yixieshi

　　第二步：信息在頁(yè)面的排列順序

　　不同信息在頁(yè)面排列的順序是特定的,，這個(gè)順序可能一種規(guī)范，比如該頁(yè)面成功反饋肯定出現(xiàn)在頁(yè)面頂部,，引導(dǎo)排后,。那么將之前分類(lèi)好的信息以類(lèi)為單位，按照這個(gè)順序陳列在頁(yè)面上,。

　　第三步：信息在頁(yè)面的優(yōu)先級(jí)

　　雖然信息在頁(yè)面上陳列的順序是某種規(guī)范,，但是信息的優(yōu)先級(jí)卻不受這種規(guī)范的限制。在明確優(yōu)先級(jí)之后,，我們需要通過(guò)設(shè)計(jì),，將優(yōu)先級(jí)體現(xiàn)出來(lái)。 互聯(lián)網(wǎng)的一些事

　　優(yōu)先級(jí)設(shè)計(jì)方法：層

　　所謂層的概念,，類(lèi)似ps的圖層,。就是讓優(yōu)先級(jí)最高的信息第一時(shí)間吸引用戶眼球，并給用戶一種距離更近的感覺(jué),。通常處理方式有加陰影,，加底色等。

　　比如在郵箱驗(yàn)證成功頁(yè)面,，引導(dǎo)用戶完善個(gè)人信息優(yōu)先級(jí)最高,，那么采用加底色加陰影的方式突出：

　　第四步：大框架設(shè)計(jì)完了之后，設(shè)計(jì)類(lèi)單位下信息的優(yōu)先級(jí)

　　對(duì)于類(lèi)單位下信息的設(shè)計(jì)方法同上面方法一樣,。

　　比如會(huì)員信息完善引導(dǎo)中信息的設(shè)計(jì)：頁(yè)面信息分為3類(lèi)：標(biāo)題,，action，解釋語(yǔ)言,。action應(yīng)該緊隨標(biāo)題存在,， 互聯(lián)網(wǎng)的一些事

　　解釋語(yǔ)言圍繞action附近,。注意信息間留白處理,。

　　第五步：交互細(xì)節(jié)調(diào)整

　　在以上設(shè)計(jì)步驟完成之后，頁(yè)面信息基本已經(jīng)ok,。那么交互細(xì)節(jié)的調(diào)整著重從視覺(jué)是幫助用戶定位信息,。 互聯(lián)網(wǎng)的一些事

　　設(shè)計(jì)方法：區(qū)別對(duì)待字體，字號(hào),，顏色以及樣式,。

　　在郵箱驗(yàn)證成功頁(yè)面，成功提示正文顏色#666666,，12px(網(wǎng)站規(guī)范);引導(dǎo)文字中鏈接色#0066cc,，標(biāo)字14px bold等

　　第六步：做減法

　　這一步必不可少,，剛開(kāi)始都是采用各種效果已達(dá)到頁(yè)面設(shè)計(jì)的最好的效果，但是最后的時(shí)候要從整體角度出去去看這個(gè)頁(yè)面,，將一些過(guò)重過(guò)多的設(shè)計(jì)元素去除

　　最終設(shè)計(jì)效果：

　　頁(yè)面信息層級(jí)明顯,，“父子”關(guān)系尤為突出。

　　四,、“父子關(guān)系”在平常設(shè)計(jì)中的應(yīng)用

　　A. Apple.com yixieshi

　　蘋(píng)果官方網(wǎng)站首頁(yè)的信息設(shè)計(jì)中,，包括重點(diǎn)與次要，核心與輔助的關(guān)系,。 互聯(lián)網(wǎng)的一些事

　　B. Amazon.com

　　亞馬遜默認(rèn)首頁(yè)的局部設(shè)計(jì)中,，也存在比較明顯的運(yùn)營(yíng)息與常規(guī)，重點(diǎn)與次要,，核心與輔助的關(guān)系

　　Ps：常規(guī)信息本身可能是最重要的,，比如導(dǎo)航，但是在網(wǎng)站成熟之后用戶對(duì)導(dǎo)航的認(rèn)知度很高,，反而不再需要視覺(jué)強(qiáng)化,，而運(yùn)營(yíng)信息本身的周期性決定它在某段時(shí)間需要被強(qiáng)化。 一些事

　　C. Gap.com 一些事

　　潮牌gap官網(wǎng)女裝頁(yè)面,，以人物著裝大圖為主要推廣方式,，在信息設(shè)計(jì)上，運(yùn)營(yíng)與常規(guī),，核心與輔助信息關(guān)系非常明了,。 互聯(lián)網(wǎng)的一些事

　　有設(shè)計(jì)方法的指導(dǎo)固然可以保證頁(yè)面的規(guī)范性和規(guī)整性，但是在具體對(duì)應(yīng)的項(xiàng)目中,，采用哪一種設(shè)計(jì)方法需要設(shè)計(jì)師有深入的思考和分析,，同時(shí)，在完成項(xiàng)目之后對(duì)設(shè)計(jì)review并能總結(jié)經(jīng)驗(yàn),，以取得更大進(jìn)步,。