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

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

F模式由來

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

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

F模式的原理

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

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

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

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

最后，用戶以垂直的移動(dòng)掃描完成整個(gè)頁(yè)面的閱讀。

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

F布局使用案例

F模式，能很好的幫我們創(chuàng)建好的視覺層次結(jié)構(gòu)設(shè)計(jì)，因?yàn)檫@是人們可以輕松掃描設(shè)計(jì)一種布局，它能讓大多數(shù)用戶感到舒適，因?yàn)槲覀冇脩粢恢睆纳系降较?，從左到右閱讀。

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

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

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

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

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

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

如何使用F布局

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

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

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

2. 避免視覺疲勞

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

通過大標(biāo)題加色塊的形式來加強(qiáng)內(nèi)容的引導(dǎo)，吸引用戶關(guān)注。

3. 做設(shè)計(jì)掃描，而不是閱讀

ielson Norman集團(tuán)的雅各布.尼爾森在對(duì)用戶進(jìn)行訪問后得出一個(gè)研究:

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

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

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

總結(jié)

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

我們?cè)诹私膺@些布局前提下，通過視覺元素組織和運(yùn)用，去引導(dǎo)頁(yè)面的視覺焦點(diǎn)，吸引用戶關(guān)注到要傳遞的內(nèi)容才是核心本質(zhì)。

#相關(guān)閱讀#

設(shè)計(jì)秘技：你不知道的排版方法！

#專欄作家#

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

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

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