編輯導(dǎo)語：信息架構(gòu)的主要任務(wù)是為信息與用戶認知之間搭建一座暢通的橋梁，是信息直觀表達的載體。通俗點說就是信息架構(gòu)不僅僅是設(shè)計信息的組織結(jié)構(gòu)，還需要研究信息的表達和傳遞。那么，我們要如何在 UX 中建立良好的信息架構(gòu)？

作為一個長期研究各種 APP 的專業(yè)人士，設(shè)計師往往會忘記，用戶并不一定和自己一樣可以熟練的理解各種設(shè)計元素的交互功能。在設(shè)計初期，應(yīng)該將目標用戶進行分類，既要滿足新手用戶的需求，也不能影響專家用戶的使用。創(chuàng)造出同時滿足不同用戶級別的視覺層級結(jié)構(gòu)是非常重要的，必須在前期階段就事先思考。

舉一個已經(jīng)在網(wǎng)上廣為流傳的例子，背后的原理是 信息層級結(jié)構(gòu)，視覺元素是根據(jù)它的 重要程度 來排布的。

一張圖上有四句話，讀者根據(jù) 字號 判斷先讀哪一句。在從測試和調(diào)研中收集來的用戶需求和期望的基礎(chǔ)上，首先明確內(nèi)容和交互的優(yōu)先級，確認信息的先后順序和關(guān)聯(lián)性后，才能夠設(shè)計出有重點的交互界面。這些行為是為了引導(dǎo)用戶在閱讀過程中一眼獲取重要信息。

用視覺語言來說，上面的例子只是通過調(diào)整 文案的尺寸 去探索如何設(shè)計頁面層級。同時，通過調(diào)整其他平面設(shè)計元素例如 字重、顏色、透明度 等等也可以達成同樣的效果。當然，這種行為同時適用于 按鈕、菜單欄、表單 等其他控件。

通過距離劃分視覺元素展示它們之間聯(lián)系的基礎(chǔ)前提是 格式塔心理學 組織原則，這是在構(gòu)建數(shù)字界面時所考慮的設(shè)計系統(tǒng)的基礎(chǔ)指導(dǎo)理論。因為用戶一般通過 視覺元素的位置 來判斷閱讀順序，設(shè)計視覺元素和控件的位置是為了促使用戶完成任務(wù)，同時在某些情況下，也會引導(dǎo)用戶去做他們所期望的事。在很多情況下，用戶會自己選擇想看的信息。

“在網(wǎng)絡(luò)上，人們會一目十行而不是逐字逐句的閱讀內(nèi)容。他們一般傾向于付出更少的精力，以高效的方式達成目標?！?/p>

這意味著在一個擁有很多功能的頁面上，用戶會一目十行的迅速尋找他們的目標，因此大部分的視覺信息會被屏蔽。

用戶在網(wǎng)絡(luò)上的閱讀方式高度取決于：

• 用戶的任務(wù)目標
• 用戶習慣
• 頁面層級
• 頁面內(nèi)容形式

這就非常明顯了：最后兩個因素是設(shè)計師可以控制的，并且考慮到網(wǎng)絡(luò)設(shè)計越來越先進，運用知識和技術(shù)推動用戶行為，而不是使電子產(chǎn)品成為用戶的阻礙?；谶@個原因，我提出一個設(shè)計原則。

將用戶分級

有一些人說如果需要在圖標旁邊放一個文字說明，圖標就沒有存在意義了，因為它的認知優(yōu)先級被降低了，成為了識別序列里的一個負擔。因為圖標視覺系統(tǒng)是建立在 邏輯原則 上的（和文字表達的意思相同），所以無論是對于有沒有相關(guān)交互經(jīng)驗的用戶而言，圖標被認為是可以幫助用戶迅速理解功能的。

一個只有文字說明的軟件菜單和同時擁有圖標和文字的菜單相比，圖標可以幫助用戶更快的理解。在上圖中，根據(jù)用戶所期望的功能，可以看到菜單中的圖標帶有要訪問頁面的標題名。接下來，當用戶習慣圖標后，圖標將會更加簡單的引導(dǎo)用戶快速的在界面中尋找到所需要的內(nèi)容。

當設(shè)計一個新界面時設(shè)計師需要知道，頁面必定會被有不同閱讀習慣的人使用。為了促進理解，我會把用戶分成三種人并且定義為：新手用戶、中間用戶、專家用戶。

• 新手用戶：就像你所想象的那樣，這是一個 第一次接觸 這個界面的用戶。如果這個界面是某個系統(tǒng)中的一部分，那意味著始終有某些功能點是他第一次接觸到的。這個趨勢是說，這個等級的用戶理解頁面的速度會低于用戶理解頁面的平均值，并且花費更多的時間去理解語句直到找到所需的內(nèi)容為止。
• 中間用戶：比新手用戶多一些數(shù)字產(chǎn)品的使用經(jīng)驗，但并不是一個界面使用專家，理解界面的時間大概是處于平均值左右。
• 專家用戶：他們已經(jīng)使用這個平臺很多次了，所以可以較快的閱讀，而且并不需要通過閱讀所有的內(nèi)容去理解界面，可以 快速識別元素、布局和交互的視覺呈現(xiàn)。也許正因為這些原因，很多用戶 對產(chǎn)品界面的突然改變抱有抵觸心理。

現(xiàn)在，想想看如果一個投資 APP 每周通過 Email 將以下這個界面發(fā)送給用戶。用戶會不會閱讀上面所有的內(nèi)容呢？每次打開都會閱讀嗎？或者只是閱讀對他比較重要的內(nèi)容？

這個來自金融 APP 的卡片信息展示了用戶的收入?？纯催@個例子，你的閱讀順序是怎么樣的？我可以通過元素的擺放位置、比重、尺寸大小…所形成的視覺層級邏輯來理解它。由于缺乏明確的層級關(guān)系，有一些內(nèi)容無法被精準獲知，必須在事后實際運營的過程中調(diào)試，通過用戶使用數(shù)據(jù)反饋來決定內(nèi)容的優(yōu)先級和必要性，并進行修改（使用 Hotjar，Crazy Egg 之類的熱點地圖可以收集數(shù)據(jù)）。

請注意在這些內(nèi)容中：唯一的 動態(tài)信息 就是整個【 3 】模塊中的重要信息【 4 】中的內(nèi)容。所有的郵件頁面中位于【 1 】的內(nèi)容都是一樣的?！?2 】中的信息是不變的，并且重復(fù)出現(xiàn)在每一封這類型的郵件中，它們都是其認知標識的一部分。

第一次看到的用戶需要理解這是關(guān)于什么內(nèi)容的信息，所以信息全面是非常重要的，但是 并不需要把所有信息都放在突出的位置上?？紤]到這點，通過 減少色彩飽和度、改變字號大小 等降低視覺重量的方式，是不打斷用戶閱讀過程的選擇。

一張展示了用戶收入的來自金融 APP 的 Email 卡片，它應(yīng)用合理排版促進用戶更好的理解信息。

在上面這張卡片里，簡單的改變了內(nèi)容排布，突出了最重要的內(nèi)容。他們展示了 層級關(guān)系 對用戶體驗的影響。一味格式化的信息傳遞被更具個性化、同理心的方法所取代。頭部和底部信息與主體信息相合并，通過這種隔離降低了被突出的可能性。最后，將主按鈕更改為次級按鈕（具體情況要根據(jù)點擊率來決定，主按鈕可能是最好的方式，有背景色的主按鈕更能激起用戶點擊欲望）。

在商業(yè)軟件環(huán)境中，確切的說是在大量的表格中，更多見的是列表標題比每一行的內(nèi)容更加突出。因為標題是固定信息，而且用戶可能每天都會看到，而不是將重要等級修改為 主要和可變內(nèi)容（列表內(nèi)的內(nèi)容信息）。

認識到設(shè)計界面時成本和落地之間的復(fù)雜性，遵循這一思路可以幫助設(shè)計師確定元素優(yōu)先級，并且創(chuàng)建層級關(guān)系以提升用戶的使用體驗。同時，因為引導(dǎo)對新用戶來說是必須的，所以在設(shè)計產(chǎn)品的時候，重要功能需要結(jié)合良好的入門教程、功能提示和及時反饋。這樣便建立了可以提升用戶日活及留存的高效、友好的用戶體驗。

如果您發(fā)現(xiàn)此處介紹的方法有用，請使用它，并與產(chǎn)品的用戶進行測試，得出自己的結(jié)論，然后將結(jié)果作為一種知識形式分享給更多的設(shè)計師（輸出自己的經(jīng)驗總結(jié)）。

原文：https://uxdesign.cc/visual-hierarchy-oriented-by-users-levels-5adc621c42b3

作者：Vinicius Andrade

譯者：鄭伊妮；審核：張聿彤

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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