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

—— Chris Bank

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

在這篇文章中，將首先介紹什么是視覺層次和如何實現(xiàn)它，然后我們將會看到它是如何遵照人眼自然移動的規(guī)律來運作的。

視覺組織

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

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

事實上，UI設(shè)計的目標歸結(jié)起來就是為了解決以下這三個問題：

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

目光的移動是可預(yù)見的

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

F型布局（樹形模式）

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

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

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

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

這些要點如何幫助你完成界面設(shè)計？請看下圖：

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

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

Z型布局（對角模式）

Z型布局主要會用于非文本主導(dǎo)的頁面閱讀。瀏覽者首先瀏覽橫貫頁面頂部的水平標題欄目（不管是因為它是菜單欄，還是因為你從左到右的閱讀習(xí)慣）。當視線到達這一行的末尾的時候，它就會轉(zhuǎn)而向左下方（同樣是基于你的閱讀習(xí)慣），然后橫向地閱讀底部的部分。

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

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

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

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

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