小男

上篇文章《連BAT設計師都在使用的視覺動線技巧(上)》和大家分享了視覺動線和Z型布局的詳解,不知道大家還記得嗎?我們的互聯網用戶希望高效閱讀頁面,這意味著人們會經常跳躍式的閱讀頁面,從而在閱讀模式上形成了Z、F 對角線這些模式,那么今天和大家分享下另外一個比較經典的F模式。

? ?

F 模 式 由 來? ?

 

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

 

 

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

 

F 模 式 的 原 理? ?

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

 

 

 

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

 

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

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

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

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

 

看 看 別 人 怎 么 用 的? ?

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

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

 

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

 

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

 

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

 

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

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

 

如 何 使 用 F 布 局? ?

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

 

1.確定內容優先級

 

在設計之前,我們先要去確定內容哪些最重要,哪些最不重要的,做好優先級排序,只有當我們清楚知道你希望用戶看到什么,我們才能將它們放在用戶視線熱點中,所以在設計前期一定要弄清楚優先級。

 

2.避免視覺疲勞

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

▲ 上圖通過大標題加色塊的形式來加強內容的引導,吸引用戶關注

 

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

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

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

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

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

? ?

總 結? ?

無論是之前分享的Z型布局,還是今天分享的F型布局,都是在遵循用戶瀏覽習慣,讓其更自然,更高效。無論設計趨勢如何變化,這些布局原理永遠不會過時,我們在了解這些布局前提下,通過視覺元素組織和運用,去引導我們的視覺焦點,吸引用戶關注到我們要傳遞的內容才是核心本質。

 

原文地址:我們的設計日記(公眾號)

作者:skys

201801301517295678

轉載請注明:學UI網 » 連BAT設計師都在使用的視覺動線技巧(下)

登錄收藏
 
你可能喜歡的:
B端設計指南02 — 導航B端設計指南02 — 導航
善用“心理賬戶”,提升用戶付費率善用“心理賬戶”,提升用戶付費率
我看到了細節,但卻沒看到細節中的細節!我看到了細節,但卻沒看到細節中的細節!
這個原理,掌握的人都變成資深設計師了這個原理,掌握的人都變成資深設計師了
產品體驗中的哲學產品體驗中的哲學
如何更好的理解設計思維(斯坦福的創新課)如何更好的理解設計思維(斯坦福的創新課)
科學研究揭示:深知5種途徑以成為一位出色設計師科學研究揭示:深知5種途徑以成為一位出色設計師
用戶體驗設計的可用性用戶體驗設計的可用性
平面設計中的認知基礎與結構化平面設計中的認知基礎與結構化
淺談產品設計要符合人的潛意識淺談產品設計要符合人的潛意識
?
网球比分雷速 江苏11选5模拟投注走势图 重庆幸运农场怎么分析 黑龙江快乐十分中奖规则 极速赛车开奖官网 比较安全的理财平台有哪些 广东11选5杀2码推荐 福彩3d走势图 - 综合版 北京极速赛车网站开奖 今晚快乐双彩开什么号 黑龙江体彩11选5软件