如何根據眼球運動路線來設計網頁
英文原文：How to design websites that mirror how our eyes work
創見干貨：不要被假象所迷惑了：你的用戶會瀏覽那些處于網頁中最好位置的文章，但是這與你的文章內容沒什么關系，這出于人眼的自然運動與常年形 成的閱讀習慣。作者在本文中使用了大量網站設計的實例，告訴你如何遵循用戶的閱讀習慣、如何讓用戶保持注意力，以及在什么位置插入廣告最有效果。
F 型版式設計通常用于那些需要承載大量文本信息的網頁，如新聞網站、博客或者是需要進一步展開的網站。在我們介紹如何使用這種版式設計以及它為何能夠起到作用之前，你稍微回想一下就會發現這種版式設計被運用在了各種流行的網站之中。
F 型版式設計到底是啥？
F 型版式設計是一種最為常用的符合用戶視覺習慣的網頁設計，它尤其適用于承載大塊內容的頁面。
F 型版式設計代表著讀者在瀏覽網站時首先映入眼簾的是處于屏幕最頂部水平線上的內容，然后才是根據文化習慣從左至右閱讀。接下來讀者的目光會掃到垂直于屏幕 左側的區域，在其中尋找興趣點、關鍵字或段落最初的句子以及文章摘要。當讀者發現他們喜歡的東西， 就會開始正常地按照水平線方向閱讀。
讀者的這種視覺習慣所形成的最終結果就是讓閱讀網頁的先后順序形成了一個 F 型或 E 型。在 2014 年的 UI 設計案例中來看，CNN 與 NYTimes 網站都采用了 F 型版式設計。
由 Jakob Nielson 所領導的 Nielsen Norman Group 公司讓 232 位用戶瀏覽了數千網頁，在這個實踐基礎上進行了網頁可讀性的研究，從中總結出了 F 型版式設計在實際運用中的重要意義：
-
用戶很少會將文本中的每一個字都看完。（事實上，平均來講他們只會看其中 20% 的內容）
-
文章前兩部分是最為重要的，它決定了用戶是否會繼續閱讀下文
-
每一段只表達一個中心思想，盡可能多的只講要點。
-
另起一段進入新的章節部分時要使用誘人的關鍵詞
那么 F 版式設計到底該如何使用呢，請看下文的案例分析。
如何使用 F 版式設計？
下圖的示范來自布蘭登·瓊斯的關于 F 版式設計的網頁可視化文章
顯然，網頁設計師都想要把最好的內容放在頁面頂部，并且左上角位置放上最想要被看見的內容，因為左上角這個位置是整個頁面中最有可能會被讀者看到的地方。這也是為什么你通常都會把公司的 Logo 放在這個位置。
一般來說，設計師會將導航欄放在頁面頂部靠右的位置。因為這會方便用戶通過搜索關鍵詞來尋找自己感興趣的標題。網頁設計者要對于頂欄的內容豐富 性和吸引力加以斟酌：一個簡約且小巧的頂欄會使得用戶很快開始瀏覽下文，而一個面積龐大的頂欄雖然能夠進一步突出主導內容，但是卻是以犧牲了用戶對位于它 下方文章的閱讀興趣為代價。
在瀏覽完第一行內容之后，用戶的視線就會下移到第二個最為顯眼的位置，并且重復剛剛在頁面頂部進行過的瀏覽過程。從理論上說，用戶接下來應該繼 續瀏覽位于頁面下方的內容直到發現感興趣的文章，但是在實際當中他們看了幾秒鐘之后就會關掉網頁了，除非你的內容能夠讓他們一直保持注意力。
出于用戶在閱讀網頁時的真實使用情況，設計方面的專家建議打破頁面以往的沉悶格局，在前面兩三行常規內容之后，就插入一個破壞常規、引起注意力的視覺元素。你可以根據情況提早安排這種視覺元素出場，只要能夠讓頁面一直保持視覺刺激就行。
下圖就是一個很好的 F 版式設計的示范:
其中值得注意的是在每一行結尾的地方都是插廣告的最佳區域，因為用戶在看到此處時會自然地產生短暫的停頓，接著才會繼續瀏覽下文。這也是為什么你在上圖中看到在第一行內容結束時，結尾區域出現了「New eBook Out Now」的小廣告。
F 型版式設計非常適合穿插廣告，因為你可以把廣告安排在相對顯眼的位置，同時又不會干擾正文的內容。但是要記住內容為王這條鐵律，網頁邊欄不僅僅是用來放廣告的，它存在的意義還在于指引用戶進行深入閱讀。
F 型版式設計中的右邊欄的主要作用有以下兩點：
1、放入一些確有必要但是與網站內容不相干的東西——切你想讓用戶看到的且與網站內容本身無關的東西都可以放在這兒。也許是廣告，也許是文章鏈接，或者是社交媒體的一鍵分享。
2、成為一個搜索工具——這個區域非常適合放置一個搜索欄，同時也可以將目錄列表、云標簽、熱門文章安排在這里。
網頁設計在很多時候注重的是第一眼看過去的感覺，在下面我們會使用案例來進行解釋。
紐約客網站已經用實踐說明了 F 型版式設計非常適合網站自然而然地安插一些廣告，一眼看過去 David Yurman 的廣告非常顯眼，但是好在下方主要文章的配圖顏色采用了紅色，所以上面的廣告也沒有分散太多讀者的注意力。就像我們前面提到過的一樣，這則廣告之后再次出 現在了頁面中第二行內容結尾部分，讀者的視線掃到這里會自然的停頓。
你還會發現 F 型版式設計同樣也適合那些排版并不密集的網站。
iZettle 的主頁并沒有使用常規的 F 型版式設計，實際上在該網頁中他們是采用了 F 型版式與 Z 型版式的混合體（我們在下文中會進一步討論 Z 型版式）。
在 iZettle 的主頁設計當中所采用的避免模板化效果的方法就是在網頁頂部放置了網站的主標題（「Grow your business with iZettle」），并為這個標題了設置了一個巨大的背景圖。對既有版式設計進行修改是可取的方法，只要能夠讓讀者的閱讀模式和你的頁面布局相匹配就能達 到目的。毫無疑問我們還能找出更多新奇有意思的頁面設計案例，但是可別忘了頁面設計的主要目的是讓用戶能夠看得下去內容。
為什么 F 型版式設計能夠取得效果？
之所以設計師們會一再使用 F 型版式設計，是因為它模擬了用戶的眼球運動習慣。絕大部分人在進行閱讀的時候都會遵循從上到下，從左至右的順序。
在網頁設計時使用 F 型版式設計其實是鼓勵用戶按照自己的閱讀習慣來瀏覽頁面。反之，有些內容繁多的網頁忽略了 F 型版式設計的宗旨，讓讀者在閱讀的時候不得不重新調整他們本來很自然的眼球運動，造成了讀者與閱讀內容之間的沖突。
網站的頁面布局會對廣告轉化率產生影響，所以很重要的一點是你應該弄清楚網頁中每個區域的商業價值。就拿 Freespee 網站來舉例吧，在他們重新將網頁設計成上圖的版本之后，在接下來的 A/B 測試中發現，在相同的廣告支出條件下用戶瀏覽網頁后撥打電話的轉化率提高了 30%，其中原因其實很簡單，就是因為他們將電話號碼放在了更為顯眼的右上角位置。
當我們在討論如何根據人們的眼球運動進行網頁 UI 設計的時候，上面所舉的例子并不代表著他們就是在這方面做得最好的設計。他們還可以將主要標題設計的更為醒目，并且把背景圖換成股票行情走勢圖，這樣子圖 片內容也能夠對于他們的產品價值提供視覺上的支撐。但是我們舉出這個例子只是為了強調以下這一點：即使你的網站排版與選圖都不是最好的，但是只要能夠不斷 改進頁面布局讓其更為符合人們的閱讀習慣，你仍然能夠從中獲得良好的效果。
現在我們就來總結一下 Freespee 網站在頁面設計時做對了哪些事情：
- 在頁面左上角放置的 Logo 是第一個視覺焦點，用戶會自然地從這開始瀏覽導航欄、搜索文章或者注冊登錄。
- 頁面右上角的電話號碼是第二個視覺焦點，能夠讓用戶看到之后做出撥打電話的反應。如果電話號碼的數字能夠使用綠色高亮設置，那么它可能會更具吸引力。
- 網站的主體內容簡潔明了，是本頁面的第三個視覺焦點。這幾行文本的結構類似一個迷你的 F 型版式，所以用戶在閱讀時的注意力能夠自然地最后落腳于注冊賬號的按鈕上。
不過 F 型版式并不是百分百可靠，它的最大弱點就是會使你的頁面布局會看上起千篇一律，這很容易就會讓你的用戶感到厭煩。這也是為什么你應該在頁面中每隔幾行就插入一些不同的視覺元素，多樣性的版式設計有助于你的用戶保持注意力。
從上圖中可以看到，Kickstarter 網站將其頁面分成了明顯的三部分，第三部分就是排列有序的具有視覺沖擊力的產品展示小圖。你應該明白 F 型版式設計通常運用在具有大塊內容的頁面中，人們通常對于這些信息僅僅是一掃而過，如果你想要給用戶留下深刻的印象，就需要推陳出新在網頁設計中突顯自己 網站的個性。不過當你進行版式的調整時，還是需要遵循一定的規則，確保你的網頁是按照一定縮放比例來設計的。
多說一句
F 型版式并不僅僅適用于排列文本。
任何時候只要你想展示多樣化的內容，你都需要將它們組織起來。F 型版式符合人們眼球的運動軌跡，所以采用這個結構能夠優化你的頁面布局。你當然不需要嚴格遵循范例來設計，我們只為你提供方向指導，而不是給你一個套用模 板。即使你只是按照這個規律對于你的頂部導航欄進行一些細微的調整，也會取得意想不到的效果。