信息設(shè)計中的“父子關(guān)系”
交互設(shè)計工作核心在于信息架構(gòu)和交互細(xì)節(jié)設(shè)計。信息架構(gòu)包括信息分類以及信息展示邏輯設(shè)計;交互細(xì)節(jié)則多表現(xiàn)為控件的選擇,交互效果的定義等。在信息設(shè)計中,遇到最棘手的問題就是信息量太多而顯得設(shè)計結(jié)果不盡人意,那么在砍不掉需求的前提下(信息太多,也許是需求本身還有被精簡的可能性),如何解決這類問題呢?
通常來說,信息設(shè)計的時候有很對可遵循的關(guān)系在,信息間互斥,信息間相輔相成,信息間屬于包含與被包含關(guān)系等。那么今天要探討的是”父子關(guān)系”。所謂”父子關(guān)系”也就是核心信息與輔助信息(同類信息),重點信息與次要信息(非同類信息)在界面設(shè)計上的對比關(guān)系。
一、 “父子關(guān)系”在設(shè)計中的意義
如果你不能做到讓一個頁面不言而喻,那么至少應(yīng)該讓它自我解釋,這是由Krug先生在《Don’t make me think》中提及的觀點。而“父子”關(guān)系的體現(xiàn),則是向用戶解釋哪些是需要被關(guān)注的,哪些是當(dāng)前最重要的,以保證主路徑的暢通無阻(即便是廣告,如果是定制化的也是有積極意義的)。
二、如何在設(shè)計中找到“父子關(guān)系”
設(shè)計師首先需要判斷需要設(shè)計的信息間關(guān)系。而判斷依據(jù)可以是業(yè)務(wù)邏輯,可以是用戶操作邏輯。
比如一個成功反饋頁面。如果業(yè)務(wù)邏輯到此為止結(jié)束,沒有下一步動作,那么反饋信息顯得比較重要;如果業(yè)務(wù)邏輯中這個成功反饋只是邏輯中的一個環(huán)節(jié),那么下一步動作的引導(dǎo)則強于反饋信息。
三、 如何在設(shè)計中體現(xiàn)“父子關(guān)系”
第一步:信息分類
將所有的信息按照某種邏輯(card sorting)歸類。歸類前將所有信息設(shè)置為相同字號,字體,顏色。
分類的設(shè)計方法:
線:設(shè)計輔助線,實線,虛線等
面:背景底色,背景框
留白:通過信息間空白區(qū)域來分割
比如郵箱驗證成功頁面,按照業(yè)務(wù)不同,將信息劃分為三種:
原有頁面
第二步:信息在頁面的排列順序
不同信息在頁面排列的順序是特定的,這個順序可能一種規(guī)范,比如該頁面成功反饋肯定出現(xiàn)在頁面頂部,引導(dǎo)排后。那么將之前分類好的信息以類為單位,按照這個順序陳列在頁面上。
第三步:信息在頁面的優(yōu)先級
雖然信息在頁面上陳列的順序是某種規(guī)范,但是信息的優(yōu)先級卻不受這種規(guī)范的限制。在明確優(yōu)先級之后,我們需要通過設(shè)計,將優(yōu)先級體現(xiàn)出來。
優(yōu)先級設(shè)計方法:層
所謂層的概念,類似ps的圖層。就是讓優(yōu)先級最高的信息第一時間吸引用戶眼球,并給用戶一種距離更近的感覺。通常處理方式有加陰影,加底色等。
比如在郵箱驗證成功頁面,引導(dǎo)用戶完善個人信息優(yōu)先級最高,那么采用加底色加陰影的方式突出:
第四步:大框架設(shè)計完了之后,設(shè)計類單位下信息的優(yōu)先級
對于類單位下信息的設(shè)計方法同上面方法一樣。
比如會員信息完善引導(dǎo)中信息的設(shè)計:頁面信息分為3類:標(biāo)題,action,解釋語言。action應(yīng)該緊隨標(biāo)題存在,
解釋語言圍繞action附近。注意信息間留白處理。
第五步:交互細(xì)節(jié)調(diào)整
在以上設(shè)計步驟完成之后,頁面信息基本已經(jīng)ok。那么交互細(xì)節(jié)的調(diào)整著重從視覺是幫助用戶定位信息。
設(shè)計方法:區(qū)別對待字體,字號,顏色以及樣式。
在郵箱驗證成功頁面,成功提示正文顏色#666666,12px(網(wǎng)站規(guī)范);引導(dǎo)文字中鏈接色#0066cc,標(biāo)字14px bold等
第六步:做減法
這一步必不可少,剛開始都是采用各種效果已達(dá)到頁面設(shè)計的最好的效果,但是最后的時候要從整體角度出去去看這個頁面,將一些過重過多的設(shè)計元素去除
最終設(shè)計效果:
頁面信息層級明顯,“父子”關(guān)系尤為突出。
四、“父子關(guān)系”在平常設(shè)計中的應(yīng)用
A. Apple.com
蘋果官方網(wǎng)站首頁的信息設(shè)計中,包括重點與次要,核心與輔助的關(guān)系。
B. Amazon.com
亞馬遜默認(rèn)首頁的局部設(shè)計中,也存在比較明顯的運營息與常規(guī),重點與次要,核心與輔助的關(guān)系
Ps:常規(guī)信息本身可能是最重要的,比如導(dǎo)航,但是在網(wǎng)站成熟之后用戶對導(dǎo)航的認(rèn)知度很高,反而不再需要視覺強化,而運營信息本身的周期性決定它在某段時間需要被強化。
C. Gap.com
潮牌gap官網(wǎng)女裝頁面,以人物著裝大圖為主要推廣方式,在信息設(shè)計上,運營與常規(guī),核心與輔助信息關(guān)系非常明了。
有設(shè)計方法的指導(dǎo)固然可以保證頁面的規(guī)范性和規(guī)整性,但是在具體對應(yīng)的項目中,采用哪一種設(shè)計方法需要設(shè)計師有深入的思考和分析,同時,在完成項目之后對設(shè)計review并能總結(jié)經(jīng)驗,以取得更大進(jìn)步。
來源:阿里巴巴國際站UED
- 目前還沒評論,等你發(fā)揮!