網頁設計怎樣利用F型掃視

今天這篇文章，主要介紹「F 型掃視」。讀完後，你會明白我們到底如何瀏覽網頁，也知道網頁應該如何設計，才能帶來更好的體驗。

　　一、什麼是「F 型掃視」?

「F 型掃視」是介面閱讀最常見的一種掃視模式，在有很多內容板塊的介面上非常實用。「F」也可以被理解為「Fast」。大多數人閱讀介面內容時，都採用了「F 型掃視」模式——只需要幾秒，就可以快速將頁面掃完。「F 型掃視」最早是由尼爾森諾曼集團(NNGroup)通過眼球追蹤實驗提出的，該項實驗記錄了 200 多名使用者閱讀上千個網頁的資料。實驗結果發現，使用者的閱讀習慣相當一致，即便是在不同站點和不同閱讀任務的前提下。實驗物件的閱讀軌跡看似像字母「F」，幷包括以下 3 個部分：

首先，人們會橫向閱讀，通常掃視範圍僅停留在頁面頂端部分。這一軌跡形成了字母「F」的第一橫。

然後，我們會順著頁面左端縱向閱讀。我們的閱讀重點僅停留在段首其感興趣的部分。發現感興趣的內容後，我們會再次橫向閱讀，不過這次橫向閱讀的範圍通常較第一次小。這一軌跡形成了字母「F」的第二橫。

最後，我們會再次順著頁面左端縱向閱讀。

　　二、為什麼用「F 型掃視」?

通過「F 型掃視」模式，更容易體現出良好的視覺層次，從而方便使用者瞭解介面內容。對大多數西方使用者來講，「F 型掃視」模式是非常舒適的，因為他們的閱讀習慣一直以來都是從上到下、從左至右的。

　　三、什麼時候用「F 型掃視」最舒服?

針對有大量文字的網站，比如部落格或新聞站點，「F 型掃視」模式是再好不過的選擇;在內容過多(特別是文字過多)的情況下，若頁面佈局是根據自然掃視模式(即「F 型掃視」)來設計的，使用者反饋會更好。

　　四、網頁應該怎樣用「F 型掃視」?

　　1. 按重要性對內容排序

在設計規劃頁面元素時，一定要按重要性對各項內容進行排序。通過排序，你可以清楚地知道你最想讓使用者閱讀的內容。這樣一來，你只需要將這些內容放在頁面的「熱點」區域即可。

　　2. 設定預定期望

整個頁面最開始的一兩段是非常重要的。儘可能將重要內容放置在頁面頂端，從而可以在短時間內讓人們知道網站(或頁面)是用來做什麼的。根據「F 型掃視」模式，我們通常會橫向閱讀頁面頂端。因此，在頂端區域設計一個導航欄是個不錯的.選擇。使用者掃視頁面最重要的內容只需要幾秒鐘。

　　3. 設計要方便掃讀，而不是閱讀

設計頁面佈局時，要從使用者角度出發。順著「F 型掃視」的閱讀軌跡，將人們最感興趣的內容按重要性放置於相應區域：段首用詞一定要足夠吸引使用者眼球。使用者首先會閱讀最突出的內容(即最具視覺重量的內容)。因此，一定要凸顯重要內容的視覺重量。可以通過字型排版來體現文字的重要性，比如高亮文字關鍵詞;也可以通過各種顏色突顯某些按鈕。每個段落只覆蓋一個觀點，並儘可能多地使用專案符號(即本條左邊的小黑圓點)。將最重要的內容(比如行為召喚相關的內容)放置在頁面左右兩端，這也是使用者橫向掃視的起始兩端。當他們繼續往下掃視至下一橫向內容時，剛好有幾秒時間，可以讓他們稍作思考。

　　4. 好好利用工具欄

工具欄可以讓人們進一步參與互動，好好利用工具欄，可以進一步提高使用者參與度。讓希望使用者點選的任何元素顯得更有特色，儘管它可能和頁面主要內容「迥然不同」，比如廣告，相關文章列表，社交媒體小元件等等。把它定義為使用者尋找特定內容(比如目錄列表，標籤群，熱門文章小元件等等)的工具。

　　5. 避免視覺疲勞

「F 型掃視」模式最大的缺點，是可能存在的視覺疲勞。要讓使用者覺得無聊，其實並不難，比如在頁面加入重複和相似的內容。如果使用者真覺得無聊了，那你也不會得到什麼好處。所以，不妨試試在人們掃視範圍內加入「出人意料」的元素，從而保持使用者的參與度。此外，將頁面拆分為左右兩欄——左欄為主要資訊，右欄為輔助資訊(工具欄)，可以進一步保持使用者的參與度。整個介面佈局設計簡單，但核心元素都體現了出來。人們開啟頁面，能夠清晰瞭解頁面主要功能，工具欄中也有目錄列表導航，使用者也可以直觀地看到相關內容。通過頁面左端方形卡片和引人注目的標題，可以吸引使用者關注。儘管使用者可能對這些內容不感興趣，但至少發現有趣內容的機會是存在的。順著字母「F」的第二橫，再加入一些「出人意料」的元素，比如圖片或行為召喚相關的內容，從而進一步保持使用者的參與度。

「F 型掃視」模式是人眼閱讀的自然軌跡。設計頁面時，結合該模式可以進一步優化頁面設計。但值得注意的是，最好不要死板地運用這個模式，畢竟它只能算作設計的指導原則，而非設計模板。它是死的，而人是活的。