你的眼睛到底在網頁上看到了什么

轉載贊5 收藏12 評論

舉報 2015-04-06

掃描,分享朋友圈

來源: 特贊Tezign

人類的藝術經歷了上千年的歷史，從希臘花瓶意大利教堂，塑造了我們對美的理解。如今較為前沿的眼球跟蹤技術為我們如何在視覺上感知世界增加了一個新的維度。更重要的是，這個令人興奮的新的科學正在幫助我們更好地理解，和更好的設計網站，讓網站既美觀又高效。

網頁設計（作為一種視覺藝術）其實與更為傳統的藝術形式一樣，遵循許多相同的設計原則。在這篇文章中，我們將簡單介紹一下視覺組織的重要性，然后解釋眼動追蹤的結果如何能提高網頁交互的布局設計。

創建視覺組織

毫無疑問的是一個網站的外觀會影響它是否成功，但更重要的是要找準原因，知道為什么。盧克萊夫斯基（Luke Wroblewski），雅虎的高級首席產品設計師，在他的文章《用視覺層次來溝通》中提出，視覺表現對于網頁界面來說在提高以下幾個方面都是不可或缺的：

指引性

一個制作精良的界面可以引導使用者從一個動作到下一個動作，但不會使使用者感到強制性。不管你認為Uber的商業模式如何，但毫無疑問，Uber的網站使用起來極為流暢且結構完整，是一個非常好的例子。網站上，Uber的價值主張放在頂部，接下來是一個有趣的能看到不同的汽車選擇的滑塊設計，最后一步是能讓你找到附近的車，整個步驟安排都很合乎邏輯。

有效溝通

通過把看起來屬于不同類別的信息片段結合起來，一個UI可以在用戶的腦海中形成聯系網，并不需要直接的表述便可溝通信息。我們看下非常受歡迎的設計網站Abduzeedo的布局：總體的分類放在網頁頂部，特色內容放在在中間，詳細的分類放在了頁腳。

創建情緒的影響

不要以為你的網站只是一個簡單的機械化工具。網站是有可能建立情緒上的聯系的；如果你的網站做不到這一點，而你的競爭對手很可能會做到。事實上，如果你的網站能讓人產生一種積極的情緒反應，人們實際上會更容易原諒你的網站界面的一些不足。 MailChimp是一個讓網站界面既實用，又輕便，且具有使用樂趣的完美典范。

可預測的人眼活動

有時候，似乎你的眼睛也有他們自己的想法。多年的進化使我們具有視覺直覺，我們會直覺性地注意我們認為重要的東西，比如是否有人是在街對面性感地行走，或者蜂蜜廣告里可愛的卡通熊。雖然不同的人對什么是重要的有不同的定義，但是他們的行為機制是一致的。從大的層面上來說，我們可以認為人們在瀏覽網頁時的所呈現的行為是有相同的趨勢的。

這些趨勢中，我們將對其中的兩種進行詳細討論。在一篇介紹視覺原理的文章中，99Designs的設計作家，AlexBigman提出，在人們從左到右閱讀的文化中，有這兩種模式是最常見的，也是對設計網站的布局最有用的：第一種，F模式，大多用于文本（但可適用于其他情況）。第二種，Z模式，可用于任何可視布局。我們將在下文分別介紹兩種模式的優缺點。

F-模式

F-模式是瀏覽以文本為主的網頁時，比如博客，新聞、文章等等，人們呈現的視線瀏覽模式。

當面對文字塊時，大多數讀者會先沿直線掃描到文章底部的左側，這個過程中通常會通過閱讀每段的起始句來尋找關鍵字或興趣點。當讀者找到他們有興趣的部分，他們會開始正常閱讀，視線成水平線。最終的結果就是，他們的視線的趨勢看起來會像字母F或E. 尼爾森的諾曼集團的，雅各布·尼爾森（Jakob Nielson）進行了一項基于232名用戶，瀏覽數千個網站的可讀性的研究。在研究中，他記錄了他認為的F-模式的實際意義：

用戶很少會讀你的內容中的每一個字。
前兩段是最重要的，應該包含你的賣點。
開始的段落，副標題以及羅列的要點，要出現關鍵詞。

在所有從左向右讀文化中，左上角永遠是最重要的。用戶通常會水平閱讀整個題目，所以這里是放導航欄，及吸引讀者點擊的好地方。然后，用戶將垂直掃描到左下側，直到它們遇到他們感興趣的內容。最后，用戶視線會停在頁面的右側，這里是吸引讀者點擊或放置廣告的絕佳位置。只是不要讓側邊欄覆蓋到內容。

但F-模式并不能提供一個固定的模板，它不是一個所有人瀏覽都會遵循的確切的步驟，而是對于廣大用戶瀏覽趨勢的一個大體的指導。請記住這一點，F-模式在頂部內容之后就失去了它的效力。網站Kickstarter就使用頂部卡片布局來顯示主題項目，這樣也保證第一個500像素后的內容不會視覺乏味。網站iZettle的界面則采用更傳統的更符合F瀏覽模式的方式。然而，他們設法避免模板化的外觀，把重要標題（“用iZettle來拓展您的業務”），及吸引讀者點擊的地方放在大背景圖像上。我們認為這個是最低限度地利用這種瀏覽模式來調整界面布局。

Z-模式

除F-模式外，Z-模式是最簡單，最普遍的模式，凡是基于文本的網頁都可以使用。讀者首先水平掃描文章的頂部，飛速向下瀏覽并返回到左側，然后再次水平在文章底部掃描。我們需要了解Z-模式的通用性，因為它能解決網戰的核心需求，如等級，品牌推廣，及吸引讀者行動等等。它的美在于它的簡單，并且對于網站來說，理想的布局是重在能吸引讀者行動的。然而，對于更復雜的內容時，Z- 模式可能顯得過于簡單。

在考慮Z-模式是否適合你的網頁？這里有一些最佳的實踐方法能最大體現Z-模式的優勢：

背景：保證背景僅僅就是背景，你不想它分散讀者的注意力。
點#1 – 在網頁的一開始就放上你的Logo。
點#2 – 接下來，雖然吸引讀者行動的部分應該晚一點，但這里是放次一級吸引讀者行動的內容，放一個水平的導航欄在這里。（一個不錯的圖形或圖像滑塊將有助于分開頁面的頂部和底部，引導讀者的視線停留在預測的Z-模式上。）
點#3 – 到這里，這將是一個不錯的為其他鏈接吸引注意力的地方，或者作為最終的視線目標（點#4）的鋪墊。
點#4 – 作為“終點”，這里是你吸引讀者有所行動的最完美的地方。

你首先要做的事情是給網頁上的元素進行優先級排序，從而知道哪些是最重要的，哪些是最不重要的。之后，便是將他們合理分配在視覺的“熱點”上。再者，Z-模式可以在網頁上進行重復并且延伸到整個界面。我們看看Evernote是怎樣用連續的Z- 模式來交替地吸引讀者行動和顯示賣點就會明白了。