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

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

一、F模式由來

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

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

二、F模式的原理

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

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

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

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

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

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

三、看看別人怎么用的

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

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

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

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

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

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

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

四、如何使用F布局

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

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

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

2. 避免視覺委靡

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

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

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

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

• 用戶很少閱讀筆墨的每一個(gè)字；

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

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

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

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

總結(jié)

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

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

圖片素材作者：Julian Ybarra