為什么要打造視覺(jué)層次？
文字對(duì)于成年人來(lái)說(shuō)是日常的大部分活動(dòng)，對(duì)于受過(guò)教育的成年人來(lái)說(shuō)竖共，把文字轉(zhuǎn)換成有意義內(nèi)容的閱讀過(guò)程是自動(dòng)的，所以 很多讀者認(rèn)為閱讀與說(shuō)話一樣是“自然”的人類生活俺祠。
其實(shí)閱讀并不是自然的人類活動(dòng)公给。根據(jù)Sousa 2005年的實(shí)驗(yàn)結(jié)果，它是一種人造的蜘渣、通過(guò)系統(tǒng)的直到和訓(xùn)練獲得的能力淌铐，就像小提琴、玩雜四韪祝或者讀樂(lè)譜一樣腿准。而我們學(xué)習(xí)閱讀就是在訓(xùn)練我們的大腦（包括視覺(jué)系統(tǒng)）去識(shí)別模式。但是拾碌，在我們的視覺(jué)系統(tǒng)中只有一部分被訓(xùn)練出了識(shí)別閱讀過(guò)程中文字模式的能力：中央凹和一個(gè)非常小的區(qū)域（近中央凹）能迅速地聚焦于文字吐葱，下游的神經(jīng)網(wǎng)絡(luò)會(huì)經(jīng)過(guò)視覺(jué)神經(jīng)，到視覺(jué)皮層校翔，再進(jìn)入我們的大腦中的某一部分弟跑。這就意味著，閱讀需要大量的眼球移動(dòng)防症。人類的眼球是來(lái)回跳動(dòng)的孟辑，這種跳動(dòng)大約持續(xù)0.1秒。這些原因?qū)е麻喿x過(guò)程中視線會(huì)在重要的詞匯間跳動(dòng)蔫敲，如下圖所示饲嗽。
基于人類閱讀能力是有限的以及人類生理因素，我們?cè)谠O(shè)計(jì)中要盡可能的支持閱讀燕偶，而不是干擾閱讀喝噪。注重在設(shè)計(jì)中打造視覺(jué)層次，幫助用戶快速瀏覽和閱讀指么。
什么是視覺(jué)層次酝惧？
評(píng)價(jià)一個(gè)可視化信息顯示的重要指標(biāo)就是視覺(jué)層次。
視覺(jué)層次伯诬，即視覺(jué)的布置安排能夠：
a.將信息分段晚唇，把大塊爭(zhēng)端的信息分割為小段
b.顯著標(biāo)注每一個(gè)信息段和字段，以便清晰地確認(rèn)各自的內(nèi)容
c.以一個(gè)層級(jí)結(jié)構(gòu)來(lái)展示各地段及其子段盗似，使得上層的段能夠比下層得到更重點(diǎn)的展示
在UI設(shè)計(jì)中的重要性哩陕？
Luke Wroblewski，專欄作家兼雅虎產(chǎn)品設(shè)計(jì)高級(jí)主管赫舒，在他的的文章通過(guò)視覺(jué)層次溝通中闡釋了網(wǎng)站界面的視覺(jué)表現(xiàn)在以下方面的重要性：
通知用戶——像一只無(wú)形的手悍及，界面應(yīng)該引導(dǎo)用戶一步步采取行動(dòng)，卻不會(huì)讓用戶感到壓迫接癌。比如當(dāng)你向下滾動(dòng)心赶，支付服務(wù)商Square引導(dǎo)你了解它的價(jià)值所在，每一步都有相關(guān)的引導(dǎo)號(hào)召你采取行動(dòng)缺猛。
傳達(dá)內(nèi)容之間的關(guān)聯(lián)——界面展現(xiàn)內(nèi)容的方式缨叫，應(yīng)該符合用戶對(duì)信息的優(yōu)先級(jí)理解。例如荔燎，人氣設(shè)計(jì)網(wǎng)站Abduzeedo在頂部包含了清晰的分類耻姥，推薦內(nèi)容在中間，底部則是詳細(xì)的分類有咨。
影響情緒——人們?nèi)ゲ宛^可不只是為了食物果腹琐簇。他們要的是口味、質(zhì)感座享、外觀婉商，還有令人難忘的環(huán)境。界面設(shè)計(jì)也一樣征讲，而且假如你建立了積極的情緒響應(yīng)据某，人們可能更容易諒解網(wǎng)站的缺點(diǎn)。比如Wufoo就是個(gè)完美案例诗箍，界面非常實(shí)用且令人愉悅癣籽。
如何組織視覺(jué)層次？
你的UI設(shè)計(jì)滤祖，最終目標(biāo)是要解答以下三個(gè)問(wèn)題：
這是什么筷狼？（有用）
如何使用？（易用）
關(guān)我什么事匠童？（渴望）
選擇正確閱讀模式
之前的兩篇文章給大家介紹了F型和Z型兩種模式埂材。再次總結(jié)下：
01. F模式
通常體現(xiàn)在文字密集的網(wǎng)站中，比如博客汤求，讀者首先沿著左側(cè)的文字垂直向下瀏覽俏险，從每段的前幾句尋找他感興趣的關(guān)鍵詞或要點(diǎn)严拒，F(xiàn)模式由此得來(lái)。
當(dāng)讀者找到了喜歡的東西竖独，他們就開(kāi)始正常閱讀裤唠，構(gòu)成了水平線。結(jié)果就導(dǎo)致了看似字母F或E的路徑莹痢。CNN和NYTtimes兩者都使用了F模式种蘸。
Nielson Norman Group的Jakob Nielson進(jìn)行了一次易讀性研究，基于232名用戶瀏覽上千個(gè)網(wǎng)站竞膳，還有F模式涉及實(shí)踐的詳盡說(shuō)明
a.用戶很少逐字逐句閱讀航瞭。
b.前兩段最重要，應(yīng)該包含你的營(yíng)銷妙語(yǔ)坦辟。
c.起始段刊侯、副標(biāo)題、重點(diǎn)列表中要帶有誘人的關(guān)鍵詞长窄。
它會(huì)如何影響網(wǎng)站的界面設(shè)計(jì)滔吠？請(qǐng)看下圖。
來(lái)源：理解F型布局挠日；www.webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-de…
圖中可以看到疮绷，數(shù)秒鐘內(nèi)就能看到最重要的內(nèi)容，下方立馬接上更詳細(xì)的內(nèi)容（還有行動(dòng)號(hào)召）嚣潜，方便快速瀏覽冬骚。
對(duì)于想要嵌入廣告和行動(dòng)號(hào)召，又不希望內(nèi)容被淹沒(méi)的網(wǎng)站懂算，F(xiàn)模式非常有幫助只冻。切記，永遠(yuǎn)是內(nèi)容為王计技，側(cè)邊欄的存在是加深用戶的參與喜德。和其他所有模式一樣，F(xiàn)模式是一套指導(dǎo)方針——而非模版——因?yàn)樽x過(guò)F中的頭幾行之后垮媒，F(xiàn)模式可能會(huì)讓人感覺(jué)枯燥舍悯。
02. Z模式
Z模式瀏覽發(fā)生在不以文字為核心的網(wǎng)站中。讀者首先瀏覽頁(yè)面頂部的一條橫線睡雇，不論是因?yàn)椴藛螜诿瘸模€是出于在頂部從左至右瀏覽一遍的習(xí)慣。當(dāng)視線到達(dá)盡頭它抱，它會(huì)飛速向左下移動(dòng)（這也是出于閱讀習(xí)慣）秕豫，在頁(yè)面下方部分重復(fù)水平方向上的搜尋。
來(lái)源：理解Z型布局观蓄；http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web…
Z模式幾乎可以運(yùn)用于任何網(wǎng)站界面混移，因?yàn)樗鼭M足了網(wǎng)站的核心需要祠墅，比如層級(jí)、品牌沫屡、行動(dòng)號(hào)召饵隙。Z模式對(duì)于簡(jiǎn)潔至上撮珠、核心是行動(dòng)號(hào)召的界面效果最佳沮脖。
在一個(gè)內(nèi)容復(fù)雜的網(wǎng)站中強(qiáng)行使用Z模式，或許不如F模式來(lái)得奏效芯急，但Z模式有助于帶來(lái)一些秩序勺届，導(dǎo)致布局的簡(jiǎn)化（還有轉(zhuǎn)化率的上升）。牢記以下幾則要點(diǎn)：
背景——分離背景娶耍，讓用戶的視線停留在網(wǎng)站結(jié)構(gòu)內(nèi)免姿。
1號(hào)點(diǎn)——這是你logo的最佳位置。
2號(hào)點(diǎn)——增加一個(gè)彩色的次要行動(dòng)號(hào)召榕酒，有助于順著Z模式引導(dǎo)用戶胚膊。
頁(yè)面中央——頁(yè)面中央的焦點(diǎn)輪播圖能把頂部與底部區(qū)域分離開(kāi)，引導(dǎo)視線順著Z模式流動(dòng)想鹰。
3號(hào)點(diǎn)——增加圖標(biāo)紊婉，從此處開(kāi)始，順著橫軸移動(dòng)辑舷，能將用戶引導(dǎo)至4號(hào)點(diǎn)的最終行動(dòng)號(hào)召喻犁。
4號(hào)點(diǎn)——這里就是終點(diǎn)了，是你主要行動(dòng)號(hào)召的最理想位置何缓。
預(yù)測(cè)用戶的視線如何移動(dòng)能帶來(lái)巨大的優(yōu)勢(shì)肢础。在頁(yè)面上排布元素之前，通過(guò)優(yōu)先級(jí)找出最重要和最無(wú)關(guān)緊要的元素碌廓。一旦你知道要給用戶看什么传轰，將它們置于各種模式的“熱點(diǎn)區(qū)”，創(chuàng)造正確的交互谷婆，簡(jiǎn)直易如反掌慨蛙。
你甚至還能在整個(gè)頁(yè)面中貫穿和延伸Z模式，如果你覺(jué)得在行動(dòng)號(hào)召之前還有更多有價(jià)值的主張波材，可以重復(fù)運(yùn)用1-4號(hào)點(diǎn)股淡。
需要注意避免的幾件事：
a.避免難以辨認(rèn)的字型和字號(hào)
b.不要添加嘈雜的背景
c.盡量少使用居中對(duì)齊的文字
d.盡量減少閱讀需要
本文部分內(nèi)容來(lái)源于《認(rèn)知與設(shè)計(jì)》感悟，Jeff Johnson 將設(shè)計(jì)決策與理論已非常實(shí)用的方式結(jié)合廷区，是一本值得反復(fù)閱讀的書(shū)籍唯灵，強(qiáng)烈建議UI/UE設(shè)計(jì)師精讀。
