大主宰天蚕土豆小说,辰东完美世界有声小说

二、建立信息層級(jí)的視覺方法

視覺表現(xiàn)手法主要有以下幾種元素，實(shí)際設(shè)計(jì)中為了讓效果拉開主次，可能會(huì)同時(shí)使用多種方法以達(dá)到更好的效果：

l 位置

l 大小

l 距離

l 內(nèi)容形式

l 色彩

2.1、位置

位置是在設(shè)計(jì)開始就會(huì)考慮的元素，人眼觀看事物時(shí)，總會(huì)遵循一些特定的規(guī)律，設(shè)計(jì)上遵循這些規(guī)律，能幫助用戶更容易、更快捷地看到或理解眼前的事物。其中有兩條規(guī)律和位置設(shè)計(jì)元素有關(guān)：

1）當(dāng)眼睛偏離視中心時(shí)，在偏離距離相等的情況下，人眼對(duì)左上的觀察最優(yōu)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為“最佳視域”。例如，網(wǎng)站logo、商品名、主題等重要信息，一般放在最佳視域內(nèi)。當(dāng)然，這種劃分也受文化因素的影響，比如阿拉伯文字是從右向左書寫的，這時(shí)最佳視域就是右上部?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計(jì)

下圖是摘自摘自張帆羅琦宮曉東的《網(wǎng)頁(yè)界面設(shè)計(jì)藝術(shù)教程》對(duì)一個(gè)屏幕劃分后，用戶對(duì)不同位置不同的關(guān)注度差別：

2）第二條規(guī)律是眼睛沿水平方向運(yùn)動(dòng)比沿垂直方向運(yùn)動(dòng)快而且不易疲勞，一般先看到水平方向的物體，后看到垂直方向的物體。如下圖所示，左右的關(guān)注度差別要小于上下關(guān)注度差別，如想要體現(xiàn)并列的關(guān)系，左右排列會(huì)更合適；而如果要拉開差距，僅通過位置來實(shí)現(xiàn)，上下排列更容易達(dá)到目標(biāo)?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁(yè)設(shè)計(jì)

舉個(gè)例子：如下圖時(shí)代周刊網(wǎng)站首頁(yè)，左側(cè)大圖是當(dāng)天的焦點(diǎn)新聞，在信息層級(jí)上為一級(jí)信息，視覺表現(xiàn)上不僅面積大、內(nèi)容形式用大圖，位置也放在優(yōu)勢(shì)區(qū)域，可能98%的用戶會(huì)先關(guān)注到這個(gè)區(qū)域；

假如對(duì)設(shè)計(jì)稿的位置做調(diào)整如下，如果焦點(diǎn)新聞圖片是第一優(yōu)先級(jí)的信息，雖然它是大圖的形式，占的面積也夠大，但由于位置不在最佳視域，會(huì)被“Latest Headlines”分散一部分視線，可能只有60%的用戶先看到右側(cè)了；如果信息有主次，就要讓視覺表現(xiàn)上拉開差距，而不是一個(gè)接近均等的局面。——網(wǎng)站設(shè)計(jì)

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

由于用戶使用的屏幕分辨率不同造成首屏的高度會(huì)有差別，根據(jù)我們網(wǎng)站的數(shù)據(jù)，目前分辨率高度為768占多數(shù)，所以設(shè)計(jì)時(shí)會(huì)以768高度為基準(zhǔn)，去掉瀏覽器本身的菜單等占用的高度，實(shí)際展示給用戶的第一屏平均為600px，這個(gè)數(shù)據(jù)會(huì)根據(jù)以后目標(biāo)用戶的分辨率變化做相應(yīng)的調(diào)整，我們?cè)谠O(shè)計(jì)時(shí)可用這個(gè)數(shù)值作為首屏的參考線。——網(wǎng)頁(yè)設(shè)計(jì)

2.2、大小

在確定了模塊的位置后，我們會(huì)考慮給這模塊多大的地盤，大小會(huì)很直觀反映信息的重要等級(jí)?！?a href="http://pgwc.com.cn" target="_self">定制網(wǎng)站

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

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

1）重要的元素要大一些，即使比例失調(diào)也可以考慮
2）要想辦法表現(xiàn)出差距；如果一個(gè)元素的重要性是2，那就把它的大小做成4——重慶定制網(wǎng)站

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

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

假如對(duì)界面調(diào)整如下：焦點(diǎn)新聞圖縮小兩倍后，可以看出視覺層級(jí)的區(qū)分就不明顯了?！?a href="http://pgwc.com.cn" target="_self">小程序

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

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

2.3、距離

前面講到的將元素的細(xì)節(jié)放大，眼睛會(huì)感受離它更近而被優(yōu)先注意到，雖然信息展現(xiàn)的媒介是個(gè)平面，但是通過視覺手段能體現(xiàn)出三維的效果，除了大小，還有其他視覺手法如下：

1）拉遠(yuǎn)三維距離

想要達(dá)到距離被拉遠(yuǎn)的效果，下面列舉的方法是讓信息變得不清晰，眼睛看起來無法對(duì)焦到信息上面，包括：

模糊元素：

圖背景的人物被模糊后，使它和兩個(gè)行動(dòng)點(diǎn)以及右側(cè)的圖標(biāo)不在一個(gè)平面上，離眼睛更遠(yuǎn)，用戶在進(jìn)行行動(dòng)點(diǎn)和文字識(shí)別時(shí)也不會(huì)被模糊的背景所干擾

降低透明度也同樣可以起到作用，當(dāng)有些背景圖模糊后比較難被整體感知，選擇降低透明度也能拉遠(yuǎn)距離——重慶網(wǎng)站設(shè)計(jì)

增加半透明圖層，在界面色彩或元素比較多的情況下，僅降低透明度也可能無法拉開距離，如下圖希望突出TV購(gòu)時(shí)，其他四個(gè)模塊降低透明度后由于本身色彩比較豐富而沒有明顯拉開差距，通過加上灰色的半透明圖層后，TV購(gòu)以外的模塊自然的退到視線后面了。

2）拉近三維距離

增加投影是最常用到的讓元素看起來和其他內(nèi)容不在同一平面的視覺手法，通常像彈出框、鼠標(biāo)移上后出現(xiàn)的浮層等由于要壓在其他信息之上，增加投影能幫助用戶聚焦在帶投影的模塊而不受下面信息的干擾——重慶網(wǎng)頁(yè)設(shè)計(jì)

3）除了三維，二維距離對(duì)視覺層級(jí)也有影響，根據(jù)格式塔心理學(xué)接近性定律，距離較短或互相接近的部分容易組成整體；人眼對(duì)距離臨近的信息更容易先去關(guān)注，在視覺手法應(yīng)用上，元素距離上一個(gè)焦點(diǎn)近的，視覺層級(jí)高。如下圖，第一層級(jí)的新聞焦點(diǎn)圖和右側(cè)的小圖片比較臨近，視線容易往右上角運(yùn)動(dòng)；——重慶網(wǎng)站設(shè)計(jì)

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

2.4、內(nèi)容形式

確定了模塊的位置、大小和距離關(guān)系后，我們會(huì)繼續(xù)考慮內(nèi)容的形式包括視頻、圖片、文字等，這里主要講我們經(jīng)常使用的圖形和文字；相比起文字，圖片在抓住用戶眼球這一點(diǎn)上是功不可沒的，同時(shí)還能使用戶在短時(shí)間內(nèi)形成形象記憶，從視覺層級(jí)上，人眼一般會(huì)先關(guān)注圖后關(guān)注文字。但僅僅這點(diǎn)還不夠，通過圖片抓取用戶眼球后引導(dǎo)視線到下一個(gè)關(guān)注點(diǎn)，是設(shè)計(jì)上更多會(huì)考慮的點(diǎn)，概括有以下表現(xiàn)手法：——網(wǎng)頁(yè)設(shè)計(jì)

1）方向性引導(dǎo)

圖片中的形象有些具有明顯的方向性，如人眼注視的方向、手勢(shì)所指的方向、物體運(yùn)動(dòng)方向、光照方向等，這些特征會(huì)引導(dǎo)人眼視線朝著設(shè)定的方向運(yùn)動(dòng)，從而達(dá)到視覺層級(jí)有主有次。

下圖假設(shè)中間的人物首先吸引了人的視線，為第一層級(jí)的信息，由于人眼注視方向?yàn)橛覀?cè)，使得用戶關(guān)注的下一個(gè)目標(biāo)會(huì)轉(zhuǎn)向“coder”文字，為第二層級(jí)的信息。

下圖WHAT WE DO位置在左上角容易先被關(guān)注，同時(shí)右側(cè)的人物形象占的篇幅較大也會(huì)搶視線，但由于人物運(yùn)動(dòng)的方向下沒有其他信息，圖片沒有充分發(fā)揮引導(dǎo)的作用，用戶瀏覽起來會(huì)不太順暢

經(jīng)過調(diào)整后的效果，雖然“WHAT WE DO”位置上并不在優(yōu)勢(shì)區(qū)域，但通過圖片方向的引導(dǎo)很自然的讓人眼落在文字信息上。——定制網(wǎng)站

2）符號(hào)引導(dǎo)

除了圖片，一些符號(hào)本身帶有順序和方向性，也能有效引導(dǎo)視線根據(jù)符號(hào)來瀏覽，包括阿拉伯?dāng)?shù)字、字母順序、時(shí)間順序、箭頭等。

下圖的排行榜前三名，雖然用戶更習(xí)慣從左到右閱讀，但由于數(shù)字的引導(dǎo)，視線也會(huì)被影響而按照1>2>3的順序閱讀，如果希望這樣的順序更加明顯，可以再通過放大1的圖片大小，拉開差距，結(jié)合多種視覺方法達(dá)到效果?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站

時(shí)間軸在界面中應(yīng)用也很廣泛，人眼會(huì)受時(shí)間順序的影響去瀏覽信息，甚至?xí)蚱瞥Ｒ?guī)的如從左到右的瀏覽習(xí)慣，如下圖雖然2的位置更容易引導(dǎo)用戶優(yōu)先瀏覽，但時(shí)間軸對(duì)信息的影響更明顯，一般用戶會(huì)優(yōu)先查看模塊1，再根據(jù)時(shí)間先后從右向左關(guān)注模塊2。

2.5、色彩

色彩是影響用戶對(duì)界面第一印象的重要因素，色彩的應(yīng)用對(duì)視覺層級(jí)的影響也能起到立竿見影的效果，總結(jié)起來人眼對(duì)色彩的關(guān)注度差別主要是以下兩點(diǎn)：

1）先暖色后冷色

色彩的不同色相，對(duì)人眼的刺激及產(chǎn)生的反映目前沒有找到絕對(duì)的先后順序，但是冷色類和暖色類色彩，是有明顯的層次差別的，如下圖，人眼一般會(huì)優(yōu)先看到左側(cè)的圖片，這和我們?nèi)搜蹖?duì)不同波長(zhǎng)的反映有一定關(guān)系;——重慶網(wǎng)站設(shè)計(jì)

從生理學(xué)上講，人眼晶狀體的調(diào)節(jié)，對(duì)于距離的變化是非常精密和靈敏的，我們能判斷出物體離我們的遠(yuǎn)近，但是它有一定的限度，對(duì)于波長(zhǎng)微小的差異就無法正確調(diào)節(jié)。眼睛在同一距離觀察不同波長(zhǎng)的色彩時(shí)，波長(zhǎng)長(zhǎng)的暖色如紅、橙等色，在視網(wǎng)膜上形成內(nèi)側(cè)映像；波長(zhǎng)短的冷色如藍(lán)、紫色等，則在視網(wǎng)膜上形成外側(cè)映像。因此，暖色好象在前進(jìn)，冷色好象在后退。

美國(guó)數(shù)字營(yíng)銷公司Hubspot曾經(jīng)做過一場(chǎng)A/B Test，用于測(cè)試不同顏色對(duì)于用戶點(diǎn)擊轉(zhuǎn)化造成的差異。在圖中，左右兩個(gè)測(cè)試頁(yè)面在內(nèi)容上完全一致，唯一不同的是按鈕的顏色，在超過2000人次的樣本測(cè)試中，最終紅色方案的點(diǎn)擊率超過綠色方案的點(diǎn)擊率足足21%。而在測(cè)試之前，大部分的研究員都猜測(cè)綠色方案會(huì)獲得更高的點(diǎn)擊，因?yàn)榫椭庇X而言，綠色代表著通行、準(zhǔn)許通過的意思，而紅色則更傾向于警告、阻止意味?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁(yè)設(shè)計(jì)
這個(gè)測(cè)試從一定程度上反映了暖色對(duì)用戶關(guān)注度和行動(dòng)力的影響，當(dāng)然并不是說為了提高點(diǎn)擊率就要用暖色，具體的色彩風(fēng)格還是要根據(jù)產(chǎn)品定位來設(shè)計(jì)。

2）先高反差后低反差

除了冷暖色對(duì)眼睛的刺激不同，色彩的反差是最容易造成關(guān)注度差別的因素，在自然界動(dòng)物為了生存，運(yùn)用的保護(hù)色就是和反差相關(guān)，如圖中的貓頭鷹，和它生活的環(huán)境相關(guān)，毛色都進(jìn)化成類似的色彩，以起到隱藏保護(hù)的作用；相反，顏色反差大就特別容易引起注視，如下黃色郁金香中獨(dú)特的紅色。