首先看下面兩張圖,，左圖為相機(jī)拍攝的效果,，右圖為人眼不移動(dòng)時(shí)看到的效果，可以發(fā)現(xiàn)人眼對(duì)信息的獲取并不是一次性完成的,，它不能同時(shí)產(chǎn)生多個(gè)焦點(diǎn)從而把視線停留在更多的地方,，設(shè)計(jì)師需要考慮的是讓用戶通過(guò)眼球移動(dòng)，按照一定的順序獲取信息,，幫助獲取和理解的過(guò)程高效自然,。

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

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

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

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

　　一,、前期了解&分析

在開(kāi)始設(shè)計(jì)前,，除了對(duì)項(xiàng)目本身的背景目標(biāo)有所了解外，視覺(jué)設(shè)計(jì)師針對(duì)具體的頁(yè)面也需要了解一些內(nèi)容以幫助后面的設(shè)計(jì)有指導(dǎo)方向，包括頁(yè)面定位,、氛圍營(yíng)造,、信息優(yōu)先級(jí)和用戶核心行為。

　　1.1,、頁(yè)面定位是幫助分析頁(yè)面信息優(yōu)先級(jí),、核心行為的前提

通常有：

用戶是誰(shuí)

用戶來(lái)自哪里，即從什么渠道來(lái)到該頁(yè)面

頁(yè)面內(nèi)容定位,，提供什么,、不提供什么

頁(yè)面作用

舉個(gè)例子：

我們?cè)谠O(shè)計(jì)采購(gòu)直達(dá)市場(chǎng)新首頁(yè)時(shí)，交互通過(guò)對(duì)頁(yè)面的用戶對(duì)服務(wù)的熟知度進(jìn)行分析,，確定首頁(yè)的最核心目標(biāo)用戶是新買家;頁(yè)面內(nèi)容定位是展示市場(chǎng)的價(jià)值點(diǎn),，用戶產(chǎn)生的數(shù)據(jù)讓新買家對(duì)采購(gòu)直達(dá)形成品牌的認(rèn)知;

氛圍可能有：

新年主題大促

低折扣

信息鮮活

用戶活躍等等

以下是大促活動(dòng)正式頁(yè)面，左圖延續(xù)了預(yù)熱期嘉年華的氛圍,，但到活動(dòng)開(kāi)始階段氛圍已經(jīng)不是重點(diǎn),，用戶更關(guān)心商品及折扣本身，右圖為調(diào)整后將氛圍的營(yíng)造和類目圖片相結(jié)合,，很好的解決了氛圍和內(nèi)容的關(guān)系問(wèn)題,。

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

2)二級(jí)信息幫助理解：有了一級(jí)信息的吸引,，用戶進(jìn)一步了解內(nèi)容而可能停留3-5分鐘,，這時(shí)展示二級(jí)信息即提煉的精華內(nèi)容，幫助用戶在盡量短時(shí)間內(nèi)理解信息

3)三級(jí)信息詳細(xì)了解：前兩類信息基本上能幫助用戶獲取足夠的信息,，用戶如果繼續(xù)停留更長(zhǎng)的時(shí)間去詳細(xì)了解,，這類信息量會(huì)更多，在設(shè)計(jì)上視覺(jué)層級(jí)會(huì)靠后,，或通過(guò)交互方式展示,、提供入口跳轉(zhuǎn)

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

比如商品詳情頁(yè)面,，有些用戶在決定購(gòu)買之前，會(huì)查看用戶評(píng)價(jià),、歷史交易等內(nèi)容,，但這些查看的行為，最終是幫助用戶判斷是否購(gòu)買這個(gè)商品,，所以核心行為是最終導(dǎo)向的購(gòu)買,。

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

位置

大小

距離

內(nèi)容形式

色彩

2.1,、位置

位置是在設(shè)計(jì)開(kāi)始就會(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ū)寫(xiě)的,，這時(shí)最佳視域就是右上部。

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

由于用戶使用的屏幕分辨率不同造成首屏的高度會(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ù)值作為首屏的參考線,。

　　2.2、大小

在確定了模塊的位置后,，我們會(huì)考慮給這模塊多大的地盤(pán),，大小會(huì)很直觀反映信息的重要等級(jí)。

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

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

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

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

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

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

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

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

模糊元素：

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

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

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

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

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

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

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

下圖的排行榜前三名,，雖然用戶更習(xí)慣從左到右閱讀,，但由于數(shù)字的引導(dǎo)，視線也會(huì)被影響而按照1>2>3的順序閱讀,，如果希望這樣的順序更加明顯,，可以再通過(guò)放大1的圖片大小，拉開(kāi)差距,，結(jié)合多種視覺(jué)方法達(dá)到效果,。

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

1)先暖色后冷色

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

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

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

色相反差，下圖中主色調(diào)為藍(lán)色,，藍(lán)色行動(dòng)點(diǎn)和整體顏色一致,，層級(jí)相對(duì)較弱，而綠色行動(dòng)點(diǎn)和藍(lán)色在色相上的反差使得層級(jí)變高

運(yùn)用視覺(jué)表現(xiàn)手法建立信息層級(jí)后,，需要設(shè)計(jì)師不斷審視用戶的瀏覽順序是否真如我們期望的層級(jí)1到2到3…,，包括頁(yè)面大模塊和模塊內(nèi)的瀏覽，這些瀏覽順序會(huì)在頁(yè)面上形成視覺(jué)流;

審視頁(yè)面視覺(jué)流能幫助我們判斷用戶瀏覽頁(yè)面是否順暢,，瀏覽的順序是否有規(guī)律可循;如果我們的設(shè)計(jì)不能有效引導(dǎo)用戶的視線,，用戶的瀏覽更趨向于隨機(jī)性，就難以將希望表達(dá)的信息快速傳到到位。

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

線性視覺(jué)流

導(dǎo)向性視覺(jué)流

跳動(dòng)性視覺(jué)流

放射性視覺(jué)流

1)線性視覺(jué)流

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

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

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

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

總結(jié)一下：

1.項(xiàng)目前期我們需要了解頁(yè)面營(yíng)造的氛圍,，內(nèi)容定位;和交互一起分析信息的優(yōu)先級(jí)，用戶的核心行為;前期的準(zhǔn)備能幫助視覺(jué)設(shè)計(jì)過(guò)程不偏離方向

2. 通過(guò)位置,、大小,、距離、內(nèi)容形式,、色彩這些視覺(jué)表現(xiàn)方法來(lái)建立信息層級(jí)

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

我們有意識(shí)的分析用戶關(guān)注的信息優(yōu)先級(jí),，并通過(guò)視覺(jué)表現(xiàn)出來(lái),，是視覺(jué)設(shè)計(jì)師這個(gè)崗位很重要的職責(zé)，希望梳理的這些方法能幫助我們將這份職責(zé)做的更好,，我也樂(lè)在其中,，與大家共勉!