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

當(dāng)你完成一張產(chǎn)品頁面，用什么方法來評價(jià)你的設(shè)計(jì)是否合格？當(dāng)你優(yōu)化好頁面的不足之處，怎樣驗(yàn)證你的修改是否有效？本文為你介紹單個(gè)頁面的信息層級檢測方法，希望對你有所幫助。

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

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

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

02 如何分析用戶行為？

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

• 核心行為層：是指用戶首先關(guān)注這個(gè)頁面核心重點(diǎn)，觸發(fā)到的用戶首要、核心行為。
• 了解行為層：是指用戶產(chǎn)生了解的意愿，繼續(xù)了解內(nèi)容的行為。
• 查看更多行為層：是指用戶接收到信息后尋求更多信息的行為，如行動(dòng)按鈕、文字鏈接等交互行為。

通過上述內(nèi)容，你會(huì)發(fā)現(xiàn)，如果我們的頁面設(shè)計(jì)質(zhì)量高、信息層級傳達(dá)得準(zhǔn)確無誤，那么用戶的行為層次應(yīng)該會(huì)恰好和頁面的信息層次相對應(yīng)。這也是我們進(jìn)行頁面設(shè)計(jì)質(zhì)量檢測的標(biāo)準(zhǔn)之一。當(dāng)用戶的核心行為是由設(shè)計(jì)師設(shè)計(jì)的重點(diǎn)核心層進(jìn)行引導(dǎo)，這說明頁面的重點(diǎn)信息傳達(dá)的恰到好處。

03 如何進(jìn)行頁面信息層級的檢測？

這里給大家介紹的內(nèi)容大部分來源于阿里巴巴UED 設(shè)計(jì)團(tuán)隊(duì)總結(jié)的頁面層級的檢測方法，該方法較為簡單直接，能夠快速而高效地進(jìn)行成果驗(yàn)證：

STEP 1. 組織人員測試

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

STEP 2. 進(jìn)行用戶測試

讓測試用戶在事前安排好的環(huán)境中，進(jìn)入瀏覽測試頁面。這里要強(qiáng)調(diào)對測試環(huán)境有所考慮，因?yàn)橛脩粼趯?shí)際生活中使用頁面的環(huán)境多種多樣，可能會(huì)影響到用戶對頁面的信息的接受和理解，除此之外還需要考慮到設(shè)備因素、用戶身體因素等等。

1）環(huán)境因素

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

2）設(shè)備因素

• 設(shè)備的不同型號(hào)：不同屏幕尺寸的手機(jī)、平板等
• 設(shè)備的網(wǎng)絡(luò)狀況：4G、5G、Wi-Fi、網(wǎng)絡(luò)連接不通暢等
• 設(shè)備的響應(yīng)速度等

3）用戶身體因素

• 視覺特點(diǎn)：近視、弱勢、老花眼等
• 聽覺特點(diǎn)：耳背、耳聾等
• 其他特點(diǎn)：記憶力、知識(shí)結(jié)構(gòu)、認(rèn)知水平等

STEP 3. 用戶給出反饋

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

在用戶反饋時(shí)，設(shè)計(jì)師也可以嘗試著用提問的方式對用戶加以引導(dǎo)，可以詢問以下問題：

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

STEP 4. 對比信息層次點(diǎn)

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

STEP 5. 輸出測試報(bào)告及評分

根據(jù)對比設(shè)計(jì)師的信息層次與測試用戶反饋的信息層次的匹配度，進(jìn)行綜合評分，并輸出差異點(diǎn)報(bào)告。

04 測試方法舉例

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

1. 極速瀏覽法

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

2. 涂抹法

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

3. 熱力圖檢測法

通過在頁面上安裝熱力圖插件，收集用戶的點(diǎn)擊行為。熱力圖會(huì)真實(shí)的反映出用戶在頁面點(diǎn)擊了哪些位置。將熱力圖呈現(xiàn)的用戶點(diǎn)擊行為與設(shè)計(jì)師想要表達(dá)的核心信息相對比，得出測試結(jié)果。

作者：元堯；微信公眾號(hào)：長弓小子。

本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。