眼圖掃描如何影響網(wǎng)站設(shè)計(jì)中的視覺(jué)層次結(jié)構(gòu)

從希臘花瓶到意大利教堂的幾千年藝術(shù)已經(jīng)塑造了我們對(duì)美的含義的理解，但眼動(dòng)追蹤技術(shù)的最新技術(shù)為我們的視覺(jué)感知世界增添了新的活力。更重要的是，這項(xiàng)令人興奮的新科學(xué)正在幫助我們更好地理解（并更好地設(shè)計(jì)）既有效又美觀的網(wǎng)站。

網(wǎng)頁(yè)設(shè)計(jì)（作為視覺(jué)藝術(shù)）遵循許多與更傳統(tǒng)的藝術(shù)形式相同的規(guī)則。在本文中，我們將簡(jiǎn)要概述視覺(jué)組織的重要性，然后解釋眼睛跟蹤的發(fā)現(xiàn)如何改善Web界面的布局。

?

建立視覺(jué)組織

網(wǎng)站的外觀會(huì)影響其成功也就不足為奇了，但指出其原因很重要。Yahoo!的作者兼產(chǎn)品設(shè)計(jì)高級(jí)負(fù)責(zé)人Luke Wroblewski?在他的論文《??與可視層次結(jié)構(gòu)通信》中解釋說(shuō)，Web界面的可視化表現(xiàn)對(duì)于以下方面至關(guān)重要：

指導(dǎo)

制作精良的界面可以指導(dǎo)用戶從一個(gè)操作轉(zhuǎn)到下一個(gè)操作，而不會(huì)感到負(fù)擔(dān)太大。無(wú)論您如何看待他們的商業(yè)行為，毫無(wú)疑問(wèn)，Uber都是一個(gè)非常平穩(wěn)但結(jié)構(gòu)化的網(wǎng)站的例子。價(jià)值主張位于滾動(dòng)條的頂部，其后是一個(gè)有趣的滑塊，用于了解不同的汽車選擇，并從邏輯上下一步在城市中尋找乘車路線。

通訊

通過(guò)匹配其他方面不同的信息，UI可以在用戶的腦海中形成鏈接，傳達(dá)消息而無(wú)需說(shuō)任何東西。看一下流行的設(shè)計(jì)網(wǎng)站??Abduzeedo：頂部是大類，中間是特色內(nèi)容，頁(yè)腳是詳細(xì)類別。

創(chuàng)造情感影響

不要誤以為您的網(wǎng)站只是一個(gè)機(jī)械化工具。網(wǎng)站具有建立情感聯(lián)系的潛力，如果您不這樣做，那么競(jìng)爭(zhēng)對(duì)手的意愿。實(shí)際上，如果您產(chǎn)生積極的情感反應(yīng)，人們實(shí)際上可能更容易原諒您界面的缺點(diǎn)。MailChimp是一個(gè)網(wǎng)站的完美示例，該網(wǎng)站的界面實(shí)用，輕松，而且使用起來(lái)非常有趣。

?

可預(yù)測(cè)的人眼

有時(shí)，您的眼睛似乎有自己的想法。多年的發(fā)展使我們有本能來(lái)發(fā)現(xiàn)我們認(rèn)為重要的物體和動(dòng)作，無(wú)論有人在街對(duì)面性感走動(dòng)，還是可愛(ài)的卡通熊廣告蜂蜜。雖然我們對(duì)重要內(nèi)容的相對(duì)權(quán)重可能因人而異，但一個(gè)常數(shù)是其行為的機(jī)制。大規(guī)模地，大多數(shù)人在瀏覽網(wǎng)頁(yè)時(shí)遵循相同的趨勢(shì)。

在這些趨勢(shì)中，我們將詳細(xì)討論兩個(gè)。在有關(guān)視覺(jué)原理的文章中，99Designs的設(shè)計(jì)作家Alex Bigman展示了對(duì)于從左至右閱讀的文化，這兩種模式在設(shè)計(jì)網(wǎng)站布局時(shí)是最常見(jiàn)且最有用的。

第一個(gè)是F模式，主要用于文本（但也可以用于其他目的）。第二個(gè)是Z型，可用于任何視覺(jué)布局。我們將在下面說(shuō)明每種方法的優(yōu)缺點(diǎn)。

F模式

F模式是出現(xiàn)在文字很多的頁(yè)面上的視覺(jué)趨勢(shì)，通常是博客，新聞來(lái)源，文章等。

當(dāng)遇到單詞障礙時(shí)，大多數(shù)讀者會(huì)首先在文本左側(cè)向下掃描一條垂直線，通常會(huì)在段落的初始句子中查找關(guān)鍵字或興趣點(diǎn)。最終，讀者找到了自己喜歡的東西，并開(kāi)始正常閱讀，形成了水平線。最終結(jié)果是看起來(lái)像字母F或E的東西。

尼爾森·諾曼集團(tuán)（Nielson Norman Group）的Jakob Nielson進(jìn)行了一項(xiàng)可讀性研究，該研究基于232位用戶掃描了數(shù)千個(gè)網(wǎng)站。通過(guò)研究，他記錄了他認(rèn)為F模式的實(shí)際含義：

• 用戶很少會(huì)閱讀您的文本的每個(gè)單詞。
• 前兩段是最重要的，應(yīng)該包含您的內(nèi)容。
• 以誘人的關(guān)鍵字開(kāi)頭段落，小標(biāo)題和項(xiàng)目符號(hào)。

與往常一樣，左上角是最重要的，因?yàn)樗撬袕淖蟮接议喿x文化的起點(diǎn)。用戶通常會(huì)在標(biāo)題上水平閱讀，因此這里是導(dǎo)航欄和/或號(hào)召性用語(yǔ)的好地方。然后，用戶垂直向下掃描左側(cè)，直到遇到感興趣的內(nèi)容。最后，用戶在頁(yè)面的右側(cè)結(jié)束，那里是號(hào)召性用語(yǔ)或廣告的好地方。只是不要讓側(cè)邊欄淹沒(méi)內(nèi)容。

但是F-Pattern并不是一個(gè)模板-實(shí)際上，這不是一個(gè)精確的實(shí)踐，而是更多根據(jù)大多數(shù)用戶的趨勢(shì)編寫的寬松指南。請(qǐng)記住這一點(diǎn)，因?yàn)镕-模式失去其有效性的頂部行后?F。

Kickstarter使用卡片布局來(lái)顯示要素項(xiàng)目，并且在開(kāi)始的500個(gè)像素之后不會(huì)顯得無(wú)聊。

另一方面，iZettle??在其主頁(yè)上對(duì)F-Pattern采用了更常規(guī)的方法。但是，他們?cè)O(shè)法通過(guò)將主要副本（“使用iZettle來(lái)發(fā)展您的業(yè)務(wù)”）和號(hào)召性用語(yǔ)疊加在較大的背景圖像上來(lái)避免模板化外觀。我們認(rèn)為這是使這種閱讀模式適應(yīng)您的界面布局的最低要求。

?

Z型

此外，Z模式是最簡(jiǎn)單，最通用的模式，廣泛用于基于文本的任何網(wǎng)頁(yè)。閱讀器首先在頂部水平掃描，向下飛鏢并返回左側(cè)，然后再次在底部水平掃描。

了解通用的Z模式非常重要，因?yàn)樗鼭M足了網(wǎng)站的核心要求，例如層次結(jié)構(gòu)，品牌和號(hào)召性用語(yǔ)。它的優(yōu)點(diǎn)在于其簡(jiǎn)單性，是針對(duì)號(hào)召性用語(yǔ)的網(wǎng)站的理想布局。但是，對(duì)于更復(fù)雜或過(guò)多的內(nèi)容，Z模式可能太簡(jiǎn)單了。 ?

認(rèn)為Z模式適合您的頁(yè)面嗎？以下是一些優(yōu)化收益的最佳做法：

• 背景?—保留背景所屬的位置：在背景中。您不想分散讀者的注意力。
• 第一點(diǎn)?-作為起點(diǎn)，通常是您要放置徽標(biāo)的位置。
• 第2點(diǎn)?-雖然主要的號(hào)召性文字應(yīng)在稍后發(fā)布，但此處是次要號(hào)召性文字的好地方，其中標(biāo)出了水平導(dǎo)航欄。（一個(gè)不錯(cuò)的圖形或圖像滑塊將有助于分隔頁(yè)面的頂部和底部，鼓勵(lì)讀者留在Z型的可預(yù)測(cè)路徑上。）
• 第3點(diǎn)?-這是吸引其他鏈接關(guān)注的好地方，或者引導(dǎo)用戶將目光投向最終目標(biāo)：第4點(diǎn)。
• 第4點(diǎn)?-作為“終點(diǎn)線”，這是主要號(hào)召性用語(yǔ)的理想之地。

杭州網(wǎng)站建設(shè)做的第一件事是為自己確定頁(yè)面上的元素優(yōu)先級(jí)，以便您了解最重要和最不重要的元素。從那里開(kāi)始，將它們分配到適當(dāng)?shù)摹盁狳c(diǎn)”很簡(jiǎn)單。

此外，Z模式可以重復(fù)并擴(kuò)展到整個(gè)頁(yè)面。您只需看一下印象筆記如何?通過(guò)號(hào)召性用語(yǔ)和賣點(diǎn)向下彎曲。