中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

F模式由來

在2006年時候，尼爾森諾曼發表了一篇人們如何掃描和閱讀網站習慣的分享，他們通過研究發現，用戶傾向于一種F模式去查看網站。

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

F模式的原理

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

上圖是一個網站的熱力動圖及用戶的瀏覽視線，我們不難發現：

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

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

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

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

F布局使用案例

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

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

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

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

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

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

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

如何使用F布局

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

1. 確定內容優先級

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

2. 避免視覺疲勞

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

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

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

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

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

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

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

總結

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

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

#相關閱讀#

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

#專欄作家#

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

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash, 基于CC0協議。