高效閱讀！BAT設(shè)計師都在使用的視覺動線技巧

之前圖趣給大家分享過排版圣經(jīng)！閱讀邏輯與視線的引導(dǎo)，我們的互聯(lián)網(wǎng)用戶都希望更高效的閱讀網(wǎng)頁，這意味著人們會經(jīng)常跳躍式的閱讀網(wǎng)頁，從而在閱讀模式上形成了 Z、F 對角線這些模式，今天和大家分享下另外一個比較經(jīng)典的 F 模式。

一、F模式由來

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

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

二、F模式的原理

在移動端屏幕要小的多，每個產(chǎn)品的內(nèi)容和情勢都不一樣，但是用戶都是做著同樣的事情，所以在做設(shè)計時候我們必要去思考如何運用用戶這種風(fēng)俗去構(gòu)建設(shè)計結(jié)構(gòu)。

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

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

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

最后，用戶以垂直的移動掃描完成整個網(wǎng)頁的閱讀。

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

三、看看別人怎么用的

F 模式能很好的幫我們創(chuàng)建好的視覺條理結(jié)構(gòu)設(shè)計，由于這是人們可以輕松掃描設(shè)計一種布局，它能讓大多數(shù)用戶感到舒適，由于我們用戶一向從上到到下，從左到右閱讀。

△ 在移動端許多設(shè)計中也是如此，上圖是 JTBC NOW 一個韓國 app，界面中可以發(fā)現(xiàn)，用戶風(fēng)俗從左上角開始，水平掃描然后降落到下一行，并做同樣的從左到右閱讀，直到找到感愛好內(nèi)容點擊進(jìn)去，否則直接遞減體例閱讀下去。

△ F 模式是消息類 app 以及電商等文本和內(nèi)容密集的產(chǎn)品首選布局，假如你有許多內(nèi)容，尤其是大量筆墨，用戶將能根據(jù)這種天然的掃描模式設(shè)計布局更好去完成義務(wù)。

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

△ F 模式很緊張一個原則就是把最好的內(nèi)容放置于頂部，由于這是最快速被用戶細(xì)致到的內(nèi)容，這也是為什么我們許多產(chǎn)品導(dǎo)航放到頂部，搜索放到頂部，一些緊張功能模塊放到頂部的緣故原由，也有一些公司的 LOGO 放到頂部。

如圖中，在1的位置為公司的品牌 logo，在第2點位置，這里會放一些幫助，然后在上排以后，當(dāng)用戶降落到3位置時候然后欣賞到4，去重復(fù)這個過程，從理論上來講，用戶將連續(xù)沿著網(wǎng)頁走下去，直到找到有愛好的內(nèi)容，但是現(xiàn)實是用戶可能會在幾秒鐘脫離，假如你的內(nèi)容不夠吸引人，那么怎么避免這個情況呢？

△ 出于這個緣故原由，我們建議當(dāng)用戶欣賞一屏幕后，我們必要通過視覺刺激，打破常規(guī)元素和單調(diào)，指導(dǎo)他重新去探求感愛好的點，如圖會在用戶掃描第一屏后在這里用另外一個不一樣的布局放網(wǎng)頁中心，讓用戶有一個短暫的停頓視覺。

四、如何使用F布局

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

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

在設(shè)計之前，我們先要去確定內(nèi)容哪些最緊張，哪些最不緊張的，做好優(yōu)先級排序，只有當(dāng)我們清楚知道你盼望用戶看到什么，我們才能將它們放在用戶視線熱點中，所以在設(shè)計前期肯定要弄清楚優(yōu)先級。

2. 避免視覺委靡

△ 如前面所說的，我們只有弄清楚了內(nèi)容優(yōu)先級，把緊張內(nèi)容放到 F 布局上，同時也必要通過排版來凸起內(nèi)容緊張性，我們可以使用顏色和高亮按鈕，給緊張的信息增長視覺重量，這個時候就是我們設(shè)計師必要創(chuàng)建視覺條理，讓用戶更容易欣賞設(shè)計的手法，來控制我們的眼睛從緊張信息到緊張信息，而不是漫無目的欣賞。

△ 上圖通過大題目加色塊的情勢來增強(qiáng)內(nèi)容的指導(dǎo)，吸引用戶關(guān)注。

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

ielson Norman 集團(tuán)的雅各布·尼爾森在對用戶進(jìn)行訪問后得出一個結(jié)論：

• 用戶很少閱讀筆墨的每一個字；

• 首屏信息是網(wǎng)頁中最緊張的環(huán)節(jié)，我們必須把勾子放在那里；

• 用最簡單粗暴直接的題目，每每能吸引住用戶。

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

△ 內(nèi)容肯定要吸引人，Youtube 會把今日最流行的消息放網(wǎng)頁列表中，同時在 F 的視線上把今日世界杯決賽消息內(nèi)容放其中，吸引用戶欣賞。

總結(jié)

無論是之前分享的 Z 型布局，照舊今天稟享的 F 型布局，都是在遵循用戶欣賞風(fēng)俗，讓其更天然，更高效。無論設(shè)計趨勢如何轉(zhuǎn)變，這些布局原理永久不會過時，我們在了解這些布局前提下，通過視覺元素組織和運用，去指導(dǎo)我們的視覺焦點，吸引用戶關(guān)注到我們要傳遞的內(nèi)容才是核心本質(zhì)。

迎接關(guān)注作者的微信公眾號：我們的設(shè)計日記，每周分享最新設(shè)計趨勢和設(shè)計經(jīng)驗，科學(xué)設(shè)計方法。

圖片素材作者：Julian Ybarra