文章深入探討了Jesse James Garrett在2007年提出的用戶體驗五要素方法論，這是一種從戰(zhàn)略、范圍、結(jié)構(gòu)、框架到表現(xiàn)的自下而上的建設(shè)用戶體驗的系統(tǒng)性方法。這種方法論因其普適性和實戰(zhàn)指導(dǎo)性，在產(chǎn)品體驗設(shè)計中被廣泛采用。文章詳細(xì)解釋了每個層面的含義、重要性以及如何應(yīng)用，旨在提升團(tuán)隊設(shè)計效率、專業(yè)性和影響力。

設(shè)計方法論是能夠不斷復(fù)用、貼近真理的一般性規(guī)律，幫助分析和解決問題即從經(jīng)驗中總結(jié)出科學(xué)的規(guī)律，然后把這個規(guī)律用在該條件的具體事項上的過程，學(xué)習(xí)和應(yīng)用設(shè)計方法論可以提升團(tuán)隊設(shè)計效率和專業(yè)性、以及團(tuán)隊影響力。

一、什么是用戶體驗要素

Jesse James Garrett在2007年出版了《用戶體驗要素》一書，提出了從5個要素自下而上的建設(shè)用戶體驗。五要素分別為：戰(zhàn)略、范圍、結(jié)構(gòu)、框架、表現(xiàn)。

• 戰(zhàn)略層關(guān)注的問題是為什么做？—— “我們?yōu)槭裁匆_發(fā)這個產(chǎn)品？”
• 范圍層關(guān)注的問題是做什么？——“我們要開發(fā)的是什么？”
• 結(jié)構(gòu)、框架、表現(xiàn)層則需要解決怎么做？——“我們?nèi)绾芜_(dá)到上述抽象層面所定義的問題？”

這五個層面提供了一個建設(shè)用戶體驗的基本架構(gòu)，自下而上是一個從抽象到具體的過程。此理論因為其超強(qiáng)的普適性和實戰(zhàn)指導(dǎo)性被廣為流傳為產(chǎn)品體驗設(shè)計中經(jīng)典的方法論。

二、用戶體驗要素適用于什么場景？

此理論提供了一種結(jié)構(gòu)化的產(chǎn)品設(shè)計思維框架，運(yùn)用這種思維框架，可以幫助我們從抽象的需求到具體的頁面呈現(xiàn)，循序漸進(jìn)地完成設(shè)計。它適用于各類互聯(lián)網(wǎng)產(chǎn)品設(shè)計（網(wǎng)站、APP、H5、小程序等）。

三、怎么使用用戶體驗要素？

1. 戰(zhàn)略層：理解產(chǎn)品目標(biāo)和用戶需求

成功的用戶體驗，其最核心的基礎(chǔ)，是一個被明確表達(dá)的“戰(zhàn)略目標(biāo)”。知道企業(yè)和用戶雙方對產(chǎn)品的目標(biāo)和期許，有助于促進(jìn)各方面戰(zhàn)略的確立和制定。

這一層我們要回答兩個問題：—我們要通過這個產(chǎn)品得到什么？—我們的用戶要通過這個產(chǎn)品得到什么？相對應(yīng)的，我們就要確定從企業(yè)的產(chǎn)品目標(biāo)和用戶需求。

（1）產(chǎn)品目標(biāo)

① 商業(yè)目標(biāo)：企業(yè)為了達(dá)成盈利的目的需要產(chǎn)品滿足的目標(biāo)，具體的目標(biāo)和互聯(lián)網(wǎng)產(chǎn)品的盈利模式有關(guān)；

例如：應(yīng)用商店以CPD為主要盈利方式，商業(yè)目標(biāo)是提升應(yīng)用下載量；

②?品牌識別：企業(yè)希望向用戶傳達(dá)的品牌形象和調(diào)性。一方面，是較為淺層的視覺設(shè)計，即：商標(biāo)、色彩和字體設(shè)計等；另一方面，更深層的，是用戶在與產(chǎn)品交互時，（有意或無意）刻印在用戶腦海中關(guān)于企業(yè)的品牌形象。

例如：提起海底撈就能想到他們無微不至的服務(wù)體驗。

③?成功標(biāo)準(zhǔn)：為了衡量產(chǎn)品目標(biāo)是否實現(xiàn)，需要設(shè)立一些成功標(biāo)準(zhǔn)。標(biāo)準(zhǔn)可以通過定量的量化數(shù)據(jù)反饋進(jìn)行衡量，也可以通過用戶調(diào)研產(chǎn)生的定性結(jié)論來進(jìn)行衡量。

例如：通過頁面訪問埋點來衡量用戶活躍是否達(dá)到目標(biāo)；通過用戶訪談了解用戶對品牌的印象。

（2）用戶需求

① 用戶細(xì)分：

首先要明確需要解決哪一類用戶的需求，常用的方法包括根據(jù)人口統(tǒng)計學(xué)特征、用戶行為、用戶生命周期等方式區(qū)分用戶，目前行業(yè)內(nèi)也有成熟的方法論和運(yùn)營工具，在此就不詳細(xì)闡述。

② 用戶研究：

通過一定的用戶研究方法了解用戶的心理、行為特征和習(xí)慣，有助于我們設(shè)計更加符合用戶心智的產(chǎn)品。常用的用戶研究方法包括問卷調(diào)查、用戶訪談、焦點小組、可用性測試等，此處也不對方法內(nèi)容做過多詳細(xì)的介紹，感興趣的可以閱讀推薦書籍《設(shè)計調(diào)研》。

③ 用戶畫像：

給目標(biāo)用戶群提供一個典型的人物側(cè)寫，幫助我們歸納目標(biāo)用戶的行為習(xí)慣、心理動機(jī)、需求和痛點。它可以幫助我們在產(chǎn)品設(shè)計過程中，時刻提醒我們的目標(biāo)用戶是誰，杜絕把自己代入為用戶。用戶畫像的內(nèi)容一般是基于定性和定量研究總結(jié)得出的，不是我們憑空想象的，具體的用戶畫像建立方法在此也不做過多介紹。

2. 范圍層：明確產(chǎn)品的功能和內(nèi)容

當(dāng)把產(chǎn)品目標(biāo)和用戶需求轉(zhuǎn)變?yōu)楫a(chǎn)品應(yīng)該提供給用戶什么樣的功能或內(nèi)容時，戰(zhàn)略就變成了范圍。它本質(zhì)上就是把虛無縹緲的需求，變成踏實可見的功能。在范圍層中，需要輸出功能規(guī)格和內(nèi)容需求。

（1）功能規(guī)格：指的是產(chǎn)品所包含的功能和流程，在日常工作中通常是以需求文檔的形式呈現(xiàn)。

（2）內(nèi)容需求：指的是產(chǎn)品內(nèi)需要運(yùn)營支持的內(nèi)容信息。比如新聞類產(chǎn)品，哪怕設(shè)計好了這款產(chǎn)品的全部功能，它的核心還是供用戶閱讀的新聞內(nèi)容，這些新聞內(nèi)容不是設(shè)計師能設(shè)計出來的。

3. 結(jié)構(gòu)層：設(shè)計用戶行為和內(nèi)容信息架構(gòu)

（1）交互設(shè)計

書里提到的交互設(shè)計和目前的互聯(lián)網(wǎng)交互設(shè)計概念有很大的不同。作者認(rèn)為交互設(shè)計應(yīng)該重點關(guān)注用戶的行為，即系統(tǒng)如何配合與相應(yīng)用戶的行為，主要考慮跳轉(zhuǎn)邏輯和任務(wù)流程。（在如今的互聯(lián)網(wǎng)行業(yè)，交互設(shè)計的概念則范圍更廣，包括任務(wù)流程、信息架構(gòu)和界面設(shè)計等）

示例：vivo錢包中的解鎖流程

（2）信息架構(gòu)

信息架構(gòu)考慮的是內(nèi)容的分類組織方式，讓用戶能夠高效、有效地游覽內(nèi)容。常用的結(jié)構(gòu)類型有：①?樹形結(jié)構(gòu)（層級結(jié)構(gòu)）：最常見的結(jié)構(gòu)，每個節(jié)點都有父節(jié)點，層層嵌套。

例如vivo的“設(shè)置頁”就是一處節(jié)點，通過它可以打開下一層級的“聲音”、“顯示”、“通知”等新節(jié)點，這樣層層嵌套

②?矩陣結(jié)構(gòu)：這種結(jié)構(gòu)的優(yōu)勢是可以讓帶著不同需求的用戶各自找到他們想要的東西。

例如某點評網(wǎng)站的分類導(dǎo)航，它在同一層級里采用了多種不同的分類方式，用戶通過不同的選擇方式，都可以通往他想要的店鋪

③?線性結(jié)構(gòu)：線性結(jié)構(gòu)的特點是每一步都只有一個出口和一個入口，用戶在當(dāng)前頁面要么返回，要么進(jìn)行下一步。

示例：vivo錢包借款流程

4. 框架層：界面元素、導(dǎo)航、信息設(shè)計

框架層是產(chǎn)品設(shè)計真正開始變得具體的一個層面，有以下三方面需要注意：

（1）界面設(shè)計

界面設(shè)計提供給用戶做某些事的能力，讓用戶接觸到具體功能。書中提到的“界面設(shè)計”特指選擇正確的界面元素（控件/組件），并對界面元素進(jìn)行合適的位置布局，讓用戶容易理解和接受，從而幫助他完成任務(wù)。是“以任務(wù)為導(dǎo)向”的功能型產(chǎn)品需要重點關(guān)注的部分。

互聯(lián)網(wǎng)設(shè)計發(fā)展到現(xiàn)在，已經(jīng)有各種成熟的設(shè)計規(guī)范可以參考，設(shè)計師需要掌握的基本專業(yè)能力就是對各類型平臺的設(shè)計規(guī)范有一定的了解，并且能熟練運(yùn)用合適的設(shè)計模式來解決實際用戶場景的問題。

示例：vivo部分組件

（2）導(dǎo)航設(shè)計

導(dǎo)航設(shè)計提供給用戶去某個地方的能力，在互聯(lián)網(wǎng)產(chǎn)品中用戶容易“迷路”，通過導(dǎo)航設(shè)計，來彌補(bǔ)用戶缺失的空間感，營造“位置”的感覺。是“以信息為導(dǎo)向”的信息型產(chǎn)品需要重點關(guān)注的部分。

依托于不同的載體，導(dǎo)航也有不同的方式。例如在網(wǎng)站上，常用的導(dǎo)航方式包括“導(dǎo)航菜單”、“下拉菜單”、“面包屑”、“固釘“、“分頁”等。在移動端上，常用的導(dǎo)航包括“底部標(biāo)簽欄”、“側(cè)邊抽屜”、“標(biāo)簽頁”、“列表”、“宮格”等?????

vivo官網(wǎng)導(dǎo)航和官網(wǎng)、游戲中心、商店、錢包導(dǎo)航示例

（3）信息設(shè)計

信息設(shè)計是指提供呈現(xiàn)信息的方法，使用戶更容易使用和理解。信息設(shè)計跨越了功能型產(chǎn)品和信息型產(chǎn)品的邊界，業(yè)務(wù)無論是界面設(shè)計還是導(dǎo)航設(shè)計，都需要良好的信息設(shè)計的支持。它包括兩個關(guān)鍵點：“信息排序”和“分類整理”。

每個界面上呈現(xiàn)的信息都有重要程度上的排序，優(yōu)先展示重要的信息，把不重要的信息隱藏起來。將同類信息進(jìn)行歸類，把相關(guān)性強(qiáng)的信息放在一起體現(xiàn)他們的關(guān)聯(lián)性，這些都是我們常用的信息整理方法。

信息經(jīng)過整理重組以更加直觀符合認(rèn)知的方式呈現(xiàn)給用戶。

5. 表現(xiàn)層：創(chuàng)造感知體驗

表現(xiàn)層要做的是將框架層得到的邏輯排布進(jìn)行感知呈現(xiàn)。在這一層，內(nèi)容、功能和美學(xué)匯集到一起來產(chǎn)生一個最終設(shè)計，完成其他四個層面的所有目標(biāo)，并同時滿足用戶的感官感受。

（1）忠于眼睛

用戶在使用產(chǎn)品時的視線移動是評估視覺設(shè)計的好方法。即使沒有精密的眼球追蹤儀器，也可以通過和用戶交流來詢問他們的視線移動。如果一個設(shè)計是成功的，那么用戶眼睛的移動軌跡的模式應(yīng)該有以下兩個重要特點：①遵循一條流暢的路徑；② 為用戶提供有效的引導(dǎo)。

（2）對比和一致性

對比可以突出事物并吸引用戶注意力。對比要足夠徹底，讓差異足夠明顯，以免用戶困惑一致性能使設(shè)計有效地傳遞信息，而不會導(dǎo)致用戶的迷惑和焦慮，包括內(nèi)部一致性和外部一致性。內(nèi)部一致性是指一個產(chǎn)品本身應(yīng)該保持一致，對于那些在產(chǎn)品中反復(fù)出現(xiàn)的設(shè)計元素，應(yīng)該只做一次設(shè)計，然后在不同的環(huán)境中應(yīng)用它們，在有需要的時候進(jìn)行一些調(diào)整。外部一致性是指產(chǎn)品與同企業(yè)下的其他產(chǎn)品保持一致性，這有助于傳達(dá)一種統(tǒng)一的品牌識別形象。企業(yè)通常應(yīng)該有專屬的設(shè)計規(guī)范，根據(jù)統(tǒng)一的規(guī)范設(shè)計產(chǎn)品可以保證一致性。

（3）配色和排版

色彩可能是向外界傳遞品牌識別的一個最有效的方法。核心的品牌色彩通常是一個更廣泛的配色方案的一部分。在顏色選用上，仍然要注意對比和一致性。排版會影響信息傳達(dá)，也會影響視覺效果。應(yīng)要遵循格式塔原則，可以幫助我們設(shè)計出信息傳達(dá)效率高的排版布局。

四、總結(jié)