人們?yōu)g覽網(wǎng)站的視覺習(xí)慣
要?jiǎng)?chuàng)造正確的視覺層次，你就要理解我們的眼睛如何處理信息。
網(wǎng)頁(yè)UI設(shè)計(jì)中創(chuàng)造視覺層次的原理和慣例。一個(gè)藝術(shù)大師除了要具備創(chuàng)造力，還要考慮一些細(xì)節(jié)問(wèn)題，比如寫作、用色、尺寸、包含哪些內(nèi)容，可能更重要的是舍棄哪些。這可不是容易的事，所以我們才會(huì)對(duì)達(dá)芬奇和梵高這樣的大師推崇備至。網(wǎng)頁(yè)UI設(shè)計(jì)師也應(yīng)該如此。網(wǎng)站也是視覺藝術(shù)的一種形式，以它獨(dú)有的方式，它要遵循很多傳統(tǒng)藝術(shù)形式的規(guī)則。這是審美的科學(xué)，摻雜了一些商業(yè)準(zhǔn)則，非比尋常的網(wǎng)站界面，必須讓人感覺毫無(wú)壓力、引人入勝。
我們首先看看視覺層次是什么，如何創(chuàng)造，然后我們?cè)倭私馑绾卧谝暰�的自然運(yùn)動(dòng)中發(fā)揮作用。
組織視覺
通知用戶——像一只無(wú)形的手，界面應(yīng)該引導(dǎo)用戶一步步采取行動(dòng)，卻不會(huì)讓用戶感到壓迫。比如當(dāng)你向下滾動(dòng)，搜索引擎引導(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)境。張家港網(wǎng)站設(shè)計(jì)也一樣，而且假如你建立了積極的情緒響應(yīng)，人們可能更容易諒解網(wǎng)站的缺點(diǎn)。比如Wufoo就是個(gè)完美案例，界面非常實(shí)用且令人愉悅。
你的UI設(shè)計(jì)，最終目標(biāo)是要解答以下三個(gè)問(wèn)題：
這是什么？（有用）
如何使用？（易用）
關(guān)我什么事？（渴望）
人眼的可預(yù)見性
不論是角落的匆匆一瞥，還是對(duì)某個(gè)路人的仔細(xì)打量，人的視線總是自動(dòng)聚集在某些特定的興趣點(diǎn)上。雖然這點(diǎn)因人而異，多數(shù)人還是容易遵循某種明確的走向——也包括如何瀏覽網(wǎng)站。
01. F模式
通常體現(xiàn)在文字密集的網(wǎng)站中，比如博客，讀者首先沿著左側(cè)的文字垂直向下瀏覽，從每段的前幾句尋找他感興趣的關(guān)鍵詞或要點(diǎn)，F(xiàn)模式由此得來(lái)。
當(dāng)讀者找到了喜歡的東西，他們就開始正常閱讀，構(gòu)成了水平線。結(jié)果就導(dǎo)致了看似字母F或E的路徑。CNN和NYTtimes兩者都使用了F模式。
Nielson Norman Group的Jakob Nielson進(jìn)行了一次易讀性研究，基于232名用戶瀏覽上千個(gè)網(wǎng)站，還有F模式涉及實(shí)踐的詳盡說(shuō)明
用戶很少逐字逐句閱讀。
前兩段最重要，應(yīng)該包含你的營(yíng)銷妙語(yǔ)。
起始段、副標(biāo)題、重點(diǎn)列表中要帶有誘人的關(guān)鍵詞。
它會(huì)如何影響網(wǎng)站設(shè)計(jì)？請(qǐng)看下圖。
圖中可以看到，數(shù)秒鐘內(nèi)就能看到最重要的內(nèi)容，下方立馬接上更詳細(xì)的內(nèi)容（還有行動(dòng)號(hào)召），方便快速瀏覽。
對(duì)于想要嵌入廣告和行動(dòng)號(hào)召，又不希望內(nè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ì)讓人感覺枯燥。
02. Z模式
Z模式瀏覽發(fā)生在不以文字為核心的網(wǎng)站中。讀者首先瀏覽頁(yè)面頂部的一條橫線，不論是因?yàn)椴藛螜冢�是出于在頂部從左至右瀏覽一遍的習(xí)慣。當(dāng)視線到達(dá)盡頭，它會(huì)飛速向左下移動(dòng)（這也是出于閱讀習(xí)慣），在頁(yè)面下方部分重復(fù)水平方向上的搜尋。
Z模式幾乎可以運(yùn)用于任何網(wǎng)站設(shè)計(jì)的界面，因?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ū)域分離開，引導(dǎo)視線順著Z模式流動(dòng)。
3號(hào)點(diǎn)——增加圖標(biāo)，從此處開始，順著橫軸移動(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模式，如果你覺得在行動(dòng)號(hào)召之前還有更多有價(jià)值的主張，可以重復(fù)運(yùn)用1-4號(hào)點(diǎn)。
