人們通常不會閱讀網頁，應用程序甚至文章或文本段落中的每個單詞。相反，他們經常進行瀏覽 -因為他們在許多網站上的經驗告訴他們，瀏覽可以用更少的時間和精力來提供幾乎相同的價值(即信息量)。

頁面的可視化布局結構方式在人們瀏覽內容方面起著重要作用。如果頁面布局允許用戶快速識別與他們的需求相關的基本信息，則用戶將節省大量精力，并且能夠快速實現其目標。但是，另一方面，如果布局不強調重要信息，則人們可能會錯過它。

內容瀏覽Layer-Cake模式：Layer-Cake瀏覽模式主要由頁面標題和副標題上固定的內容組成，中間的(正文)文本上偶爾會有刻意的固定內容。在眼動圖或凝視圖中，此圖案看起來像一組水平條紋和它們之間的空白，類似于層蛋糕(先將蛋糕放在水平面上，然后是糖霜，然后是蛋糕，依此類推)

Layer-Cake模式可以確保用戶會發現他們的要尋找的信息。如下圖所示，顯示了一個Layer-Cake瀏覽模式的示例：大多數注視都在文章的子標題上。凝視圖顯示了從研究參與者在Techcrunch.com上閱讀文章時收集到的眼球運動。他們在當前頁面上瀏覽，以標題在視覺上不同于正文的方式完成了工作，然后閱讀了下面的文字。然后，他瀏覽了更多的子標題- 公交系統具有創新所需要的成功-內置的大規模用戶群，并且存在期望差距。描述性副標題使用戶可以輕松跳過相關正文中不那么有趣的內容。

如何創建有效的內容瀏覽

有效的內容瀏覽是為了幫助用戶能快速的獲取目標信息，在內容展示時：

設置標題或者對于重點信息進行標記，能讓用戶輕松的識別。

標題能正確的總結與之相關的文本部分。

有效的查看標題所對應的文本內容(標題是對哪部分文本的總結)。

段落和段落之間增加間距，每個標題和所對應的內容之間增加間距。

同類型標題的顏色統一，在視覺呈現上一致，方便用戶能快速識別標題。

如下圖展示的正文頁內容，左側是當前web網頁文本信息，右側是對當前文本信息進行重點標記，左右兩圖對比后不難發現，右邊的信息用戶更容易發現重點。

在設計標題和重要信息提示時，通過視覺文字效果可以使得標題突出：

• 標題的顏色和文本區分。
• 使用較大的字體。
• 使用不同的字體。
• 使用加粗、陰影、下劃線(當使用下劃線時強調標題也是一個超鏈接)。
• 增加圖標，以上所有效果混合。

在使用的時候，也需要注意，不要使內容標題比正文大的離譜，或者顏色的差異過大，導致用戶錯把標題當成促銷或者廣告，從而忽略該部分。同時也需要注意正文文本，副標題，頁面標題和鏈接應如何設計區分。

www.edwardjones.com上的頁面以較細微的方式區分了標題和正文，但仍使副標題易于瀏覽和查看。正文和標題使用相同的字體(ProximaNova)，但標題為粗體且比正文大。這些視覺處理足以使小標題看起來與正文不同。

有效標題的內容準則

由正文和標題組成的內容展示也反映了頁面的信息結構。標題使瀏覽文本頁面變得容易，而全局導航使瀏覽站點變得容易。好的標題可以幫助用戶確定某個部分是否值得閱讀，好的分類名稱可以幫助人們理解應該導航到哪里以完成任務。

內容作者和編輯者需要通過以下方式為用戶提供清晰的內容層次結構：

• 確定頁面內容的優先級和順序：組織文本，使讀者覺得有意義。
• 簡明扼要：刪除多余的內容。
• 分塊：將內容分成大塊，如段落或列表。將相關內容放在一起。

完成這些操作后，請細化標題中使用的詞，以便在瀏覽時提供最多的信息。制作副標題：

• 描述本節中的所有主題，并且僅描述本節中的主題：使用包含與標題相關的所有正文，以便用戶了解本節中可用的所有內容。
• 描述的只是部分的主題：要簡潔，只描述了出現在與標題相關的正文概念和詞語。不要使標題太寬泛以至于它似乎包含的內容超過了正文中的內容
• 以一些最重要的詞語開頭：帶有信息的詞會立即給人們提供標題的重點。
• 可以理解：使用清晰的語言，以便用戶在瀏覽標題時可以快速理解其含義。

對所有頁面進行分塊和標記，而不僅僅是文本

了解用戶瀏覽網頁的方式，我們知道具有系統布局的頁面易于瀏覽；無序和不可預測的頁面則不易瀏覽。當布局包含一個或多個文本列時，標題允許用戶快速確定哪個文本與哪個標題一起使用。然而，當頁面使用卡片或其他不規則格式時，重要的是使用格式塔接近原則來表示哪些標題或標簽與哪些正文或一起使用。

混合內容的頁面仍然可以按照與文本布局相同的原則進行瀏覽。明確地：

1、確定喜歡的內容并放在一起。

2、視覺上區分內容塊。使用以下命令執行此操作：

• 一種網格或其它圖形系統，包括每個塊周圍的邊框或彩色背景(如卡片、橫幅)。
• 確保每個模塊塊之間適當的間距。

3、適當時，用清晰的標題標記每個內容塊。

當頁面以這種方式設計時，用戶通常會瀏覽一系列的小蛋糕圖案，尋找指示內容部分內容內容的文本。

當圖像上方和下方的文本片段看起來與該圖像的距離相等時，用戶很難判斷哪些內容與圖像相關。在《芝加哥論壇報》網站一頁的凝視圖中，用戶先看一張圖片(上圖)，然后看下面的文字，再看下面不相關的圖片，然后回溯到中間的文字和上面的圖片。回溯表明，用戶需要修正幾次，以決定與哪個圖像的文本。

用戶瀏覽web頁面時的Layer-Cake模式與F模式

與F模式(通常在從文本中提取正確信息時不是很有效)不同，Layer-Cake模式可以引導用戶找到頁面上的正確位置(前提是標題有意義并且代表下面的內容)。一旦人們確定了感興趣的部分，他們就可以仔細閱讀。

www.vogue.com時尚網沒有任何副標題，這使得瀏覽很困難。以這種方式排列的文本通常以F模式瀏覽。

結論

分塊內容和指定清晰的、描述性的標題，這些標題從頁面上的其他文本和內容中脫穎而出，從而成倍地提高了內容的可用性，因為它們支持Layer-Cake瀏覽模式，而層餅Layer-Cake瀏覽模式不同于其相對的F模式，通過允許用戶快速識別與其任務最相關的內容，提高用戶的效率。

總結

以上是生活随笔為你收集整理的layer加载的页面偶尔出现空白_Layer-Cake 模式的设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。