如何運(yùn)用視覺(jué)表現(xiàn)建立網(wǎng)頁(yè)的信息層級(jí)？

　　yangmei：作為視覺(jué)設(shè)計(jì)師，我們的作用除了最基本的滿足用戶審美需求，還會(huì)有品牌傳達(dá)，信息傳達(dá)，功能傳達(dá)等，其中想要信息有效的傳達(dá)給用戶，需要我們建立信息層級(jí)，而不是一股腦的丟給用戶自己理解，要做到這點(diǎn)有哪些視覺(jué)方法，這些方法的背后是否有理論依據(jù)，是本文的主題?！盎ヂ?lián)網(wǎng)的一些事”特推薦此文，大家跟隨筆者的步伐，了解如何運(yùn)用視覺(jué)表建立信息層級(jí)吧！

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

　　這個(gè)設(shè)計(jì)方法希望解決的主要是兩個(gè)問(wèn)題：

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

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

2、設(shè)計(jì)師的專(zhuān)業(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)用戶是新買(mǎi)家;頁(yè)面內(nèi)容定位是展示市場(chǎng)的價(jià)值點(diǎn)，用戶產(chǎn)生的數(shù)據(jù)讓新買(mǎi)家對(duì)采購(gòu)直達(dá)形成品牌的認(rèn)知;

1.2、了解頁(yè)面需要營(yíng)造的氛圍，能幫助我們判斷哪些元素能幫助達(dá)到目標(biāo)，氛圍可以是內(nèi)容本身，也可以通過(guò)視覺(jué)元素設(shè)計(jì)來(lái)營(yíng)造，但必須注意氛圍營(yíng)造不應(yīng)強(qiáng)過(guò)用戶關(guān)注的內(nèi)容本身

氛圍可能有：

新年主題大促

低折扣

信息鮮活

用戶活躍等等

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

1.3、分析信息優(yōu)先級(jí)

1)一級(jí)信息吸引用戶：假設(shè)用戶只會(huì)在這個(gè)頁(yè)面停留3-5秒，最能夠吸引用戶繼續(xù)瀏覽的是頁(yè)面的核心賣(mài)點(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ì)了解：前兩類(lèi)信息基本上能幫助用戶獲取足夠的信息，用戶如果繼續(xù)停留更長(zhǎng)的時(shí)間去詳細(xì)了解，這類(lèi)信息量會(huì)更多，在設(shè)計(jì)上視覺(jué)層級(jí)會(huì)靠后，或通過(guò)交互方式展示、提供入口跳轉(zhuǎn)

1.4、分析用戶核心行為

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

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

　　有了這些分析，交互產(chǎn)出物文檔中會(huì)給予大模塊的信息優(yōu)先級(jí)和用戶行為優(yōu)先級(jí)，如下圖：

　　視覺(jué)在進(jìn)行細(xì)節(jié)設(shè)計(jì)前，需要對(duì)每個(gè)模塊內(nèi)的具體內(nèi)容進(jìn)行優(yōu)先級(jí)的分析并產(chǎn)出如下示意圖并和交互和業(yè)務(wù)方確認(rèn)，這些都是幫助視覺(jué)設(shè)計(jì)過(guò)程不偏離方向的重要產(chǎn)出物。

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

視覺(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)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱(chēng)為“視域”。例如，網(wǎng)站logo、商品名、主題等重要信息，一般放在視域內(nèi)。當(dāng)然，這種劃分也受文化因素的影響，比如阿拉伯文字是從右向左書(shū)寫(xiě)的，這時(shí)視域就是右上部。

下圖是摘自摘自張帆 羅琦 宮曉東的《網(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ì)更合適;而如果要拉開(kāi)差距，僅通過(guò)位置來(lái)實(shí)現(xiàn)，上下排列更容易達(dá)到目標(biāo)。

　　舉個(gè)例子：如下圖時(shí)代周刊網(wǎng)站首頁(yè)，左側(cè)大圖是當(dāng)天的焦點(diǎn)新聞，在信息層級(jí)上為一級(jí)信息，視覺(jué)表現(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è)了;如果信息有主次，就要讓視覺(jué)表現(xiàn)上拉開(kāi)差距，而不是一個(gè)接近均等的局面。

　　3)用戶優(yōu)先關(guān)注上部，在網(wǎng)頁(yè)設(shè)計(jì)中有首屏的概念，首屏的信息比通過(guò)用戶拖動(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ù)值作為首屏的參考線。

2.2、大小

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

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

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

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

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

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

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

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

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

總結(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è)在其中，與大家共勉!

文章標(biāo)題：如何運(yùn)用視覺(jué)表現(xiàn)建立網(wǎng)頁(yè)的信息層級(jí)？
文章地址：http://www.bm7419.com/news18/169568.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、小程序開(kāi)發(fā)、自適應(yīng)網(wǎng)站、建站公司、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)