上篇文章《趕緊收下！連BAT設計師都在使用的視覺動線技巧（上）》和大家分享了視覺動線和 Z 型布局的詳解，不知道大家還記得嗎？我們的互聯網用戶希望高效閱讀頁面，這意味著人們會經常跳躍式的閱讀頁面，從而在閱讀模式上形成了 Z、F 對角線這些模式，那么今天和大家分享下另外一個比較經典的 F 模式。
一、F模式由來
在2006年時候，尼爾森諾曼發表了一篇人們如何掃描和閱讀網站習慣的分享，他們通過研究發現，用戶傾向于一種 F 模式去查看網站。
這個研究是在超過2000名用戶身上完成的，研究發現幾乎每一人都采取相同的瀏覽順序，先從頂部開始，閱讀路線，重復這個動作幾次，經過幾行以后，他們開始閱讀界面中一些文案，試著去想象這個瀏覽形式，你就會發現它是一個 F 模式。
二、F模式的原理
在移動端屏幕要小的多，每個產品的內容和形式都不一樣，但是用戶都是做著同樣的事情，所以在做設計時候我們需要去思考如何運用用戶這種習慣去構建設計結構。
上圖是一個網站的熱力動圖，以及用戶的瀏覽視線，我們不難發現：
首先，用戶閱讀一個文章或者網站時候，先水平移動，通常在頂部區域上面，這個動線構成了 F 頂部的那一橫。
其次，他們掃描屏幕左側的垂直線，尋找文章中感興趣的點，當他們發現一些有興趣內容時候，會在第二次，在水平移動過程中去閱讀，然后隨著路徑越來越長，閱讀區域一次比一次短，這就是形成了 F 的下面部分。
最后，用戶以垂直的移動掃描完成整個頁面的閱讀。
△ 當然 F 模式用戶掃描模式并不是總是由三部分組成，當用戶找到他感興趣的內容，他們變回正常的閱讀，形成水平線的閱讀。
三、看看別人怎么用的
F 模式能很好的幫我們創建好的視覺層次結構設計，因為這是人們可以輕松掃描設計一種布局，它能讓大多數用戶感到舒適，因為我們用戶一直從上到到下，從左到右閱讀。
△ 在移動端很多設計中也是如此，上圖是 JTBC NOW 一個韓國 app，界面中可以發現，用戶習慣從左上角開始，水平掃描然后下降到下一行，并做同樣的從左到右閱讀，直到找到感興趣內容點擊進去，否則直接遞減方式閱讀下去。
△ F 模式是新聞類 app 以及電商等文本和內容密集的產品首選布局，如果你有很多內容，尤其是大量文字，用戶將能根據這種自然的掃描模式設計布局更好去完成任務。
△ 在一些大型網站，如美國 CNN 官網就是一個典型的 F 布局形式，讓用戶在設計師設計好的整個框架下去瀏覽內容。
△ F 模式很重要一個原則就是把最好的內容放置于頂部，因為這是最快速被用戶注意到的內容，這也是為什么我們很多產品導航放到頂部，搜索放到頂部，一些重要功能模塊放到頂部的原因，也有一些公司的 LOGO 放到頂部。
如圖中，在1的位置為公司的品牌 logo，在第2點位置，這里會放一些幫助，然后在上排以后，當用戶下降到3位置時候然后瀏覽到4，去重復這個過程，從理論上來講，用戶將延續沿著頁面走下去，直到找到有興趣的內容，但是實際是用戶可能會在幾秒鐘離開，如果你的內容不夠吸引人，那么怎么避免這個情況呢？
△ 出于這個原因，我們建議當用戶瀏覽一屏幕后，我們需要通過視覺刺激，打破常規元素和單調，引導他重新去尋找感興趣的點，如圖會在用戶掃描第一屏后在這里用另外一個不一樣的布局放頁面中間，讓用戶有一個短暫的停留視覺。
四、如何使用F布局
F 布局從字母來看，讓設計師更好控制用戶所看見的內容，F 布局的原理是用戶看到大量內容時候，特別文字密集的頁面。他們會沿著網站左側主線，從左到右邊，從上到下，遞減去閱讀信息，所以在設計前我們需要去思考。
1. 確定內容優先級
在設計之前，我們先要去確定內容哪些最重要，哪些最不重要的，做好優先級排序，只有當我們清楚知道你希望用戶看到什么，我們才能將它們放在用戶視線熱點中，所以在設計前期一定要弄清楚優先級。
2. 避免視覺疲勞
△ 如前面所說的，我們只有弄清楚了內容優先級，把重要內容放到 F 布局上，同時也需要通過排版來突出內容重要性，我們可以使用顏色和高亮按鈕，給重要的信息增加視覺重量，這個時候就是我們設計師需要創建視覺層次，讓用戶更容易瀏覽設計的手法，來控制我們的眼睛從重要信息到重要信息，而不是漫無目的瀏覽。
△ 上圖通過大標題加色塊的形式來加強內容的引導，吸引用戶關注。
3. 做設計掃描，而不是閱讀
ielson Norman 集團的雅各布·尼爾森在對用戶進行訪問后得出一個結論：
- 用戶很少閱讀文字的每一個字；
- 首屏信息是頁面中最重要的環節，我們必須把勾子放在那里；
- 用最簡單粗暴直接的標題，往往能吸引住用戶。
這句話怎么理解，用戶在一個網站或 app 上停留時間很短，我們必須在最重要位置，通過內容吸引用戶，內容始終是王道，F 布局的存在是為了更深層次幫助用戶理解內容，但是 F 模式并不是一個指南，也不是模板。
△ 內容一定要吸引人，Youtube 會把今日最流行的新聞放頁面列表中，同時在 F 的視線上把今日世界杯決賽新聞內容放其中，吸引用戶瀏覽。
總結
無論是之前分享的 Z 型布局，還是今天分享的 F 型布局，都是在遵循用戶瀏覽習慣，讓其更自然，更高效。無論設計趨勢如何變化，這些布局原理永遠不會過時，我們在了解這些布局前提下，通過視覺元素組織和運用，去引導我們的視覺焦點，吸引用戶關注到我們要傳遞的內容才是核心本質。
歡迎關注作者的微信公眾號：我們的設計日記，每周分享最新設計趨勢和設計經驗，科學設計方法。
圖片素材作者：Julian Ybarra
「讓作品有節奏的設計案例」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 1 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓