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

在產(chǎn)品設計中，我們可以根據(jù)用戶習慣或用戶心理來搭建設計策略，比如有研究指出用戶在瀏覽網(wǎng)站頁面時，常會遵循F型瀏覽模式。那么我們要如何應用F型瀏覽模式在頁面設計中？F型瀏覽模式的應用過程中，又有哪些問題需要避免？

今天我們來聊聊設計中的三大視覺瀏覽模型之三：F型視覺模型。

一、什么是F型視覺模型

美國長期研究網(wǎng)站可用性的著名設計工程師尼爾森，于2006年4月發(fā)表了一項《眼睛軌跡的研究》的報告，他曾對200多名參與者進行了研究，結果顯示用戶的主要閱讀行為在許多不同的網(wǎng)站和任務中相當一致。這個閱讀模式看起來有點像字母F。

2017年該團隊在網(wǎng)站又更新了此模型的相關實驗結果：

報告指出用戶第一次瀏覽頁面的時候，視線通常會以字母F的形狀觀看頁面內(nèi)容，尤其是大面積文章的時候，如下圖：

1. 用戶首先讀取水平移動，通常跨越內(nèi)容區(qū)域的上部。這個初始元素構成了F的頂部欄。
2. 接下來，用戶稍微向下移動頁面，然后在第二個水平移動中讀取，該移動通常覆蓋比先前移動更短的區(qū)域。
3. 最后，用戶以垂直移動掃描內(nèi)容的左側。

有時這是一個相當緩慢和系統(tǒng)的掃描，在眼動追蹤熱圖上顯示為實心條紋。其他時候用戶移動得更快，創(chuàng)建一個眼動熱圖，最后一個元素構成了“F”左邊豎。

使用F模式可以確保頁面上有一個高效的視覺層次結構這樣用戶就可以快速瀏覽內(nèi)容并快速找到相應問題的解決方案。

適用場景：內(nèi)容比較多，用戶通常會用掃描的頁面。

可以看出來我們的視線由“1-2”這三個操作節(jié)點的最為重要：

用到我們常見的“表格頂欄”上的一行操作區(qū)來說，從左到右操作優(yōu)先級依次為“高—中—高（中高）”，1 號位置所在地放置操作類行為是這一行【最高】的；其次是2號位置，最后是中間的 3-4號位置。

根據(jù)尼爾森F模型，我們可以得出幾個心理暗示：

1. 讀者在瀏覽界面時是快速掃視的方式，不會仔細閱讀每一個界面內(nèi)容。
2. 界面的頭兩段文字無比重要，多用小標題、短句引起閱讀者注意。
3. 將重要的內(nèi)容放在最上邊，將重要的信息顯示在標題和段落的前部顯示給讀者。
4. 較少的信息應沿著設計的左邊緣放置，通常應放置在項目符號點上，此處幾乎不需要水平移動眼睛即可將所有內(nèi)容帶入。

二、為何要應用F型瀏覽模式？

F型瀏覽模式將能幫助你創(chuàng)建一個具有良好視覺層級結構的設計，這樣的設計，人們就能很舒服地瀏覽啦。

F型布局方式能遵循人的從上至下、從左至右的閱讀習慣。

三、F型瀏覽模式的應用

F型瀏覽模式適用于以文字為主的網(wǎng)站布局，如果有非常多的內(nèi)容，尤其是大量文本內(nèi)容，用戶會對依照自然掃描格式（也就是上邊說的F型布局模式）的設計布局會有更正向的反應，那么如何使用F型模型：

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

在你布局頁面元素之前，先區(qū)分元素優(yōu)先級和重要度。你希望用戶看到什么，那么就將最重要的內(nèi)容放置在接近頁面上部的位置，以便盡可能快地傳達給用戶網(wǎng)站/頁面的目標。

用戶通常橫向讀取頁面頭部，所以這塊區(qū)域是放置導航欄的好位置。

2. 為掃描而設計，而非為閱讀設計

當我們應用F型瀏覽模型去思考用戶行為方式的時候，可以將用戶最感興趣的內(nèi)容沿著F型瀏覽模型去布局：

• 給予更重要的元素更強的視覺吸引度：使用排版和對比設計來突出文本關鍵字；
• 在左側或右側放置最重要的內(nèi)容，因為這兩個位置是用戶橫向視線掃描開始的起點和終點。這兩處用戶會做短暫停頓，所以能給予用戶額外的時間來進行思考。

3. 利用側邊欄

側邊欄的存在能讓用戶有更深層次的參與感，因此使用側邊欄來推動用戶的參與感：

提供你希望用戶看到的任何內(nèi)容，可以是一個廣告，相關文章系列、社交媒體小部件等，為用戶提供一個挖掘特定內(nèi)容的工具。

如下圖的人人都是產(chǎn)品經(jīng)理，橫向的掃描的終點，放置的是有關聯(lián)但無直接關系的內(nèi)容，比如用戶可能感興趣的：社群入口，廣告，相關文章。

4. 避免千篇一律的布局

F型布局的缺點是比較單調(diào)，用戶很容易就對重復的、相似的內(nèi)容感到厭煩。所以在用戶瀏覽區(qū)域，可以適當添加一些“微妙的元素”或者“打破預期”的布局設計，來保持用戶參與感。

比如下圖：知乎信息列表，在同樣排版的文字信息中間，插入了一個圖文的排版，一下就打破了千篇一律的布局樣式，讓人眼得到休息。

四、F型瀏覽模式的使用注意點

1. F模型更適合用于內(nèi)容區(qū)域以文字為主的網(wǎng)站布局，頁面的前兩段內(nèi)容是重要的，使用視覺處理方式來對標題和副標題進行區(qū)分，增強視覺對比。
2. F型也不是絕對有效的，主要原因是因為這種布局本身的單調(diào)性，用戶會錯過一些重要內(nèi)容。建議在這種布局中加入“突兀的”一行，這種差異有助于保持用戶的注意力。
3. 值得注意的是，因為每行結尾會出現(xiàn)瀏覽中斷，所以這種地方一般用來放置一些廣告或者你想要讓用戶注意到的內(nèi)容，這個位置顯而易見，卻又不會分散用戶在主要內(nèi)容上的注意力。

五、F型模式帶來的弊端，如何解決？

前面說到F型排版的千篇一律帶來的用戶忽視的弊端，會導致用戶只關注左側偏上方內(nèi)容，許多重要的內(nèi)容都會被忽視掉，并且這種模式似乎已應用于網(wǎng)上的所有內(nèi)容。

怎么解決F型模式帶來的弊端？這就需要發(fā)揮設計師的作用，設計合理有效的樣式引導用戶去閱讀。

1. 使用主次標題，與內(nèi)容做區(qū)分

這一點與層狀蛋糕（Kara Pernice提出）的觀點一致，排列結構類似于榴蓮千層蛋糕，一層二層三層… 據(jù)Kara Pernice研究表明，這種模式是目前掃描網(wǎng)頁最有效的方式，用戶更容易找到他們想要找的信息。

下圖是夾層蛋糕模式下的眼動實驗結果：

從上圖分層蛋糕眼動圖表明，小標題（和按鈕）更能引起參與者的注意。

例如我們常見的列表頁，其結構是標題+圖片的瀑布流展示，主標題簡要概括，字號加粗加大，用戶通過掃描標題來發(fā)現(xiàn)感興趣的內(nèi)容，進而再去閱讀相關詳細正文。

2. 頁面最重要的信息要放在前面

這一點不僅針對的是文字內(nèi)容，也針對功能布局，重要的功能盡量放在整個頁面上方，進行放大加粗等對比設計處理，最次要的內(nèi)容放在最下方。

3. 相關內(nèi)容進行分組

采用格式塔接近原則，把功能相關的內(nèi)容整合在一個模塊，整體頁面模塊化，模塊與模塊之間有一定的間距，這樣可以層級清晰，有效減少用戶界面上的視覺凌亂感，快速抓住重點。

4. 使用標簽或者顏色區(qū)分

使用一些特殊的設計技巧，比如顏色區(qū)分、標簽化、增加背景等等對想要突出的內(nèi)容進行突出設計。

5. 使用“點”作為視覺錨點

同級信息流使用點線面中的“點”來做列表視覺錨點設計，比如使用符號、數(shù)字、icon等等來展示。

通過解決F型設計的弊端，可以發(fā)現(xiàn)很多理論本質上都是貫連的，如F型其解決方法就是尼爾森十大交互原則中“易取和簡約原則”的具體延伸，其中也貫連著格式塔原則、對比原則等等。

最主要是看我們?nèi)绾卧趯嶋H工作中，了解清楚設計目標，靈活運用多種設計理論滿足需求，學以致用，讓我們的設計有理有據(jù)！

六、總結

設計一個 F 型的網(wǎng)站布局，意味著順應用戶的自然視覺習慣。反之，如果重內(nèi)容的網(wǎng)站忽視F型，則會強迫用戶重新調(diào)整自己的自然視覺習慣，帶來不必要的沖突。

但是，沒必要完完全全嚴格遵守原則，它只是一個指導準則，而不是一個標準模板。如果要提高用戶的視覺體驗，就需要我們通過優(yōu)化樣式去突出重點，有效引導用戶去瀏覽。

應用建議：

• 原則是設計的基礎，并非一成不變，需要結合設計原則與產(chǎn)品目標之間的關系進行合理運用；
• 不需要死遵循原則，比如焦點模式下用戶將首先查看頁面上最主要的元素（視覺重量最大的元素或區(qū)域）。順序將取決于這些焦點的相對權重以及指示下一步要看的任何視覺提示。
• 想要讓用戶進行某種操作時，正常情況下主要按鈕放在右側，操作流程暢通，提高效率，需要用戶確認思考的場景下，主要按鈕可放在左側，達到反復確認的目的。
• 創(chuàng)建層次結構和流程會顛覆視覺動線的模型。

文中如果有不嚴謹、錯誤的地方希望大家給予指正，希望大家可以多多點贊評論鼓勵下，最后感謝您的耐心閱讀。