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

F型瀏覽模型是內容網站的首選布局模型，比如新聞網站、博客或著陸頁。當我們解釋完它的作用和原因時，你就會開始注意到，大量知名網站都在這樣做。

什么是F模型？

F型是用戶瀏覽內容版塊時最常用的掃描瀏覽模式。

它是指，讀者會首先從左往右以水平線方向瀏覽，這種瀏覽習慣是很容易理解的，然后，用戶會從屏幕最左邊垂直往下瀏覽，從段首句或小標題中尋求自己感興趣的關鍵詞或內容。找到后，他們又會開始從左到右正常閱讀，形成（“F”的第二條）水平線。最終就形成了一個字母 F 或 E的形狀。

如《2014 Web UI模式》中所述，CNN和紐約時報都使用了F型。

尼爾森·諾曼集團的 Jakob Nielson 曾做過一項基于 232 名用戶瀏覽上千個網站的可讀性研究，并詳細闡述了 F 模型的實際意義：

• 用戶很少會閱讀文本中的每一個字（實際上，平均只有20％的人會全部閱讀）
• 前兩個章節最重要，是保證留存的關鍵
• 一段話只表達一個觀點
• 開啟新段落或新章節時，使用吸引眼球的關鍵詞

這將如何影響你的網站的界面設計？且往下看。

如何運用F型

下圖來自 Brandon Jones 的課題研究，F型可視化的樣子。

顯然，你要把最優質、最能吸引人的內容放在最上方，而左上角（見圖中點 1）就像一個整體錨點，一定會被關注到。這也是為什么許多公司的 Logo 會放在這里。

通常來說，設計師會把導航條放在頂部，從左上角（見圖中點 1）到右上角（見圖中點 2），方便用戶點擊及搜索關鍵詞，設計師們對導航條的設計也各有不同：輕細的導航條會讓用戶進一步瀏覽下方的其他內容，厚重的導航則會讓用戶更多的關注到導航條本身，而不是下方的內容。

第一行之后，用戶就會來到下一個關鍵節點（見圖中點 3）并做同樣的動作（到圖中點 4）。理論上，用戶會繼續往下瀏覽，直到他們找到感興趣的內容。但實際情況是，他們很可能在幾秒后就走人了，除非你能繼續吸引住他們。

因此，為了打破頁面的單調，專家們建議設計師在第二行或第三行（即“F”的第二橫或“E的第三橫）之后，借助一些“突兀的”元素來“破壞”整體布局的連續性。利用一些設計上的變化來保持視覺刺激。常用的做法是，在每過1000像素的版塊后方就來一些不一樣的布局設計。

比如下面的例子：

值得注意的是，因為每行結尾（如圖中2和4等右側的點）會出現瀏覽中斷，所以這種地方一般用來放置廣告。這也是為什么你總能在某一行結尾處看到“電子書新鮮出爐啦”之類的廣告。

這種廣告就很好地應用在F模型上，因為它們的位置顯而易見，卻又不會分散用戶在主要內容上的注意力。內容永遠是最重要的，只有當你要將用戶帶到更深的一個層級時，才應該布置側邊欄。

在F型下，右側邊欄的主要作用有二：

• 放置有關聯但無直接關系的內容——任何你想展示給用戶，卻與主內容無關緊要的，比如廣告、其他文章鏈接、社交媒體控件等。
• 作為一個搜索工具——可以明顯地布置一個搜索欄，或者分類列表、標簽云、“熱門文章”控件等。

上面的內容可能短時間難消化，所以，下面會舉一些例子：

紐約客向我們展示了F型的廣告布局在網站中是很適用的。頂部David Yurman的廣告很顯眼，但好在主內容中使用了一張紅色照片，廣告并不會喧賓奪主。如前面所說，這個廣告還放在了第二行結尾處，在換行瀏覽中斷時就能看到。

F型同樣適用于文字不多的網站。

iZettle 在其首頁運用了非常規的F型。實際上，它采用了一種F和Z的混合模型布局（后面將提到）。

通過加入一句主文案（“Grow your business with iZettle”），并在大背景圖上添加一個按鈕來避免模板化。我們認為，在布局設計時可以參考這個案例，他們最低限度地采用了F型。當然，還有許多視覺上更為誘人的案例可以參考，但這個也是不錯的。

這個模型為何有效？

設計師們都在采用F型，是因為它模擬了用戶的自然視覺模式。大部分人在他們一生中都是從上到下，從左到右地閱讀。

順應趨勢去設計一個 F 型的網站布局，意味著順應用戶的自然視覺習慣。反之，如果重內容的網站忽視F型，則會強迫用戶重新調整自己的自然視覺習慣，帶來不必要的沖突。

網站布局會影響轉化，所以，了解屏幕這塊不動產的價值則至關重要。拿Freespee來說，當他們將網站重新設計成上圖版本后，通過 A/B test 顯示，在相同的廣告開支下，只是簡單地將電話號碼放在右上角更重要的位置，就能提升 30％ 的電話轉化率。

那么，讓我們來仔細分析下它的厲害之處：

• 用戶會自然而然地從圖中點 1 位置開始瀏覽導航，搜索或做其他動作，故而左上方的 Logo 能吸引用戶。
• 右上方的電話號碼（圖中點 2 位置）首先就能鼓動用戶，而它綠色高亮的效果更進一步吸引了用戶。
• 網頁的主體里，簡潔的文案放在了點 3 位置。這些文字的排版也恰似一個迷你版 F 型，所以用戶會自然而然地看到下方的按鈕。

但F型也不是絕對有效的，主要原因是因為這種布局本身的單調性——用戶很容易就因為每行內容的重復和相似而厭倦。這也是為什么建議在這種布局中加入“突兀的”一行，這種差異有助于保持用戶的注意力。

如上圖，Kickstrater 將網頁分成了明顯的三行結構。第三行則是“古怪的”那一行，通過一些垂直部件（剛好在 1000 像素左右的高度）與前面的布局模式區別開來。

注意，用戶通常使用F模型下瀏覽大塊兒的內容，然后根據情況調整，以適應你的網站品牌和風格。如果你要修改這個模型，請確保你遵循 A List Apart 針對設計比例和網格所說的規則來做。

值得一提的內容

F模型不僅僅適用于文本。

要展示多樣化的內容，免不了對內容進行組織整理。F模型僅僅遵循了人眼（運動）的共同趨勢。因此，你可以根據自己的布局做不同的優化處理。它只是一個指南，而不是一個模板，不用完全照搬。哪怕你只是想添加一個按鈕來強化頂部導航欄，小調整也可能帶來大不同。

作者：Jerry Cao

原文：http://thenextweb.com/dd/2015/04/10/how-to-design-websites-that-mirror-how-our-eyes-work/

來源：IXDC