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

一、什么是<用戶體驗(yàn)要素>

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

戰(zhàn)略層關(guān)注的問(wèn)題是為什么做？—— “我們?yōu)槭裁匆_發(fā)這個(gè)產(chǎn)品？”

范圍層關(guān)注的問(wèn)題是做什么？——“我們要開發(fā)的是什么？”

結(jié)構(gòu)、框架、表現(xiàn)層則需要解決怎么做？——“我們?nèi)绾芜_(dá)到上述抽象層面所定義的問(wèn)題？”

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

二、<用戶體驗(yàn)要素>適用于什么場(chǎng)景？

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

三、怎么使用<用戶體驗(yàn)要素>？

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

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

這一層我們要回答兩個(gè)問(wèn)題：

1. 我們要通過(guò)這個(gè)產(chǎn)品得到什么？
2. 我們的用戶要通過(guò)這個(gè)產(chǎn)品得到什么？

相對(duì)應(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)用下載量；

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

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

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

例如：通過(guò)頁(yè)面訪問(wèn)埋點(diǎn)來(lái)衡量用戶活躍是否達(dá)到目標(biāo)；通過(guò)用戶訪談了解用戶對(duì)品牌的印象

2）用戶需求

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

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

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

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

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

1. 功能規(guī)格：指的是產(chǎn)品所包含的功能和流程，在日常工作中通常是以需求文檔的形式呈現(xiàn)。
2. 內(nèi)容需求：指的是產(chǎn)品內(nèi)需要運(yùn)營(yíng)支持的內(nèi)容信息。比如新聞?lì)惍a(chǎn)品，哪怕設(shè)計(jì)好了這款產(chǎn)品的全部功能，它的核心還是供用戶閱讀的新聞內(nèi)容，這些新聞內(nèi)容不是設(shè)計(jì)師能設(shè)計(jì)出來(lái)的。

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

1）交互設(shè)計(jì)

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

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

2）信息架構(gòu)

信息架構(gòu)考慮的是內(nèi)容的分類組織方式，讓用戶能夠高效、有效地游覽內(nèi)容。常用的結(jié)構(gòu)類型有：

① 樹形結(jié)構(gòu)（層級(jí)結(jié)構(gòu)）：最常見的結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)，層層嵌套。
圖片

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

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

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

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

示例：vivo 錢包借款流程

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

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

1）界面設(shè)計(jì)

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

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

示例：vivo 部分組件

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

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

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

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

3）信息設(shè)計(jì)

信息設(shè)計(jì)是指提供呈現(xiàn)信息的方法，使用戶更容易使用和理解。信息設(shè)計(jì)跨越了功能型產(chǎn)品和信息型產(chǎn)品的邊界，業(yè)務(wù)無(wú)論是界面設(shè)計(jì)還是導(dǎo)航設(shè)計(jì)，都需要良好的信息設(shè)計(jì)的支持。它包括兩個(gè)關(guān)鍵點(diǎn)：“信息排序”和“分類整理”。每個(gè)界面上呈現(xiàn)的信息都有重要程度上的排序，優(yōu)先展示重要的信息，把不重要的信息隱藏起來(lái)。將同類信息進(jìn)行歸類，把相關(guān)性強(qiáng)的信息放在一起體現(xiàn)他們的關(guān)聯(lián)性，這些都是我們常用的信息整理方法。

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

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

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

1）忠于眼睛

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

2）對(duì)比和一致性

對(duì)比可以突出事物并吸引用戶注意力。對(duì)比要足夠徹底，讓差異足夠明顯，以免用戶困惑。

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

3）配色和排版

色彩可能是向外界傳遞品牌識(shí)別的一個(gè)最有效的方法。核心的品牌色彩通常是一個(gè)更廣泛的配色方案的一部分。在顏色選用上，仍然要注意對(duì)比和一致性。

排版會(huì)影響信息傳達(dá)，也會(huì)影響視覺效果。應(yīng)要遵循格式塔原則，可以幫助我們?cè)O(shè)計(jì)出信息傳達(dá)效率高的排版布局。

總結(jié)

作者：VMIC UED