摘要：目光跟蹤定位技術，將直接影響著Web界面布局。文中理論結合實際案例，分析iZettle、DropBox、Evernote等知名網站如何利用F-模式、Z模式完美搭建頁面布局。
網頁設計中，視覺層級的組織十分重要，它可幫助用戶快速抓取所需關鍵內容，獲得愉悅體驗。目光追蹤定位技術可幫助實現這一點，其可幫助設計師更好地懂得如何設計既高效又有審美趣味的網站。Jerry Cao在Webdesigner Depot上發表了《How Eye Scanning Impacts Visual Hierarchy In UX Design》一文，詳細介紹了F-模式、Z-模式，并分析了iZettle、DropBox、Evernote等知名網站如何利用這兩種模式完美搭建頁面布局的。CSDN對該文章進行了翻譯，內容如下。
從希臘的花瓶到意大利的教堂，藝術在幾千年的歷史長河中，熏陶了我們對“美”的理解，伴隨著近“目光追蹤定位技術”的發展，讓我們知道了人是如何以一個動態的視角去感知這個世界的。更讓人興奮的是，這項技術幫助我們更好地懂得如何設計既高效又有審美趣味的網站。
網頁設計（作為一種視覺藝術）與傳統藝術形式遵循著一樣的規則。本文中，我們將簡要概述視覺組織的重要性，然后說明“目光跟蹤定位技術”是怎樣改變Web界面布局的。
創建好的視覺組織結構
毫無疑問，一個網站的視覺效果影響著它能否成功，找出這個原因很重要。作家及雅虎的高級產品責人Luke Wroblewski在他的論文《Communicating with Visual Hierarchy》中提到一個Web界面的視覺呈現要點應包括以下幾部分：
很自然流暢的向導
的界面能引導用戶很自然地進入下一操作，而不會給用戶帶來霸道而專橫的感覺。你也許會認為企業所做的一切都是商業行為，但毫無疑問Uber是一個流暢到讓人難以置信的結構化網站。關鍵點在于頂部的滾動設計，緊隨其后的是一個有趣的滑塊來提供不同的汽車選項，然后按照某種邏輯關系幫你順利地找到所在城市的座駕。
與用戶進行交流
通過拼接不同的信息碎片,不用任何的交流信息來說明，UI就可以在用戶頭腦中形成一個信息鏈。看看流行的設計網站Abduzeedo是怎么設計的：頭部是占一大塊區域的分類信息，特色內容在中間部分，細小分類則在頁腳部分。
產生情感共鳴
不要錯誤地把你的網站僅僅當做一個呆板的工具。網站也能與用戶建立情感上的聯系，如果你不這樣做，你的競爭可是會的。事實上，如果你做出一個有積極情感的網站，用戶更容易原諒你界面上的缺陷。MailChimp就是一個完美的例子，它的界面使用起來令人心情愉悅，使用起來更是一種享受。(網站建設)
人的視覺具有傾向性
有時，似乎你的眼睛也有他們自己的思想。經過多年的進化，眼睛有了發現我們認為重要的對象和動作的能力，不管是某個人以性感的身姿穿過馬路或是可愛的卡通熊的蜂蜜廣告都能吸引我們的注意。當然在每個人心中所謂的“重要性”是不一樣的，因人而異，不變的是他們的行為傾向。通常在瀏覽一個網頁時大部分人的行為傾向是一樣的。
所謂“行為傾向”有兩個，我們將詳細討論。99Designs作家Alex Bigman的文章《6 principles of visual hierarchy for designers》展示了那些有從左往右閱讀習慣的用戶群，當設計一個網站布局時有兩個非常通用和有效的設計模式。
是F-模式，常用于文本（當然也可以用于其它用途）。第二是Z-模式，可用于任何視覺布局。我們將在下面分別解釋他們各自的優點和缺點。
F-模式
F-模式的頁面往往包含大量文本，比如博客、新聞資訊、文章等站點頁面。
當面對成段的大量文字信息的時候，大多數讀者會縱向地先瀏覽每段左邊的文本，特別是在段落開始的幾個句子中尋找關鍵詞或者他們的興趣點。終讀者找到他們喜歡的東西,再開始正常地橫向閱讀。終的結果是看起來像字母F或E。(APP開發)
Nielson Norman團隊中的Jakob Nielson發起了一個基于232人瀏覽成千上萬個網站可讀性研究。通過他的研究，他記錄了他認為的“F-模式”的實際意義：
用戶很少會認真地讀文本的每一個字；
前兩個段落是重要的，它應該包含你的要點；
在段落的開始、副標題和關鍵位置中放入吸引人的關鍵詞。
當然，左上角是重要的，因為這是所有有從左往右閱讀習慣的人群閱讀開始的地方。用戶通常會水平地通讀頭部，所以這是一個很好地放置導航條或（和）“用戶行為號召”的地方。然后用戶從左側縱向瀏覽下來,直到遇到感興趣的內容。終，用戶的目光結束在頁面的右側，這是一個放置“用戶行為號召”或廣告的地方。只是不要讓側邊欄遮擋住內容。
但F型并不是一個定式——沒有事實說明它是好的，但更像是由大部分用戶的行為習慣而總結出來的一些松散的規律。請牢記這一點，因為F-模式在開始幾行后就失去了它的有效性。
Kickstarter使用一張卡片來展示特色項目，這使得用戶不會在瀏覽完開始的500像素后就變得視覺疲勞。
另一方面，iZettle在主頁上采用了一種更傳統、遵循F-模式的方法。不管怎樣，它通過在背景圖片的上層疊加主文本（使用iZettle來增長您的業務）和“用戶行為號召”來設法避免過于模板化的外觀。我們認為這是適應這種閱讀模式基本簡潔的方法。
Z-模式
此外，Z-模式是簡單、通用的模式,普遍用于任何基于文本的網頁。讀者首先橫向的瀏覽頂部，接著回到左邊，然后再橫向地瀏覽整個底部。
理解通用的Z-模式很重要，因為它解決了網站的核心需求：層次結構、品牌化和用戶行為號召。它的美在于既簡單又具有“用戶號召”型網站的理想布局。當然，對于更復雜的或包含大量內容的網站，Z-模式可能過于簡單。
考慮一下Z-模式是否適合你的網站？下面有一些佳實踐可以更好的優化該模式：
背景：保持背景在它應該處于的位置：隱蔽在內容之下。不讓它分散讀者的注意力。
要點1：作為個要點，將Logo放置在固定位置。
要點2：雖然主要的用戶號召應該放在后面，這對二級用戶號召來說是一個好位置，可強調或突出導航條（一個漂亮的圖形或圖像滑塊將有助于分割頁面的頂部和底部，鼓勵讀者按照Z模式所期待的方式來瀏覽）。
要點3：選取佳位置來吸引讀者對其它鏈接的注意，或者吸引讀者的目光到網站的終目標：要點4。
要點4——作為“終點”，這是一個完美的放置主要用戶號召的地方。
首先你需要做的是把頁面上的元素按照重要性進行排序。然后，從結果中挑選出適當的“熱點”就會變得很簡單。
此外，Z-模式可以重復和擴展到整個頁面。我們來看看Evernote是如何按“之”字型向下放置他們的“用戶號召”和賣點的。
DropBox沒有使用任何背景圖片，很簡單地實現了這種“曲折”的模式。相反的，更多功能型的設計內置在了布局中，比如用戶號召“瀏覽更多”，當用戶瀏覽整個網頁時，它幫助用戶鏈接進入每一板塊的細節部分。這也有助于通知讀者點擊到下一個相關頁面，而不需要先去通讀頁面所有內容。
設計趨勢預測
一個的界面設計應該像一個無形的手在左右用戶思考的速度。從F-模式和Z-模式設計趨勢獲得的重要的一點就是：你應該將你認為重要的內容很自然地展現給讀者，而不是讓他們感覺到在強迫他們看。
能敏銳地把握細節，對任何頁面布局來說都是一個優勢。這些模式可以讓用戶感覺是為他們提供一些相關建議，而不是強迫他們接受。
原文鏈接：How Eye Scanning Impacts Visual Hierarchy In UX Design
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
