本文作者與大家分享了兩個排版設計的小技巧，教你如何用設計向用戶傳達你想要讓他知道的信息。

上篇分享了視覺動線Z型布局，它能很好引導用戶預覽?，F(xiàn)如今快節(jié)奏的工作生活中，用戶都希望能高效閱讀頁面，迅速抓住內(nèi)容重點，這意味著人們會經(jīng)常跳躍式的閱讀頁面，從而在閱讀模式上形成了，Z、F、對角線這些模式，今天和大家分享下另外一個比較經(jīng)典的F模式。

F模式由來

在2006年時候，尼爾森諾曼發(fā)表了一篇人們?nèi)绾螔呙韬烷喿x網(wǎng)站習慣的分享，他們通過研究發(fā)現(xiàn)，用戶傾向于一種F模式去查看網(wǎng)站。

這個研究是在超過2000名用戶身上完成的，研究發(fā)現(xiàn)幾乎每一人都采取相同的瀏覽順序，先從頂部開始，閱讀路線，重復這個動作幾次，經(jīng)過幾行以后，他們開始閱讀界面中一些文案，試著去想象這個瀏覽形式，你就會發(fā)現(xiàn)它是一個F模式。

F模式的原理

在移動端設計時候，屏幕較小，每個產(chǎn)品的內(nèi)容和形式都不一樣，但是用戶都是做著同樣的瀏覽動作，所以在做設計時候需要去思考，如何運用用戶這種習慣去構建設計結構。

上圖是一個網(wǎng)站的熱力動圖及用戶的瀏覽視線，我們不難發(fā)現(xiàn)：

首先，用戶閱讀一篇文章或者網(wǎng)站時，先水平移動，通常在頂部區(qū)域上面，這個動線構成了，F(xiàn)頂部的那一橫。

其次，他們掃描屏幕左側的垂直線，尋找文章中感興趣的點，當他們發(fā)現(xiàn)一些有興趣內(nèi)容時候，他們會在第二次，在水平移動過程中去閱讀，然后隨著路徑越來越長，閱讀區(qū)域一次比一次短，這就是形成了F的下面部分。

最后，用戶以垂直的移動掃描完成整個頁面的閱讀。

當然，F(xiàn)模式用戶掃描模式并不是總是由三部分組成，當用戶找到他感興趣的內(nèi)容，他們變回正常的閱讀，形成水平線的閱讀。

F布局使用案例

F模式，能很好的幫我們創(chuàng)建好的視覺層次結構設計，因為這是人們可以輕松掃描設計一種布局，它能讓大多數(shù)用戶感到舒適，因為我們用戶一直從上到到下，從左到右閱讀。

在移動端很多設計中也是如此，上圖是JTBCNOW一個韓國APP界面中可以發(fā)現(xiàn)，我們的用戶習慣左上角開始，水平掃描然后下降到下一行，并做同樣的從左到右閱讀，直到找到我們感興趣內(nèi)容點擊進去，否則直接遞減方式閱讀下去。

F模式是新聞類APP以及電商等文本和內(nèi)容密集的產(chǎn)品首選布局，如果有很多內(nèi)容，尤其是大量文字，用戶將根據(jù)這種自然的掃描模式設計布局更好去完成閱讀。

在一些大型網(wǎng)站，如美國CNN官網(wǎng)就是一個典型的F布局形式，讓用戶在設計師設計好的整個框架下去瀏覽內(nèi)容。

F模式很重要一個原則就是把最好的內(nèi)容放置于頂部，因為這是最快速被用戶注意到的內(nèi)容，這也是為什么我們很多產(chǎn)品導航放到頂部，搜索放到頂部，一些重要功能模塊放到頂部的原因，也有一些公司的LOGO放到頂部。

如上圖中，在1的位置為公司的品牌LOGO，在第2點位置，這里會放一些幫助，然后在上排瀏覽后，用戶視線下降到3位置，然后瀏覽到4，去重復這個過程，從理論上來講，用戶將延續(xù)沿著頁面走下去，直到找到有興趣的內(nèi)容，但是實際是用戶可能會在幾秒鐘離開，如果你的內(nèi)容不夠吸引人，那么怎么避免這個情況呢？

出于這個原因，我們建議當用戶瀏覽一屏幕后，我們需要通過視覺刺激，打破常規(guī)元素和單調(diào)，去引導他重新去尋找感興趣的點，如圖1，會在用戶掃描第一屏后在這里用另外一個不一樣的布局放頁面中間，讓用戶有一個短暫的停留視覺。

如何使用F布局

F布局讓設計師更好控制用戶所看見的內(nèi)容，F(xiàn)布局的原理是用戶看到大量內(nèi)容時候，特別文字密集的頁面。他們會沿著網(wǎng)站左側主線，從左到右邊，從上到下，遞減去閱讀信息，所以在設計前我們需要去思考以下幾點：

1. 確定內(nèi)容優(yōu)先級

在設計之前，我們先要去確定哪些內(nèi)容最重要，明確信息的優(yōu)先級，只有清楚知道你希望用戶看到什么，才能將它們放在用戶視線熱點中。

2. 避免視覺疲勞

如前面所說的，明確了內(nèi)容優(yōu)先級，把重要內(nèi)容放到F布局上，同時也需要通過排版來突出內(nèi)容重點，可以使用顏色和高亮按鈕，給重要的信息增加視覺重量，這個時候就是我們設計師需要做的，需要創(chuàng)建視覺層次，讓用戶更容易瀏覽，通過設計手法來控制我們的眼睛從一組重要信息到另一組重要信息，而不是漫無目的瀏覽。

通過大標題加色塊的形式來加強內(nèi)容的引導，吸引用戶關注。

3. 做設計掃描，而不是閱讀

ielson Norman集團的雅各布.尼爾森在對用戶進行訪問后得出一個研究:

1. 用戶很少閱讀文字的每一個字
2. 首屏信息是頁面中最重要的環(huán)節(jié)，我們必須把勾子放在那里
3. 用最簡單粗暴直接的標題，往往能吸引住用戶

這句話怎么理解，用戶在一個網(wǎng)站或APP上停留時間很短，我們必須在最重要位置，通過內(nèi)容吸引用戶。內(nèi)容始終是王道，F(xiàn)布局的存在是為了更深層次幫助用戶理解內(nèi)容，但是F模式并不是一個指南，也不是模板。

內(nèi)容一定要吸引人，Youtube會把今日最流行的新聞放頁面列表中，同時在F的視線上把今日世界級別決賽新聞內(nèi)容放至其中，吸引用戶瀏覽。

總結

無論是之前分享的Z型布局，以及今天分享的F型布局，都在遵循用戶瀏覽習慣，更自然，更高效。無論設計趨勢如何變化，這些布局原理永遠不會過時，這2篇文章所講的布局方法，不僅僅是一種方法，更是我們做設計前深入思考的一種方法。

我們在了解這些布局前提下，通過視覺元素組織和運用，去引導頁面的視覺焦點，吸引用戶關注到要傳遞的內(nèi)容才是核心本質(zhì)。

#相關閱讀#

設計秘技：你不知道的排版方法！

#專欄作家#

Sky，微信公眾號：我們的設計日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。支付寶體驗設計專家，阿里巴巴天貓設計專家；10年知名互聯(lián)網(wǎng)公司設計經(jīng)驗，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。

題圖來自Unsplash, 基于CC0協(xié)議。