作為視覺設(shè)計師，我們的作用除了最基本的滿足用戶審美需求，還會有品牌傳達(dá)，信息傳達(dá)，功能傳達(dá)等，其中想要信息有效的傳達(dá)給用戶，需要我們建立信息層級，而不是一股腦的丟給用戶自己理解，要做到這點有哪些視覺方法，這些方法的背后是否有理論依據(jù)，是本文的主題。
首先看下面兩張圖，左圖為相機拍攝的效果，右圖為人眼不移動時看到的效果，可以發(fā)現(xiàn)人眼對信息的獲取并不是一次性完成的，它不能同時產(chǎn)生多個焦點從而把視線停留在更多的地方，設(shè)計師需要考慮的是讓用戶通過眼球移動，按照一定的順序獲取信息，幫助獲取和理解的過程高效自然。
這個設(shè)計方法希望解決的主要是兩個問題：
1、用戶獲取和理解信息的效率
建立良好的信息層級，能讓用戶在有限的時間里，快速獲取和理解有用、感興趣的信息，并產(chǎn)生下一步行為;
2、設(shè)計師的專業(yè)性
設(shè)計師有意識的分析信息優(yōu)先級，了解哪些視覺表現(xiàn)手法可以建立信息層級及每一種方法背后的理論依據(jù)，不僅僅憑感覺做設(shè)計。
一、前期了解&分析
在開始設(shè)計前，除了對項目本身的背景目標(biāo)有所了解外，視覺設(shè)計師針對具體的頁面也需要了解一些內(nèi)容以幫助后面的設(shè)計有指導(dǎo)方向，包括頁面定位、氛圍營造、信息優(yōu)先級和用戶核心行為。
2.1、位置
位置是在設(shè)計開始就會考慮的元素，人眼觀看事物時，總會遵循一些特定的規(guī)律，設(shè)計上遵循這些規(guī)律，能幫助用戶更容易、更快捷地看到或理解眼前的事物。其中有兩條規(guī)律和位置設(shè)計元素有關(guān)：
1)當(dāng)眼睛偏離視中心時，在偏離距離相等的情況下，人眼對左上的觀察最優(yōu)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為“最佳視域”。例如，網(wǎng)站logo、商品名、主題等重要信息，一般放在最佳視域內(nèi)。當(dāng)然，這種劃分也受文化因素的影響，比如阿拉伯文字是從右向左書寫的，這時最佳視域就是右上部。下圖是摘自摘自張帆 羅琦 宮曉東的《網(wǎng)頁界面設(shè)計藝術(shù)教程》對一個屏幕劃分后，用戶對不同位置不同的關(guān)注度差別：
2)第二條規(guī)律是眼睛沿水平方向運動比沿垂直方向運動快而且不易疲勞，一般先看到水平方向的物體，后看到垂直方向的物體。如下圖所示，左右的關(guān)注度差別要小于上下關(guān)注度差別，如想要體現(xiàn)并列的關(guān)系，左右排列會更合適;而如果要拉開差距，僅通過位置來實現(xiàn)，上下排列更容易達(dá)到目標(biāo)。
舉個例子：如下圖時代周刊網(wǎng)站首頁，左側(cè)大圖是當(dāng)天的焦點新聞，在信息層級上為一級信息，視覺表現(xiàn)上不僅面積大、內(nèi)容形式用大圖，位置也放在優(yōu)勢區(qū)域，可能98%的用戶會先關(guān)注到這個區(qū)域;
2.2、內(nèi)容形式
確定了模塊的位置、大小和距離關(guān)系后，我們會繼續(xù)考慮內(nèi)容的形式包括視頻、圖片、文字等，這里主要講我們經(jīng)常使用的圖形和文字;相比起文字，圖片在抓住用戶眼球這一點上是功不可沒的，同時還能使用戶在短時間內(nèi)形成形象記憶，從視覺層級上，人眼一般會先關(guān)注圖后關(guān)注文字。但僅僅這點還不夠，通過圖片抓取用戶眼球后引導(dǎo)視線到下一個關(guān)注點，是設(shè)計上更多會考慮的點，概括有以下表現(xiàn)手法：
1)方向性引導(dǎo)
圖片中的形象有些具有明顯的方向性，如人眼注視的方向、手勢所指的方向、物體運動方向、光照方向等，這些特征會引導(dǎo)人眼視線朝著設(shè)定的方向運動，從而達(dá)到視覺層級有主有次。
下圖假設(shè)中間的人物首先吸引了人的視線，為第一層級的信息，由于人眼注視方向為右側(cè)，使得用戶關(guān)注的下一個目標(biāo)會轉(zhuǎn)向“coder”文字，為第二層級的信息。
下圖WHAT WE DO位置在左上角容易先被關(guān)注，同時右側(cè)的人物形象占的篇幅較大也會搶視線，但由于人物運動的方向下沒有其他信息，圖片沒有充分發(fā)揮引導(dǎo)的作用，用戶瀏覽起來會不太順暢
經(jīng)過調(diào)整后的效果，雖然“WHAT WE DO”位置上并不在優(yōu)勢區(qū)域，但通過圖片方向的引導(dǎo)很自然的讓人眼落在文字信息上。
最后再總結(jié)一下：
1.項目前期我們需要了解頁面營造的氛圍，內(nèi)容定位;和交互一起分析信息的優(yōu)先級，用戶的核心行為;前期的準(zhǔn)備能幫助視覺設(shè)計過程不偏離方向
2. 通過位置、大小、距離、內(nèi)容形式、色彩這些視覺表現(xiàn)方法來建立信息層級
3. 設(shè)計過程和結(jié)束都要不斷審視頁面視覺流，看看用戶瀏覽是否順暢。
我們有意識的分析用戶關(guān)注的信息優(yōu)先級，并通過視覺表現(xiàn)出來，是視覺設(shè)計師這個崗位很重要的職責(zé)，希望梳理的這些方法能幫助我們將這份職責(zé)做的更好，我也樂在其中，與大家共勉!
感謝你的閱讀，本文由 阿里國際UED 出品，轉(zhuǎn)載時請注明出處，違者必究，謝謝你的合作。
注明出處格式：阿里國際UED ( http://www.aliued.com/2014/02/25/2354/ )
掃一掃 加微信咨詢
