一個(gè)“看起來不錯(cuò)”的網(wǎng)站他的視覺層次結(jié)構(gòu)是可以直接影響用戶的流量和決策的。從基本的角度來說，視覺層次結(jié)構(gòu)描述了哪些元素在你的用戶的注意力中占據(jù)了主導(dǎo)地位，并最吸引他們的眼球。但是，沒有一種正確的方法來構(gòu)建一個(gè)具體的層級(jí)結(jié)構(gòu)，而有競爭力的網(wǎng)頁設(shè)計(jì)師必須完善不同的方法，或者發(fā)明新的方法才能在游戲中保持領(lǐng)先。
一、視覺流程
視覺流程是各種視覺信息作用于人們的視覺器官，引起視線的移動(dòng)和變化，視線會(huì)隨著注意物的方向、形態(tài)、色彩、聲音等心理暗示的影響遵循著一定的方向和秩序有規(guī)律地進(jìn)行變化。人們的視覺流程總會(huì)受生活習(xí)慣、地域文化等因素影響形成一定的視覺流程。如國內(nèi)人們文字是從左向右、從上至下的書寫，因此人眼對(duì)信息的觀察也是從左到右、從上至下。在網(wǎng)頁界面設(shè)計(jì)中最常見的視覺流程有“F”模式、“Z”模式、縱向模式3種。
1.F模式
F模式（見圖1)是指用戶通常會(huì)沿著左側(cè)垂直瀏覽而下，先去尋找文章中每個(gè)段落開頭的興趣點(diǎn)，這時(shí)如果用戶發(fā)現(xiàn)了他喜歡的，他就會(huì)從這里開始水平線方向的閱讀，最終結(jié)果就是用戶的視線呈F型或者E型進(jìn)行瀏覽。這種模式在一些以文字為主的網(wǎng)站較常出現(xiàn)，例如新聞資訊類的網(wǎng)站、博客等。
圖1 視覺流程-F模式
實(shí)際上，F(xiàn)模式就是一個(gè)引導(dǎo)路線圖，它不僅僅是一個(gè)頁面，因?yàn)镕模式的網(wǎng)站除了頂部展示區(qū)外，其他的內(nèi)容會(huì)顯得更平淡。
就像艾瑞網(wǎng)“互聯(lián)網(wǎng)+”頁面（見圖2)就遵循了人們的視覺流程，全局導(dǎo)航下方的內(nèi)容為：上半部分是焦點(diǎn)新聞；下半部分左欄是次重點(diǎn)新聞，以圖片加標(biāo)題的列表形式呈現(xiàn)，若對(duì)標(biāo)題形式感興趣則可單擊進(jìn)入專題頁面；而再次之的其他新聞則是以文字鏈接的形式出現(xiàn)在右欄。
圖2 艾瑞網(wǎng)“互聯(lián)網(wǎng)+”頁面
2.Z模式
Z模式（見圖3）是基于用戶從左到右自上而下的閱讀習(xí)慣，指用戶首先關(guān)注的頁頭水平方向上的內(nèi)容，依照從頭部左到頭部右，再沿著對(duì)角線瀏覽下一部分的中部左到中部右，循環(huán)往復(fù)的瀏覽模式。這種較常出現(xiàn)于網(wǎng)頁內(nèi)容不是以大量文字為信息內(nèi)容的頁面。
Z模式的優(yōu)點(diǎn)就是簡單，它幾乎可以適用到任何的網(wǎng)頁交互。但如果網(wǎng)站信息內(nèi)容多樣繁雜則不適用于這種模式。如印象筆記網(wǎng)站首頁（見圖4）布局上就是Z模式，第一屏為注冊(cè)登錄框，將用戶的視線牢牢地鎖定在該領(lǐng)域；接下來對(duì)該產(chǎn)品的賣點(diǎn)展示，第一行左文字右圖、第二行右圖左文字、第三行左文字右圖如此重復(fù)，圖片與文字順序的更換一方面遵循了用戶的視覺流程，另一方面也有效引導(dǎo)用戶向下瀏覽，在頁面底部又為注冊(cè)登錄框，給用戶唯一的操作選擇，以達(dá)到該頁面的功能訴求。
圖3 視覺流程-Z模式
圖4 印象筆記網(wǎng)站
3.縱向模式
縱向模式（見圖5)是用戶習(xí)慣自上而下滾動(dòng)來瀏覽更多信息。當(dāng)用戶還未確定目標(biāo)信息時(shí)，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息。除了大圖，用戶會(huì)選擇數(shù)欄的其中一列縱向?yàn)g覽直到找到某一目標(biāo)信息后，橫向?yàn)g覽細(xì)節(jié)。
圖5 視覺流程-縱向模式
如36氟網(wǎng)（見圖6)是很經(jīng)典的兩欄布局，由于兩欄所占比例較大，用戶會(huì)不自覺地將視線停留在占有較大面積的左欄，自上而下的逐一瀏覽資訊。
圖6 36氟網(wǎng)
二、視覺層級(jí)關(guān)系
視覺表現(xiàn)手法主要有位置、大小、距離、內(nèi)容形式、色彩五種元素組成，實(shí)際設(shè)計(jì)中為了讓效果拉開主次，可能會(huì)同時(shí)使用多
種方法以達(dá)到更好的效果。
1.位置
位置是在設(shè)計(jì)開始就會(huì)考慮的元素。網(wǎng)頁界面設(shè)計(jì)若遵循人們“從左向右，從上向下”閱讀的視覺習(xí)慣，能幫助用戶更容易、更快捷地看到或理解眼前的事物。界面中優(yōu)先級(jí)依次為左上、左下、右下，因此很多網(wǎng)站都將自己的Logo、商品名、主題等重要信息放在頂部靠左或頂部中間最佳視線范圍內(nèi)。
2.大小
在確定了內(nèi)容板塊的位置后，設(shè)計(jì)師還需要考慮給這模塊多大的空間，大小會(huì)很直觀反映信息的重要等級(jí)。重要的元素相對(duì)于一般元素要大一些，甚至?xí)壤д{(diào)也不為過。
3.距離
距離可以分為二維的距離效果與三維的距離效果，二維的距離能夠保證信息可被理解的前提下，視覺元素尺寸不變，細(xì)節(jié)被放大，人眼會(huì)感受到元素更清晰，離眼睛更近而容易先去關(guān)注。如宜家網(wǎng)（見圖7.15)中的燈飾圖片，燈飾的全景不如近景吸引用戶的注意力。還可以通過視覺手段體現(xiàn)出三維距離的效果。具體方法有模糊元素、調(diào)整透明度、增添投影等。
4.內(nèi)容形式
確定了內(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)手法。
（1）方向性引導(dǎo)
圖片中的形象有些具有明顯的方向性，如人眼注視的方向、手勢所指的方向、物體運(yùn)動(dòng)方向、光照方向等，這些特征會(huì)引導(dǎo)人眼視線朝著設(shè)定的方向運(yùn)動(dòng)，從而達(dá)到視覺層級(jí)有主有次。
（2）符號(hào)引導(dǎo)
除了圖片，一些符號(hào)本身帶有順序和方向性，也能有效引導(dǎo)視線根據(jù)符號(hào)來瀏覽，包括阿拉伯?dāng)?shù)字、字母順序、時(shí)間順序（時(shí)間軸）、箭頭等。
5.色彩
色彩是影響用戶對(duì)界面第一印象的重要因素，色彩的應(yīng)用對(duì)視覺層級(jí)的影響也能起到立竿見影的效果，總結(jié)起來人眼對(duì)色彩的關(guān)注度差別主要是以下兩點(diǎn)，這種反差包括色彩色相、飽和度和明度反差。色相反差大容易引起用戶的重視。
今天的網(wǎng)頁設(shè)計(jì)分享就到這了，如果您喜歡這篇文章，您可以分享給你的朋友！深圳網(wǎng)站建設(shè)-博納網(wǎng)絡(luò)編輯整理。
