信息層級展示規(guī)則是交互設(shè)計(jì)中的小細(xì)節(jié)。要分析信息的優(yōu)先級，用戶的核心行為；并通過位置、大小、距離、內(nèi)容形式、表現(xiàn)方法來建立信息層級；設(shè)計(jì)過程和結(jié)束都要不斷審視頁面視覺流，看看用戶瀏覽是否順暢。作為設(shè)計(jì)師的你，注意到了嗎？

2016年8月26日，照舊收到招商的賬單通知，一眼就絕望的數(shù)字，然后我忽然發(fā)現(xiàn)了驚喜。它的展示樣式發(fā)生了變化。

特意截圖對比兩個(gè)不同的信息展示。在沒有看新版之前，看舊版也沒有什么問題，我依舊可以獲取到我想獲取的信息。都是信息展示，能有什么差異呢？我們來看看新版，可以明顯地看到三個(gè)層級：黑色的文字，灰色的文字，綠色的按鈕。信息拆解的更清楚。這一堆信息里，用戶主要想關(guān)注什么？產(chǎn)品本身又想傳達(dá)什么？用戶需要知道這是什么？標(biāo)題強(qiáng)化告知用戶這是信息是什么？用戶關(guān)注的信息賬單、最低還款信息強(qiáng)化。而對應(yīng)的賬單日期等用戶的關(guān)注度更低。增加一個(gè)功能：立即還款。選用綠色很清晰的就可以看見。

改動(dòng)不大不小，也許有些用戶根本感知不到，但可以肯定的是用戶獲取有效信息的時(shí)間更短了，速度越快了。我想這就是設(shè)計(jì)中的小較真，小細(xì)節(jié)。

帶著這個(gè)小較真開始去翻信息展示的規(guī)則?？催^一個(gè)實(shí)驗(yàn)，我們真實(shí)看到的信息跟我們眼睛實(shí)際獲取的不一樣?？聪旅鎯蓮垐D，左圖為相機(jī)拍攝的效果，右圖為人眼不移動(dòng)時(shí)看到的效果，可以發(fā)現(xiàn)人眼對信息的獲取并不是一次性完成的，它不能同時(shí)產(chǎn)生多個(gè)焦點(diǎn)從而把視線停留在更多的地方，設(shè)計(jì)師需要考慮的是讓用戶通過眼球移動(dòng)，按照一定的順序獲取信息，幫助獲取和理解的過程高效自然。

與之相匹配的設(shè)計(jì)準(zhǔn)則主要有兩個(gè)：

1、用戶獲取和理解信息的效率

建立良好的信息層級，能讓用戶在有限的時(shí)間里，快速獲取和理解有用、感興趣的信息，并產(chǎn)生下一步行為；

2、設(shè)計(jì)師的專業(yè)性

設(shè)計(jì)師有意識的分析信息優(yōu)先級，了解哪些視覺表現(xiàn)手法可以建立信息層級及每一種方法背后的理論依據(jù)，不僅僅憑感覺做設(shè)計(jì)。

小tips

1.前期的了解和分析

在開始設(shè)計(jì)前，除了對項(xiàng)目本身的背景目標(biāo)有所了解外，也需要了解一些內(nèi)容，頁面的信息層級和用戶的核心行為。

（1）頁面定位是幫助分析頁面信息優(yōu)先級、核心行為的前提

通常有：

• 用戶是誰
• 用戶來自哪里，即從什么渠道來到該頁面
• 頁面內(nèi)容定位，提供什么、不提供什么
• 頁面作用

舉個(gè)例子：

在設(shè)計(jì)數(shù)據(jù)分析的首頁時(shí)，因?yàn)樾略龊芏嗟墓δ?，整個(gè)框架大調(diào)整，通過對頁面的用戶對服務(wù)的熟知度進(jìn)行分析，確定首頁的最核心功能是傳達(dá)產(chǎn)品的基本功能。

（2）了解頁面需要營造的氛圍

了解頁面需要營造的氛圍，能幫助我們判斷哪些元素能幫助達(dá)到目標(biāo)，氛圍可以是內(nèi)容本身，也可以通過視覺元素設(shè)計(jì)來營造。

一般運(yùn)營頁面和產(chǎn)品主頁比較多，營造頁面氛圍傳達(dá)信息。

（3）分析信息優(yōu)先級

1）一級信息吸引用戶：假設(shè)用戶只會在這個(gè)頁面停留3-5秒，能夠吸引用戶繼續(xù)瀏覽是頁面的一級信息，它必須少而精，在設(shè)計(jì)上就需要重點(diǎn)展示；

2）二級信息幫助理解：針對一級信息進(jìn)行解釋，提煉精華內(nèi)容，幫助用戶在盡量短時(shí)間內(nèi)理解信息；

3）三級信息詳細(xì)了解：一級和二級信息已經(jīng)很好的解釋，三級信息做補(bǔ)充，更多的做為一個(gè)展示或者入口，提供跳轉(zhuǎn)功能。

（4）分析用戶核心行為

不同類型用戶會在不同階段產(chǎn)生不同的行為，我們需要判斷這些行為最終導(dǎo)向是什么？

有了這些分析，交互產(chǎn)出物文檔中會給予大模塊的信息優(yōu)先級和用戶行為優(yōu)先級，哪些需要重要展示，哪些信息可以弱化。交互稿可以通過黑白灰眼色來展示頁面的信息層級。

2.建立信息層級的視覺方法

表現(xiàn)手法主要有以下幾種元素：

• 位置
• 大小
• 距離
• 內(nèi)容形式
• 色彩

（1） 位置

提到信息展示規(guī)則就不得不提格式塔原則。位置的擺放是在設(shè)計(jì)開始就會考慮的元素，視線掃描事物時(shí)，總會遵循一些特定的規(guī)律，設(shè)計(jì)上如果遵循這些規(guī)律，就能夠幫助用戶更容易并且更高效地看到或者理解信息。

1）當(dāng)眼睛偏離視中心時(shí)，在偏離距離相等的情況下，人眼對左上的觀察最優(yōu)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為“最佳視域”。例如，網(wǎng)站logo、商品名、主題等重要信息，一般放在最佳視域內(nèi)。當(dāng)然，這種劃分也受文化因素的影響，比如阿拉伯文字是從右向左書寫的，這時(shí)最佳視域就是右上部。下圖是摘自摘自張帆 羅琦 宮曉東的《網(wǎng)頁界面設(shè)計(jì)藝術(shù)教程》對一個(gè)屏幕劃分后，用戶對不同位置不同的關(guān)注度差別：

2）第二條規(guī)律是眼睛沿水平方向運(yùn)動(dòng)比沿垂直方向運(yùn)動(dòng)快而且不易疲勞，一般先看到水平方向的物體，后看到垂直方向的物體。如下圖所示，左右的關(guān)注度差別要小于上下關(guān)注度差別，如想要體現(xiàn)并列的關(guān)系，左右排列會更合適；而如果要拉開差距，僅通過位置來實(shí)現(xiàn)，上下排列更容易達(dá)到目標(biāo)。

3）用戶優(yōu)先關(guān)注上部，在網(wǎng)頁設(shè)計(jì)中有首屏的概念，首屏的信息比通過用戶拖動(dòng)滾動(dòng)條出現(xiàn)的第二、三屏層級要高。

雖然這個(gè)更多是視覺設(shè)計(jì)師的工作，但是輸出交互原型的時(shí)候也應(yīng)該考慮到這些細(xì)節(jié)問題，重要的信息展示在第一屏。由于用戶使用的屏幕分辨率不同造成首屏的高度會有差別，根據(jù)網(wǎng)站的數(shù)據(jù)，分辨率的高度取多數(shù)值，根據(jù)多數(shù)值為基準(zhǔn)，去掉瀏覽器本身的菜單等占用的高度，然后給出實(shí)際的展示高度。這個(gè)數(shù)據(jù)根據(jù)以后目標(biāo)用戶的分辨率變化做相應(yīng)的調(diào)整，在設(shè)計(jì)時(shí)可用這個(gè)數(shù)值作為首屏的參考線。

（2）大小

在確定了模塊的位置需要考慮給這個(gè)模塊多大的地盤，大小往往直觀反映信息的重要程度。

有個(gè)體育海報(bào)設(shè)計(jì)的案例，涉及到四種球類運(yùn)動(dòng)包括足球、高爾夫球、棒球、籃球，如果按照實(shí)際大小設(shè)計(jì)會讓籃球和足球顯得更重要，為了體現(xiàn)體育的平等性，設(shè)計(jì)上將球的大小做了調(diào)整。

Giles Colborne的《簡約至上》書中的結(jié)論可以指導(dǎo)我們通過大小拉開差距：

1）重要的元素要大一些，即使比例失調(diào)也可以考慮；

2）要想辦法表現(xiàn)出差距；如果一個(gè)元素的重要性是2，那就把它的大小做成4。

以時(shí)代周刊首頁為例，目前的設(shè)計(jì)左側(cè)的焦點(diǎn)新聞圖占的面積和中間新聞圖對比拉開了差距，使得用戶容易先關(guān)注到一級信息而且不容易被周邊干擾；

我們對兩個(gè)新聞圖片的面積進(jìn)行對比可以看到差距有4倍左右；

假如對界面調(diào)整如下：焦點(diǎn)新聞圖縮小兩倍后，可以看出視覺層級的區(qū)分就不明顯了。

除了元素本身所占的面積會影響視覺層級，元素的細(xì)節(jié)放大程度也同樣起到作用，細(xì)節(jié)放大后，人眼會感受到元素更清晰，離眼睛更近而容易先去關(guān)注，當(dāng)然前提是保證信息可被理解，如果局部細(xì)節(jié)放大但用戶不能理解信息是什么就不能起到吸引用戶的作用。

下圖是一個(gè)模特公司的網(wǎng)站，首頁上隨機(jī)出現(xiàn)模特的照片包括面部和半身照片，放大臉部特征后的照片保證了用戶能理解這是一個(gè)模特的形象，使得用戶會優(yōu)先關(guān)注細(xì)節(jié)放大的照片。

（3） 距離

前面講到的將元素的細(xì)節(jié)放大，眼睛會感受離它更近而被優(yōu)先注意到雖然信息展現(xiàn)的媒介是個(gè)平面，但是通過視覺手段能體現(xiàn)出三維的效果，除了三維，二維距離對視覺層級也有影響。根據(jù)格式塔心理學(xué)接近性定律，距離較短或互相接近的部分容易組成整體；人眼對距離臨近的信息更容易先去關(guān)注，在表現(xiàn)手法應(yīng)用上，元素距離上一個(gè)焦點(diǎn)近的，層級更高。如下圖，第一層級的新聞焦點(diǎn)圖和右側(cè)的小圖片比較臨近，視線容易往右上角運(yùn)動(dòng)；

對距離做了調(diào)整后，雖然中間的小圖片本身比文字更吸引人，但由于焦點(diǎn)圖下方的標(biāo)題距離更近而形成整體，視線容易先往下運(yùn)動(dòng)。

（4）內(nèi)容形式

確定模塊的位置、大小和距離關(guān)系后，我們會考慮內(nèi)容的形式包括視頻、圖片、文字等。相比起文字，圖片在抓住用戶眼球這一點(diǎn)上是功不可沒的，同時(shí)還能使用戶在短時(shí)間內(nèi)形成形象記憶。從視覺層級上，人眼一般會先關(guān)注圖后關(guān)注文字。

（5）色彩

1）先暖色后冷色

美國數(shù)字營銷公司Hubspot曾經(jīng)做過一場A/B Test，用于測試不同顏色對于用戶點(diǎn)擊轉(zhuǎn)化造成的差異。 在圖中，左右兩個(gè)測試頁面在內(nèi)容上完全一致，唯一不同的是按鈕的顏色，在超過2000人次的樣本測試中，最終紅色方案的點(diǎn)擊率超過綠色方案的點(diǎn)擊率足足21%。而在測試之前，大部分的研究員都猜測綠色方案會獲得更高的點(diǎn)擊，因?yàn)榫椭庇X而言，綠色代表著通行、準(zhǔn)許通過的意思，而紅色則更傾向于警告、阻止意味。

這個(gè)測試從一定程度上反映了暖色對用戶關(guān)注度和行動(dòng)力的影響，當(dāng)然并不是說為了提高點(diǎn)擊率就要用暖色，具體的色彩風(fēng)格還是要根據(jù)產(chǎn)品定位來設(shè)計(jì)。

3.審視頁面視覺流

設(shè)計(jì)師不斷審視用戶的瀏覽順序是否真如我們期望的層級1到2到3……包括頁面大模塊和模塊內(nèi)的瀏覽，這些瀏覽順序會在頁面上形成視覺流；審視頁面視覺流能幫助我們判斷用戶瀏覽頁面是否順暢，瀏覽的順序是否有規(guī)律可循；如果我們的設(shè)計(jì)不能有效引導(dǎo)用戶的視線，用戶的瀏覽更趨向于隨機(jī)性，就難以將希望表達(dá)的信息快速傳到到位。

下面的內(nèi)容主要是介紹比較典型的視覺流及每種類型的特征，包括：

• 線性視覺流
• 導(dǎo)向性視覺流
• 跳動(dòng)性視覺流
• 放射性視覺流

（1）線性視覺流

橫向視覺流引導(dǎo)用戶視線從左到右或從右到左視覺流動(dòng)，是最符合用戶視覺習(xí)慣的瀏覽方式，給人穩(wěn)定可信之感。

如digg.com首頁，整體頁面和單個(gè)模塊都是典型的橫向視覺流，用戶從左到右瀏覽到邊界后，視線回掃到下一行繼續(xù)從左到右閱讀；這里會有一個(gè)橫向?yàn)g覽最佳區(qū)域的數(shù)值，如digg選用的頁面寬度為1000px左右，每行展示3個(gè)item，用戶屏幕的分辨率變大后，這兩個(gè)數(shù)值是否應(yīng)該繼續(xù)增加，增加到什么程度，是人眼獲取信息效率最高的？這個(gè)疑問我還沒有找到相應(yīng)的理論或?qū)嶒?yàn)支撐，后續(xù)再查找資料。

之前在小浪做門戶網(wǎng)站的時(shí)候也做過相對應(yīng)的研究，頁面寬度的增加，4個(gè)item是最合適的寬度。不過后續(xù)沒有驗(yàn)證。

縱向視覺流引導(dǎo)用戶視線從上到下瀏覽，由于眼睛縱向的運(yùn)動(dòng)方式需要瞳孔不斷對焦，當(dāng)縱向掃視頁面模塊時(shí)效率和橫向?yàn)g覽相差不大，但閱讀細(xì)節(jié)時(shí)效率會變低，如縱向排列的文字，更適用于需要逐字閱讀的古詩古文；

下圖是將原來橫向視覺流的digg首頁的排版調(diào)整后，變成了縱向視覺流。除了大圖，用戶會選擇三欄的其中一列縱向?yàn)g覽直到找到某一目標(biāo)信息后，橫向?yàn)g覽細(xì)節(jié)。

網(wǎng)頁界面的縱向高度限制比橫向小，因?yàn)橛脩袅?xí)慣上下滾動(dòng)來瀏覽更多信息。當(dāng)用戶還處于確定目標(biāo)信息時(shí)，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息；如下圖facebook日歷界面，時(shí)間軸橫向排列時(shí)，由于寬度受限，需要橫向切換或滾動(dòng)條來查看更多日期：

將時(shí)間軸方向調(diào)整為縱向，使得用戶能通過上下滾動(dòng)更高效查看當(dāng)月所有日期。

斜線視覺流能營造運(yùn)動(dòng)感和速度感，但由于角度傾斜使文字認(rèn)知上會有一定困難，大量文字信息排列不適合這種視覺流，常用于設(shè)計(jì)中的點(diǎn)綴或本身信息量比較少的界面，如下圖的健身俱樂部海報(bào)：

曲線視覺流，用戶視線會形成個(gè)性化的曲線，具有律動(dòng)和活潑感。這種類型由于眼動(dòng)幅度較大，長時(shí)間大量的運(yùn)用會產(chǎn)生視覺疲勞，所以不適合大段文字使用。一般會結(jié)合圖形做曲線視覺流，讓用戶的視線在圖像區(qū)域稍作停留。

（2）導(dǎo)向性視覺流

如下圖所示，導(dǎo)向性視覺流會設(shè)計(jì)一個(gè)誘導(dǎo)元素吸引用戶注意，再通過誘導(dǎo)元素注意到目標(biāo)信息；常見的誘導(dǎo)元素可以分為線條、形象包括人物或物品、指示符號如箭頭字母等。這種視覺流要把握好誘導(dǎo)元素與目標(biāo)信息的主次關(guān)系，純誘導(dǎo)元素不宜太強(qiáng)，否則會削弱目標(biāo)信息的傳播力度；如果能在誘導(dǎo)元素中包含部分目標(biāo)信息，可以增加信息傳達(dá)的有效性。

（3）跳動(dòng)視覺流

在性質(zhì)相同或相似的信息中，選擇突出或感興趣的信息之間跳動(dòng)瀏覽, 給人一種自主選擇的權(quán)利，但設(shè)計(jì)上也可以通過調(diào)整元素的強(qiáng)弱，不露痕跡地傳遞主次。

如前面提過的模特公司網(wǎng)站界面，模特的照片都是同等性質(zhì)的信息，用戶瀏覽具有一定的隨機(jī)性，但通過放大和縮小人像同樣也傳遞了主次。

（4）放射性視覺流

視線開端在頁面中部，使中間的元素沖擊感最強(qiáng)，信息傳達(dá)最明確，再形成由中部發(fā)散出去的視覺運(yùn)動(dòng)。

比如很多汽車網(wǎng)站，中間的主圖最能體現(xiàn)信息的核心，通過主圖再發(fā)散到上方的導(dǎo)航或下方的其他服務(wù)入口。

七七八八說的四種視覺流類型是比較典型的，但不代表全部。無論是那種路徑，用戶瀏覽是否順暢，信息是否按照主次傳遞到位，是我們要一直堅(jiān)守的目標(biāo)。

4、小結(jié)

最后歸納：

1.分析信息的優(yōu)先級，用戶的核心行為；

2. 通過位置、大小、距離、內(nèi)容形式、表現(xiàn)方法來建立信息層級；

3. 設(shè)計(jì)過程和結(jié)束都要不斷審視頁面視覺流，看看用戶瀏覽是否順暢。

作者：阮小阮

來源：微信公眾號【阮的夢空間】

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會明確標(biāo)注作者和來源，若標(biāo)注有誤，請聯(lián)系主編QQ：419297645