“為了創(chuàng)建合適的視覺(jué)層次，你需要了解我們的眼睛是如何搜集信息的?！?/p>

—— Chris Bank

在數(shù)字化時(shí)代，一個(gè)網(wǎng)站的設(shè)計(jì)不僅僅是美學(xué)的展現(xiàn)，更是用戶體驗(yàn)和商業(yè)成功的基石。易賽諾網(wǎng)站建設(shè)團(tuán)隊(duì)深入研究用戶的視覺(jué)瀏覽習(xí)慣，提出了一系列創(chuàng)新的網(wǎng)站布局策略，旨在打造既符合用戶直覺(jué)又極具吸引力的在線環(huán)境。

在這篇文章中，將首先介紹什么是視覺(jué)層次和如何實(shí)現(xiàn)它，然后我們將會(huì)看到它是如何遵照人眼自然移動(dòng)的規(guī)律來(lái)運(yùn)作的。

視覺(jué)組織

在這篇論文 Communicating with Visual Hierarchy （與視覺(jué)層次的對(duì)話）中，Luke Wroblewshi，本書(shū)的作者同時(shí)也是雅虎的產(chǎn)品設(shè)計(jì)總監(jiān)，解釋了對(duì)于網(wǎng)頁(yè)的視覺(jué)呈現(xiàn)，有哪些元素是必要的：

• 提醒用戶: 做一只看不見(jiàn)的手 ，網(wǎng)頁(yè)的布局應(yīng)當(dāng)能指導(dǎo)瀏覽者進(jìn)行瀏覽同時(shí)，避免讓讀者感覺(jué)難以忍受。比如，在線支付網(wǎng)站 Square 通過(guò)引導(dǎo)你滾動(dòng)鼠標(biāo)來(lái)完成支付過(guò)程，同時(shí)使用恰當(dāng)?shù)脑嵝涯惝?dāng)前所處的步驟。
• 交互性的內(nèi)容聯(lián)系: 網(wǎng)頁(yè)的內(nèi)容應(yīng)當(dāng)依據(jù)瀏覽者的信息優(yōu)先順序進(jìn)行呈現(xiàn)。比如，在人氣火爆的設(shè)計(jì)網(wǎng)站 Abduzeedo 中，頂部是大致的分類(lèi)，中間是詳細(xì)的個(gè)案展示，最底部則是詳細(xì)的分類(lèi)目錄。
• 創(chuàng)造情緒化的印象: 人們到餐廳里吃飯不僅僅是為了填飽自己的肚子而已，他們同樣對(duì)食物的味道，口感，賣(mài)相都有要求，甚至還包括良好的用餐氛圍。網(wǎng)站設(shè)計(jì)也是如此，特別是人們很可能會(huì)原諒你網(wǎng)頁(yè)上的一些缺點(diǎn)——如果你能夠傳達(dá)一種積極的情緒。來(lái)看看 Wufoo 的界面。

事實(shí)上，UI設(shè)計(jì)的目標(biāo)歸結(jié)起來(lái)就是為了解決以下這三個(gè)問(wèn)題：

• 這是什么（有用性）
• 我應(yīng)該如何使用（可用性）
• 我為什么要關(guān)心這個(gè)（使用愿望）

目光的移動(dòng)是可預(yù)見(jiàn)的

Alex Bigman強(qiáng)調(diào)，目光的移動(dòng)是可預(yù)見(jiàn)的。在瀏覽網(wǎng)頁(yè)時(shí)，用戶的注意力轉(zhuǎn)移遵循一定趨勢(shì)。通過(guò)視覺(jué)熱點(diǎn)圖，我們可以明顯看出用戶注意力的轉(zhuǎn)移路徑

F型布局（樹(shù)形模式）

對(duì)于典型的文字占主體地位的網(wǎng)頁(yè)（比如博客），設(shè)計(jì)的時(shí)候都會(huì)采用F型的布局模式。瀏覽者們首先會(huì)掃描一下頁(yè)面左邊，豎直方向上的文字信息，來(lái)尋找令他們感興趣的話題或者段落的起始句子。

當(dāng)瀏覽者找到了他喜歡的東西的時(shí)候，他們就開(kāi)始閱讀了，他們的視線向水平方向上轉(zhuǎn)移。最終的結(jié)果就是他們的視線熱點(diǎn)圖會(huì)呈現(xiàn)字母F或E的形狀。CNN和NYTimes兩個(gè)新聞網(wǎng)站用的就是F型布局。

Nielson Norman集團(tuán)的Jakob Nielson完成了一項(xiàng)基于232名瀏覽者者和數(shù)千個(gè)頁(yè)面訪問(wèn)的檢驗(yàn)試驗(yàn)，并且列出了以下幾條關(guān)于F型布局的實(shí)踐要點(diǎn)：

• 瀏覽者很少會(huì)逐字逐句地閱讀。
• 頭兩段是最重要的，應(yīng)該足夠博人眼球。
• 起始段落，小標(biāo)題得足夠有噱頭。

這些要點(diǎn)如何幫助你完成界面設(shè)計(jì)？請(qǐng)看下圖：

你可以在這幅圖中看到，最主要的信息都能一眼看見(jiàn)，而更加細(xì)節(jié)的東西通過(guò)引導(dǎo)都能馬上定位。

F型布局結(jié)構(gòu)對(duì)于那些包含廣告，或者呼告和內(nèi)容沒(méi)太大關(guān)系的頁(yè)面很適用。記住，內(nèi)容為王。F型布局是一種引導(dǎo)方式，而不是一種萬(wàn)用藥——瀏覽者很快就會(huì)在看過(guò)幾個(gè)這樣的F型頁(yè)面布局之后開(kāi)始感到無(wú)趣，用內(nèi)容——而不是布局方式——抓住他們。

Z型布局（對(duì)角模式）

Z型布局主要會(huì)用于非文本主導(dǎo)的頁(yè)面閱讀。瀏覽者首先瀏覽橫貫頁(yè)面頂部的水平標(biāo)題欄目（不管是因?yàn)樗遣藛螜?，還是因?yàn)槟銖淖蟮接业拈喿x習(xí)慣）。當(dāng)視線到達(dá)這一行的末尾的時(shí)候，它就會(huì)轉(zhuǎn)而向左下方（同樣是基于你的閱讀習(xí)慣），然后橫向地閱讀底部的部分。

這種Z型布局格式可以應(yīng)用于幾乎所有的網(wǎng)頁(yè)界面，因?yàn)樗鼜?qiáng)調(diào)了現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)的核心需求，如：層次感，品牌感和交互。Z型布局對(duì)于那些要求界面簡(jiǎn)潔明快，網(wǎng)頁(yè)間跳轉(zhuǎn)由交互性設(shè)計(jì)負(fù)責(zé)實(shí)現(xiàn)的網(wǎng)頁(yè)，是非常適合的。

想要在Z型布局界面中塞入復(fù)雜的信息，就不如改用F型布局來(lái)得好一些。但是Z型布局帶來(lái)的好處就是結(jié)構(gòu)的簡(jiǎn)潔和有秩序。這里有幾條實(shí)操經(jīng)驗(yàn)，你最好牢牢記住它們：

背景：將背景和要呈現(xiàn)的內(nèi)容作對(duì)比，以便于瀏覽者能夠關(guān)注你的內(nèi)容框架。

• 點(diǎn)1：為你的Logo找到一個(gè)顯眼的位置，比如說(shuō)這里。
• 點(diǎn)2：在這些位置添加一些鏈接或交互性元件來(lái)幫助瀏覽者更好的瀏覽網(wǎng)頁(yè)。
• 網(wǎng)頁(yè)的正中間：一個(gè)帶著幾行文字的精美圖片可以將網(wǎng)頁(yè)的上部和下部區(qū)分開(kāi)來(lái)，并且確保瀏覽者的注意力能按照我們?cè)O(shè)想的Z字線路轉(zhuǎn)移。
• 點(diǎn)3：增加要點(diǎn)（內(nèi)容），并沿著水平軸向擴(kuò)展，將瀏覽者的目光引導(dǎo)到你在點(diǎn)4放置的的主要呼告上。
• 點(diǎn)4：這里是重點(diǎn)，一個(gè)為你的主要呼告（捐款，加盟，注冊(cè)等）預(yù)留的理想的位置。

通過(guò)精心設(shè)計(jì)的視覺(jué)層次和布局，網(wǎng)站可以更好地引導(dǎo)用戶，提升用戶體驗(yàn)，增強(qiáng)吸引力。易賽諾網(wǎng)站建設(shè)團(tuán)隊(duì)致力于幫助企業(yè)實(shí)現(xiàn)這一目標(biāo)，通過(guò)專(zhuān)業(yè)的設(shè)計(jì)和策略，讓每個(gè)網(wǎng)站都能成為用戶友好、商業(yè)成功的典范