用戶體驗詞條-9.什麼是頁面布局(Layout)

來自專欄 產品設計與用戶體驗

【詞條】

就是對頁面的文字、圖形或表格進行排布、設計。

優秀的布局，需要對頁面信息進行完整的考慮。即要考慮用戶需求、用戶行為，也要考慮信息發布者的目的、目標。

對用戶行為的迎合和引導，有一些既有原則和方法，比如：

1. 公司/組織的圖標（Logo）在所有頁面都處於同一位置。

2. 用戶所需的所有數據內容均按先後次序合理顯示。

3. 所有的重要選項都要在主頁顯示。

4. 重要條目要始終顯示。

5. 重要條目要顯示在頁面的頂端中間位置。

6. 必要的信息要一直顯示。

7. 消息、提示、通知等信息均出現在屏幕上目光容易找到的地方。

8. 確保主頁看起來像主頁（使主頁有別於其它二三級頁面）。

9. 主頁的長度不宜過長。

11. 頁面長度要適當。

12. 在長網頁上使用可點擊的「內容列表」。

13. 專門的導航頁面要短小（避免滾屏，以便用戶一眼能瀏覽到所有的導航信息，有全局觀）。

14. 優先使用分頁（而非滾屏）。

15. 滾屏不宜太多（最長4個整屏）。

16. 需要仔細閱讀理解文字時，應使用滾屏（而非分頁）。

17. 為框架提供標題。

18. 注意主頁中面板塊的寬度。

19. 將一級導航放置在左側面板。

20. 避免水平滾屏。

21. 文本區域的周圍是否有足夠的間隔。

22. 各條目是否合理分類於各邏輯區，並運用標題將各區域進行清晰劃分。

這些原則可以保證頁面在布局方面最基本的可用性。

【案例】

頁面布局和眼動軌跡研究

眼動研究是隨著用戶體驗的興起與技術設備的進步，而興起的一種用戶研究方法。它是眼動技術與研究方法的二合一，通過眼動研究觀察被試者對移動應用頁面的注視軌跡，輔助完成用戶體驗設計。

眼動研究是可用性測試、問卷調查、後台數據挖掘等研究手段難以企及的。通過眼動研究，不但可以完整地還原被試者在各個頁面的注視軌跡，還可以通過劃分興趣區分析被試者在各區域內容的關注度。眼動研究提供的信息不只是人們是怎樣「看」東西的這麼簡單，眼動反映了人腦的信息處理過程，眼動模式的特點與腦的信息處理都有密切的關係。它的具體價值體現為以下幾點：

1. 獲悉用戶行為習慣

當用戶打開一個頁面，用戶看了些什麼，沒有看什麼？什麼東西最先獲得用戶的關注？這些信息很重要，因為很多時候用戶關的東西與設計希望用戶看到的是不一樣的，這種差別會通過眼動數據顯示出來。例如手機界面設計師將一個重要的按鈕做得非常顯眼以便用戶看到，而用戶會對這個大按鈕視而不見，眼睛卻在滿屏幕轉，因為他將過於突出的按鈕當成了廣告。

2. 幫助分析與澄清問題

在可用性測試中，遇到用戶既無動作也不說話時，研究人員是最迷惑的。此時用戶很可能執行任務受阻，研究人員需要決定何時提醒用戶繼續出聲思維（think aloud）。而通過實時的眼動記錄觀測，研究人員可以間接地了解用戶的處境——用戶是在尋找什麼東西，還是有什麼東西令用戶困惑（來回注視），還是用戶忽視了相關的重要元素？研究人員還可以帶著觀點假設，開展眼動研究來驗證或否決，發現導致問題的真正原因。

3. 實現研究結果可視化

呈現眼動研究結果最常用到的是熱點圖（heatmap），顧名思義，熱點圖呈現的是人們視線的「熱點」，顏色越紅的區域代表被聚焦得越多。通常這樣的結果圖非常吸引人，因為看起來一目了然，是「一圖勝千言」的好代表。研究人員喜歡展示這樣有說服力的圖，觀眾也喜歡看簡單直觀的結果。所以眼動圖作為可視化手段起到了良好的信息傳達作用。

眼動軌跡的研究，對頁面布局的優化，有重要的指導意義。