什么是頁(yè)面信息的有效性？作為設(shè)計(jì)師，如何評(píng)估我們的設(shè)計(jì)是否有效？又如何確保頁(yè)面信息的傳達(dá)是明確且具有針對(duì)性？我們一起接著往下看筆者分享的文章，里邊包含人機(jī)交互界面的定義、用戶行為分級(jí)、頁(yè)面信息分級(jí)、頁(yè)面信息的層級(jí)表現(xiàn)、驗(yàn)證頁(yè)面信息的層級(jí)幾個(gè)方面的相關(guān)內(nèi)容。

最近有同學(xué)提問：為什么領(lǐng)導(dǎo)認(rèn)為我設(shè)計(jì)的頁(yè)面過于平淡，缺乏重點(diǎn)，他在瀏覽時(shí)總是找不到想要的信息。

這個(gè)問題其實(shí)反映出了一個(gè)核心內(nèi)容——頁(yè)面信息的有效性。如何評(píng)估我們的設(shè)計(jì)是否有效？我們?nèi)绾未_保頁(yè)面信息的傳達(dá)是明確且具有針對(duì)性？這些都是我們?cè)O(shè)計(jì)師面臨的挑戰(zhàn)。

這個(gè)問題我們很多同學(xué)都遇到過，今天我們將借助用戶行為的理論，深入拆解和理解頁(yè)面信息的層級(jí)，以此來(lái)揭示如何使頁(yè)面設(shè)計(jì)更具吸引力。一起來(lái)看看吧~

一、人機(jī)交互界面的定義

人機(jī)交互，作為計(jì)算科學(xué)的一個(gè)核心領(lǐng)域，專注于促進(jìn)人與計(jì)算機(jī)之間的有效溝通和互動(dòng)。在互聯(lián)網(wǎng)技術(shù)迅速發(fā)展的背景下，用戶界面設(shè)計(jì)已成為連接用戶和數(shù)字產(chǎn)品的關(guān)鍵橋梁

。這種設(shè)計(jì)不僅關(guān)注于保持產(chǎn)品功能性，還旨在簡(jiǎn)化用戶的學(xué)習(xí)過程，確保他們能夠輕松、迅速地訪問所需信息。

無(wú)論是面向企業(yè)還是個(gè)人消費(fèi)者，用戶界面設(shè)計(jì)的核心在于深入理解用戶的目的和需求。不管用戶是在購(gòu)物應(yīng)用中瀏覽商品、下單，還是在辦公自動(dòng)化系統(tǒng)中管理員工信息，他們的所有操作都通過界面這個(gè)可視的中介進(jìn)行。

因此出色的界面設(shè)計(jì)源于對(duì)用戶行為模型的深刻洞察，并將界面元素如文本或圖像等根據(jù)優(yōu)先級(jí)有條理地展現(xiàn)，以促進(jìn)用戶的有效的交互體驗(yàn)。

二、用戶行為分級(jí)

用戶行為與界面設(shè)計(jì)是相輔相成的，通過基于用戶行為習(xí)慣的設(shè)計(jì)，可以極大地提升產(chǎn)品的用戶體驗(yàn)。

在了解了人機(jī)交互和用戶界面設(shè)計(jì)的重要性之后，我們可以利用5W1H方法來(lái)簡(jiǎn)化和理解用戶的行為邏輯。

5W1H包含了：用戶（Who）在某時(shí)間（When）某地點(diǎn)（Where），因?yàn)橹車霈F(xiàn)了什么事物（What）而產(chǎn)生某種需求（Why），并希望通過某種方法（How）來(lái)滿足這種需求。

簡(jiǎn)單的來(lái)講就是在設(shè)計(jì)一個(gè)頁(yè)面的時(shí)候，我們要站在用戶的角度去看產(chǎn)品，清楚地認(rèn)識(shí)到用戶訪問該頁(yè)面的目的和可能遇到的困惑。借助這種 5W1H 分析，我們可以構(gòu)建出用戶的行為邏輯，這為引入用戶行為分層提供了理論基礎(chǔ)。

根據(jù)用戶的實(shí)際操作場(chǎng)景，他們的行為大致可以分為三個(gè)層次：

1. 核心行為層（用戶的主要目標(biāo)和任務(wù)）：用戶首次訪問頁(yè)面通常是為了解決一個(gè)具體問題或達(dá)成特定目標(biāo)。這種行為以明確的目的性為特點(diǎn)，如搜索關(guān)鍵詞、點(diǎn)擊特定按鈕或完成具體任務(wù)。用戶在這一層次對(duì)與核心任務(wù)相關(guān)的信息和功能表現(xiàn)出更強(qiáng)的關(guān)注。
2. 意愿行為層（用戶在主要任務(wù)后可能的附加活動(dòng)）：在完成核心任務(wù)后，用戶可能希望探索其他相關(guān)信息，如點(diǎn)擊深入鏈接或?yàn)g覽更多內(nèi)容。在這個(gè)層次上，用戶與頁(yè)面的互動(dòng)會(huì)增多，例如選擇興趣標(biāo)簽或定制內(nèi)容。
3. 輔助行為層（額外信息）：當(dāng)用戶滿足了核心需求并深入了解后，用戶可能開始主動(dòng)尋求幫助或查看有關(guān)產(chǎn)品的更多關(guān)于產(chǎn)品的信息。

通過這種分層，我們可以更準(zhǔn)確地定位用戶在不同階段的需求，并據(jù)此設(shè)計(jì)出更符合用戶期望的界面。這不僅提升了用戶體驗(yàn)，還提升了界面的有效性。

三、頁(yè)面信息分級(jí)

在頁(yè)面內(nèi)容布局中，根據(jù)用戶行為的分層來(lái)排列信息的優(yōu)先級(jí)是至關(guān)重要的，直接指導(dǎo)我們?nèi)绾螌?duì)頁(yè)面信息進(jìn)行有效的分層排列。頁(yè)面信息可以根據(jù)用戶的核心行為、意愿行為和輔助行為分為三個(gè)層級(jí)：

1. 重點(diǎn)信息：這些信息對(duì)完成用戶的核心任務(wù)至關(guān)重要，是用戶達(dá)成主要目標(biāo)所需的關(guān)鍵內(nèi)容。在設(shè)計(jì)頁(yè)面時(shí)，這些信息應(yīng)該被突出顯示，確保用戶一打開頁(yè)面就能立即看到并迅速識(shí)別。
2. 輔助信息：這些內(nèi)容提供了與重點(diǎn)信息相關(guān)的輔助內(nèi)容，滿足用戶對(duì)產(chǎn)品的進(jìn)一步了解。在設(shè)計(jì)中，這些信息應(yīng)該被安排在次要位置，讓用戶在需要時(shí)可以選擇性地查看。
3. 補(bǔ)充信息：提供支撐性、學(xué)習(xí)性或其他補(bǔ)充信息，幫助用戶更好地理解產(chǎn)品或提供幫助。可將這些信息放置在頁(yè)面的底部或側(cè)邊欄等相對(duì)不引人注目的位置。

整理到這我們發(fā)現(xiàn)頁(yè)面的信息層級(jí)與用戶行為層級(jí)的一一對(duì)應(yīng)。這種將頁(yè)面信息層級(jí)與用戶行為層級(jí)相對(duì)應(yīng)的策略，不僅使用戶能夠更輕松地完成任務(wù)，而且為設(shè)計(jì)師提供一個(gè)有效的標(biāo)準(zhǔn)來(lái)檢驗(yàn)頁(yè)面的信息結(jié)構(gòu)和設(shè)計(jì)是否合理。通過這種方法，我們可以保證用戶體驗(yàn)的連貫性和高效性。

四、頁(yè)面信息的層級(jí)表現(xiàn)

頁(yè)面信息為了做到層次分明并有效展示用戶的關(guān)注點(diǎn)，通常在位置、空間布局、大小、距離、視覺動(dòng)線等方向做突破。具體可以參考我之前撰寫的交互設(shè)計(jì)7大原則系列文章。

一文搞定交互設(shè)計(jì)7大定律（1）、一文搞定交互設(shè)計(jì)7大定量（2）、米勒定律、接近原則、奧卡姆剃刀原理、特斯勒定律、防錯(cuò)法則。

通過對(duì)這些原則的應(yīng)用，我們可以更好地理解如何通過設(shè)計(jì)細(xì)節(jié)優(yōu)化信息層級(jí)，從而創(chuàng)造出更加人性化且易于使用的界面設(shè)計(jì)。

五、驗(yàn)證頁(yè)面信息的層級(jí)

為了驗(yàn)證信息層級(jí)設(shè)計(jì)的有效性，我們可以通過用戶測(cè)試來(lái)觀察和分析用戶在頁(yè)面上的行為，從而不斷優(yōu)化和改進(jìn)設(shè)計(jì)。在進(jìn)行測(cè)試時(shí)，可以考慮以下幾個(gè)關(guān)鍵方面：

1. 任務(wù)完成效率：測(cè)試不同用戶在識(shí)別關(guān)鍵信息時(shí)的速度和準(zhǔn)確性，確保他們不會(huì)被無(wú)關(guān)信息干擾。
2. 用戶滿意度：通過用戶反饋、調(diào)查或測(cè)試，了解用戶對(duì)頁(yè)面設(shè)計(jì)的滿意度，以及他們是否覺得頁(yè)面提供了足夠的信息支持。
3. 頁(yè)面熱圖和分析：使用工具如熱力圖插件、收集用戶行為分析等，觀察用戶在頁(yè)面上的點(diǎn)擊和瀏覽熱點(diǎn)，以了解用戶的關(guān)注焦點(diǎn)和行為路徑。
4. A/B 測(cè)試：在實(shí)施設(shè)計(jì)更改時(shí)，通過A/B測(cè)試對(duì)比不同設(shè)計(jì)方案，評(píng)估各自在用戶行為和任務(wù)完成效率方面的表現(xiàn)。

這些的測(cè)試方法不僅能驗(yàn)證信息層級(jí)設(shè)計(jì)的有效性，還能為未來(lái)的設(shè)計(jì)迭代提供實(shí)證基礎(chǔ)。

六、寫在最后

深入洞察用戶行為并據(jù)此構(gòu)建信息層級(jí)不僅顯著提升產(chǎn)品體驗(yàn)，還為我們的設(shè)計(jì)方案提供了堅(jiān)實(shí)的依據(jù)，使用戶能夠更加容易地理解和使用我們的產(chǎn)品。

以上只是我針對(duì)頁(yè)面信息層級(jí)展示內(nèi)容的個(gè)人感悟，希望該文章對(duì)你有所啟發(fā)，也歡迎感興趣的同學(xué)一起探討~

今年的Flag就是要輸出交互設(shè)計(jì)系列課程，也期待大家對(duì)我的關(guān)注與監(jiān)督。