編輯導語：在信息量較大的頁面中，設計師需要對頁面內容進行劃分，明確部分內容的優先級，建立信息層級。那么，要如何評價你的設計是否合格，你的優化是否有效？本文作者對頁面信息層級的檢測進行了分析，一起來看一下吧。

當你完成一張產品頁面，用什么方法來評價你的設計是否合格？當你優化好頁面的不足之處，怎樣驗證你的修改是否有效？本文為你介紹單個頁面的信息層級檢測方法，希望對你有所幫助。

01 如何分析頁面信息層級？

在信息量較大的頁面中，設計師需要充分了解產品功能和用戶所需， 對頁面的內容進行劃分，明確各部分內容的優先級， 建立信息層級。 那么究竟該如何劃分頁面的信息層級？通常我們可以從產品設計的角度，可以將頁面信息劃分為3個層次， 重點核心層、次要輔助 層 和 詳 細信息層：

• 重點核心層（吸引用戶）： 是指用戶在短暫的 3-5 秒內瀏覽頁面后， 最能夠吸引他的核心內容 。這部分也是頁面的核心功能、是 頁面最想展示給用戶的內容 ，必須 少而精 ，在設計中需要 突出展示 。
• 次要輔助層（幫助理解）： 是指用戶被重點核心信息吸引后，進一步在頁面中停留 3 – 5 分鐘，就會閱讀 相關的、幫助了解核心內容的輔助 信息 ，如說明信息或其他相關功能，這部分信息 比較重要，但不需要強化展示 。
• 詳細信息層（詳細了解）： 是指更多的信息或補充信息，詳細信息層會以 更多的交互方式展示信息 。這部分 信息并不十分重要，但也需要展示。

02 如何分析用戶行為？

檢測頁面的設計是否有效，需要我們對用戶的行為做分析。我們可以將用戶瀏覽頁面的行為也分為三個層次，分別是： 核心行為層、了解行為層 和 查看更多行為層：

• 核心行為層： 是指用戶首先關注這個頁面核心重點，觸發到的用戶首要、核心行為。
• 了解行為層： 是指用戶產生了解的意愿，繼續了解內容的行為。
• 查看更多行為層： 是指用戶接收到信息后尋求更多信息的行為，如行動按鈕、文字鏈接等交互行為。

通過上述內容，你會發現，如果我們的頁面設計質量高、信息層級傳達得準確無誤，那么 用戶的行為層次 應該會恰好和 頁面的信息層次 相對應。這也是我們進行頁面設計質量檢測的標準之一。當 用戶的核心行為是由設計師設計的重點核心層進行引導， 這說明頁面的重點信息傳達的恰到好處。

03 如何進行頁面信息層級的檢測？

這里給大家介紹的內容大部分來源于 阿里巴巴UED 設計團隊 總結的頁面層級的檢測方法，該方法較為簡單直接，能夠快速而高效地進行成果驗證：

STEP 1. 組織人員測試

通常招募 20 名左右的測試用戶 ，以保證測試的效率和準確率。在招募的同時， 設計師需要準備好頁面信息層次清單， 依照頁面信息的 3 個層次對頁面內容進行劃分，以便在用戶測試完畢后進行對比。

STEP 2. 進行用戶測試

讓測試用戶在 事前安排好的環境中 ，進入瀏覽測試頁面。這里要強調對測試環境有所考慮，因為用戶在實際生活中使用頁面的環境多種多樣，可能會影響到用戶對頁面的信息的接受和理解，除此之外還需要考慮到 設備因素、 用戶身體因素 等等。

1）環境因素

• 視覺上 ：道路顛簸、燈光昏暗、白天日光晃眼等
• 聽覺上 ：周邊聲音過于嘈雜、處于靜音區等
• 觸覺上 ：只能單手持設備交互等

2）設備因素

• 設備的不同型號 ：不同屏幕尺寸的手機、平板等
• 設備的網絡狀況 ：4G、5G、Wi-Fi、網絡連接不通暢等
• 設備的響應速度 等

3）用戶身體因素

• 視覺特點： 近視、弱勢、老花眼等
• 聽覺特點： 耳背、耳聾等
• 其他特點： 記憶力、知識結構、認知水平等

STEP 3. 用戶給出反饋

測試用戶瀏覽完測試頁面，給出相應的反饋，可以是 直觀感受的反饋 ，也可以是對了解到的 信息的提煉 ，測試用戶根據自己的理解和需求對頁面進行信息分層，分出用戶自己認為的 重點核心層、次要輔助 層 和 詳 細信息層 。

在用戶反饋時，設計師也可以嘗試著用提問的方式對用戶加以引導，可以詢問以下問題：

• 第一眼看到這個頁面，您覺得它在表達什么主題？
• 看完這個頁面，您記住了哪些內容？
• 您進入頁面之后的最想了解的內容有哪些？
• 您是否知道下一步該怎么做？

STEP 4. 對比信息層次點

收集完測試用戶的反饋信息后，將其 與設計師最初擬定的頁面信息層次進行對比。

STEP 5. 輸出測試報告及評分

根據對比設計師的信息層次與測試用戶反饋的信息層次的 匹配度 ， 進行綜合評分，并輸出差異點報告 。

04 測試方法舉例

在上述的 STEP 3 “用戶給出反饋” 這一步中，有幾個高效的方法可以借鑒，這些方法用于快速看出 不同的測試用戶接收到的信息是否一致、是否是設計師所想表達的重點核心信息。

1. 極速瀏覽法

測試用戶在 1-4 秒內 快速瀏覽完畢頁面內容， 并在瀏覽完畢后 立刻說出頁面重點信息點、次要信息點等等 。設計師將其信息點與之前列出的信息層次清單 進行對比 ，得出測試結果。

2. 涂抹法

準備可以畫畫的設備，如iPad、帶有手寫板的電腦等，或者直接將頁面打印，準備好畫筆。 設計師和測試用戶分別在同一個頁面上框選出信息區塊， 用不同的顏色區別不同的信息層次， 根據各自的理解將頁面的信息層次涂抹出來 。最后將結果相互對比，得出測試報告。

3. 熱力圖檢測法

通過在頁面上安裝 熱力圖插件 ， 收集用戶的點擊行為 。熱力圖會真實的反映出用戶在頁面點擊了哪些位置。將熱力圖呈現的用戶點擊行為 與設計師想要表達的核心信息相對比， 得出測試結果。

作者：元堯；微信公眾號：長弓小子。

本文由@ 元堯 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。