本文深入解讀了書中提出的五個用戶體驗要素—表現(xiàn)層、框架層、結(jié)構(gòu)層、范圍層和戰(zhàn)略層，強調(diào)了以用戶為中心的設(shè)計哲學(xué)。通過回顧這些基本要素，我們不僅能更好地理解用戶體驗的重要性，還能學(xué)習(xí)如何將這一理念應(yīng)用于實際的產(chǎn)品設(shè)計中。

用戶體驗的五個要素是Jesse James Garrett的《用戶體驗要素-以用戶為中心的產(chǎn)品設(shè)計》（The elements of user experience – user-centered design for the web and beyond）中提到的概念。作者Jesse James Garrett還有一個名頭，那就是“Ajax之父”。

《用戶體驗要素》中文版不知道是不是翻譯的問題，覺得讀起來有點拗口。書中有一些概念跟現(xiàn)在大家常用的概念也不一樣了，有部分地方理解起來有點困難。不過在書中，提出了用戶體驗五要素的模型卻是很經(jīng)典，這個模型到現(xiàn)在還一直被人廣泛應(yīng)用。要知道本書是2002年寫的，這可是十幾年前的書啊。

對2002年沒概念？我們來看看那時候的互聯(lián)網(wǎng)長什么樣子的。

當(dāng)年的BAT三巨頭百度：

2002年的百度首頁（來源于網(wǎng)絡(luò)）

當(dāng)時的門戶巨頭網(wǎng)易：

2001年的網(wǎng)易首頁（來源于網(wǎng)絡(luò)）

中國互聯(lián)網(wǎng)起步相對比較晚，那么那時候的世界互聯(lián)網(wǎng)是什么樣子的？

2002年的蘋果官網(wǎng)（來源于網(wǎng)絡(luò)）

哈哈，言歸正傳。我們來看看書中的提到的用戶體驗五要素的模型。

一、為什么要重視用戶體驗

《用戶體驗要素》這本書中有幾個觀點，我深以為然：

1. 產(chǎn)品的使用屬性第一

杯子就是用來裝水的，如果為了美觀將杯子設(shè)計成鏤空的，那杯子就不是杯子了，充其量只能算是個藝術(shù)品。不要為了設(shè)計而設(shè)計，要為使用而設(shè)計。

2. 沒有用戶會閱讀使用說明書

用戶越來越懶，沒有用戶愿意為了使用一個產(chǎn)品而去閱讀使用說明。當(dāng)然，這個既有用戶對互聯(lián)網(wǎng)產(chǎn)品越來越熟悉的原因，也要歸功于產(chǎn)品的交互設(shè)計越來越人性化。

3. 在一個競爭激烈的市場，很難有第二次機會去接觸用戶

市場上同類的競品越來越多，當(dāng)一個用戶離開你的產(chǎn)品，并習(xí)慣了別的競品時。他很難會再回來使用你的產(chǎn)品。

好的用戶體驗不一定成就一個產(chǎn)品，但是壞的用戶體驗絕對可以毀掉一個產(chǎn)品。

二、用戶體驗要素模型

直接來看一下《用戶體驗要素》這本書中提到的用戶體驗五要素模型，這個模型算是這本書的精華所在了：

用戶體驗要素

作者將用戶體驗分成了五個層次：

1. 表現(xiàn)層
2. 框架層
3. 結(jié)構(gòu)層
4. 范圍層
5. 戰(zhàn)略層

原著將產(chǎn)品分成了兩大類，分別是信息型產(chǎn)品和功能型產(chǎn)品。個人以為沒必要這么分，或者說現(xiàn)在沒必要這么分了。隨著互聯(lián)網(wǎng)的發(fā)展，越來越多的信息型產(chǎn)品有著越來越多的功能，功能型產(chǎn)品也有不少信息呈現(xiàn)。很難將某個產(chǎn)品定義為純信息型或純功能型產(chǎn)品。

三、用戶體驗順序

用戶拿到你的產(chǎn)品以從上到下的順序來體驗?zāi)愕漠a(chǎn)品。

1）表現(xiàn)層

用戶拿到產(chǎn)品后，產(chǎn)品呈現(xiàn)給用戶的第一印象。例如，產(chǎn)品的主色調(diào)是藍色還是紅色、采用了扁平風(fēng)格還是擬物的風(fēng)格等。

2）框架層

當(dāng)用戶進入產(chǎn)品時，用戶對產(chǎn)品的整體印象。例如，進入產(chǎn)品后，用戶可以看到菜單是怎么設(shè)計的，每個菜單分別對應(yīng)什么功能。怎么找到需要的內(nèi)容，是通過列表還是搜索框。

3）結(jié)構(gòu)層

用戶開始使用產(chǎn)品后，用戶對產(chǎn)品的感知。例如，從購物到完成支付的流程是如何的，在各個環(huán)節(jié)是否有信息提示等。

4）范圍層

更深入地使用某個功能時，用戶對功能的感知。例如，聊天功能是否支持自定義表情、是否支持發(fā)送文件等。

5）戰(zhàn)略層

用戶使用完產(chǎn)品之后，用戶判斷是否完成了他的目標(biāo)。例如，通過產(chǎn)品進行購物、通過產(chǎn)品閱讀需要的內(nèi)容。

四、產(chǎn)品設(shè)計順序

產(chǎn)品的設(shè)計和用戶體驗的順序恰好是相反的。產(chǎn)品設(shè)計是自下而上的一個過程。是一個從抽象到具體的過程。

先對產(chǎn)品在戰(zhàn)略上有一個定義。然后再根據(jù)戰(zhàn)略目標(biāo)，逐步的具體到產(chǎn)品的功能點、最后到具體的實現(xiàn)細節(jié)和設(shè)計風(fēng)格上。

五個層次是自下而上的建設(shè)，但是各個層次之間并不是獨立的，而是一個環(huán)環(huán)相扣的關(guān)系。

產(chǎn)品設(shè)計順序

這其實是一個很正常的過程，并不是說上層討論得不夠仔細。因為我們自下而上地進行設(shè)計的時候，是一個逐步具體和細化的過程。往往在下一個環(huán)節(jié)的設(shè)計過程中能發(fā)現(xiàn)上一層設(shè)計存在的問題，這時候要適當(dāng)?shù)膶ι弦粋€環(huán)節(jié)進行調(diào)整。

1. 戰(zhàn)略層

戰(zhàn)略層要解決“我們?yōu)槭裁撮_發(fā)產(chǎn)品？”的問題。這個問題的關(guān)鍵在于弄清楚我們的用戶是誰，用戶的需求是什么？公司的商業(yè)價值和風(fēng)險是什么？

《用戶體驗要素》主要是針對用戶體驗的。所以作者主要提了“產(chǎn)品目標(biāo)”和“用戶需求”兩個維度。

作為產(chǎn)品經(jīng)理，只識別兩個維度是不夠的。其實對于戰(zhàn)略層的分析，這些內(nèi)容會出現(xiàn)在我們的BRD和MRD里面。主要包括：

1）商業(yè)價值

產(chǎn)品能否為公司帶來商業(yè)價值，帶來怎么樣的商業(yè)價值。一些戰(zhàn)略型產(chǎn)品的商業(yè)價值可能不僅僅直接體現(xiàn)在盈利上面。

2）用戶痛點

我們的用戶是誰，有什么特征？我們要幫助用戶解決什么問題，用戶需要通過我們的產(chǎn)品達到什么目標(biāo)？

3）市場現(xiàn)狀和預(yù)期

市場的現(xiàn)狀如何，是否存在競品，他們的優(yōu)缺點是什么？我們的市場的預(yù)期如何？

4）項目的風(fēng)險

項目的風(fēng)險有哪些，怎么規(guī)避風(fēng)險？或針對這些風(fēng)險，是否有解決方案？

5）項目計劃

制定整體的開發(fā)和推廣計劃，確定各個里程碑的內(nèi)容和日期。

當(dāng)然，隨著市場逐步進入白熾化的階段，競品相似度也越來越高，所以用戶體驗的作用也越來越重要了。我們可以在戰(zhàn)略階段加入用戶體驗的思考。

6）是否有亮點的用戶體驗

很多產(chǎn)品的主要賣點就體現(xiàn)在用戶體驗上。比如提供智能便捷的內(nèi)容瀏覽方式、一鍵處理照片的功能等。

7）是否有嚴重影響用戶體驗的設(shè)計

為了達成商業(yè)目標(biāo)，我們可能會對產(chǎn)品進行一些商業(yè)化的設(shè)計。需要考慮過度的商業(yè)化是否影響了用戶的體驗，在商業(yè)化和用戶體驗之間如何平衡。比如我們要在產(chǎn)品上增加廣告功能，以什么樣的方式進行。直接彈框、還是內(nèi)嵌到內(nèi)容里面？

在這個階段可以提前對一些產(chǎn)品的細節(jié)進行思考，不過切記不要過度地糾結(jié)在細節(jié)里面。

2. 范圍層

在明確了戰(zhàn)略目標(biāo)后，范圍層要解決的是“我們開發(fā)什么樣產(chǎn)品？”的問題。在這個階段，需要思考“我們要做什么”、“用戶想要什么”。

產(chǎn)品經(jīng)理通過用戶、運營、市場等各個渠道收集到用戶需求。再結(jié)合戰(zhàn)略層確定的目標(biāo)對需求進行分析、篩選和過濾，最終形成一份完整的產(chǎn)品需求說明書。需求說明書的作用是將產(chǎn)品需要做什么和產(chǎn)品不需要做什么明確下來。

說到需求說明書，作為產(chǎn)品我們可能第一個想到的是PRD文檔。但是，嚴格來說模型提到的范圍層并不能完全對應(yīng)到PRD文檔上。在PRD里面，除了需求的說明，還會使用到原型圖、產(chǎn)品結(jié)構(gòu)圖等，這些內(nèi)容應(yīng)該是歸類到結(jié)構(gòu)層里面的?？梢赃@么說，范圍層對應(yīng)到了PRD里面需求說明的部分內(nèi)容。

1）項目背景和目標(biāo)

項目的背景和目標(biāo)有利于項目組對項目有個大概的了解。如果是小團隊，前期項目立項團隊參與度比較高的。這部分可以簡要書寫。

2）功能概述

對功能有個總體的了解。提供一份功能列表或一個功能結(jié)構(gòu)圖。如果是比較大的項目，還需要提供產(chǎn)品模塊的劃分和結(jié)構(gòu)。

3）需求說明

對每個需求進行說明。常見的方式有功能說明、用例、用戶故事等。對于較復(fù)雜的需求，如果有需要可以增加業(yè)務(wù)流程圖等方式進一步說明。

4）非功能需求

產(chǎn)品的非功能性需求。如性能需求、風(fēng)格需求等。

PRD里面最重要的就是對需求的說明，《用戶體驗要素》這本書對需求的描述提了三個標(biāo)準，如下：

◆ 積極的

在描述需求時，總會遇到一些意外的情況。對于這些意外的情況，我們應(yīng)該以積極的角度去描述。
例如這樣描述：

“如果用戶余額不足，不允許用戶支付。”

閱讀者并不知道下一步的動作是如何的。應(yīng)該以更積極的方式來描述，可以改成：

“如果用戶余額不足，則提示用戶余額不足，并提示和引導(dǎo)用戶進行充值?！?/p>

◆ 具體的

對于需求應(yīng)該描述得更具體和詳細。以便文檔的閱讀者可以更好的理解需求。
例如這樣描述，則不是很具體：

“突出顯示用戶關(guān)注的內(nèi)容?！?/p>

這個需求可以更具體的表達為：

“用戶點了關(guān)注的內(nèi)容，放在內(nèi)容列表的最前端。”

◆ 客觀的

對于需求的描述應(yīng)該避免用主觀的語氣，應(yīng)該主觀的語氣容易讓閱讀者理解有歧義。
例如如下表達，存在著歧義：

“提供便捷的登陸方式。”

不同的人對“便捷”的理解方式不一樣，可以改成這樣：

“支持使用手機號碼和短信驗證碼直接登陸系統(tǒng)?！?/p>

3. 結(jié)構(gòu)層

如果團隊里面有交互設(shè)計師的話，產(chǎn)品和交互設(shè)計的交接點就在這一層了。如果沒有專職的交互設(shè)計師團隊的話，產(chǎn)品也會負責(zé)這部分的設(shè)計。不同的團隊產(chǎn)品和交互的職責(zé)定位不一樣，并不能一概而論。

在范圍層，我們已經(jīng)定義好了需求，已經(jīng)明確了我們要做什么。到了結(jié)構(gòu)層，我們從抽象的需求逐步具體成用戶可以感知的需求。同時，結(jié)構(gòu)層定義了產(chǎn)品最終呈現(xiàn)給用戶的框架，為下一層細化做準備。

結(jié)構(gòu)層的內(nèi)容對應(yīng)到了PRD文檔的另一部分內(nèi)容。

1）產(chǎn)品結(jié)構(gòu)

產(chǎn)品呈現(xiàn)給用戶的頁面和功能結(jié)構(gòu)，是用戶看得到的產(chǎn)品的結(jié)構(gòu)，例如，一個社交產(chǎn)品，可能包括聊天頁面、好友頁面、個人中心頁面。其中，個人中心又包括了個人信息、設(shè)置等功能。建議使用思維導(dǎo)圖的方式將其列明。

2）信息架構(gòu)

產(chǎn)品呈現(xiàn)個用戶的信息的組織方式。例如一個電商產(chǎn)品，商品的內(nèi)容包括了，商品信息、用戶評價等。其中商品信息又包括了商品介紹、功能參數(shù)等內(nèi)容。這部分也建議用思維導(dǎo)圖的方式展開。

3）頁面結(jié)構(gòu)

產(chǎn)品的功能和信息在頁面上怎么體現(xiàn)。每個頁面大概包括哪些內(nèi)容。這部分建議以低保真原型圖的方式來呈現(xiàn)出來。

4）交互流程

用戶的操作流程和頁面的跳轉(zhuǎn)流程。用戶是怎么執(zhí)行操作的，頁面以什么樣的方式響應(yīng)或跳轉(zhuǎn)。這部分內(nèi)容可以在原型圖上注釋說明。

4. 框架層

雖然命名為框架層，不過在這一層我們逐步將產(chǎn)品從抽象到具體。到了這一層，基本上能看得出產(chǎn)品的輪廓。這一層我們通過已經(jīng)制作好的PRD和低保真原型圖，逐步細化成高保真的原型圖。

框架層是結(jié)構(gòu)層的細化。包括了如下的工作：

1）信息設(shè)計

對已經(jīng)定義好的信息架構(gòu)進行細化。例如，在結(jié)構(gòu)層，我們已經(jīng)定義好了商品信息需要包含大概的信息。在框架層再進一步細化，商品的詳情包括了，商品名稱、商品數(shù)量、商品產(chǎn)地等詳細等字段。

2）頁面細化

在結(jié)構(gòu)層已經(jīng)定義好的頁面結(jié)構(gòu)基礎(chǔ)上進一步細化。如頁面的具體布局，頁面元素的選擇等。這一步將低保真的頁面細化成高保真的頁面。

3）交互設(shè)計

頁面的交互設(shè)計，用戶操作后頁面的響應(yīng)。例如，是否需要彈窗提示、是否需要滑動效果等。

5. 表現(xiàn)層

表現(xiàn)層是將框架層設(shè)計好的高保真原型圖，最終輸出設(shè)計稿的步驟。這個是產(chǎn)品設(shè)計的最后一步。

這一層主要是UI設(shè)計師的工作。如產(chǎn)品的配色方案，主題色和輔助色的選擇、產(chǎn)品的風(fēng)格，扁平風(fēng)格或者擬物風(fēng)格等的選擇。

五、用戶體驗要素的應(yīng)用

我們大概可以將我們?nèi)粘５墓ぷ鳉w類到各個層次里面：

• 戰(zhàn)略層– MRD和BRD
• 范圍層– PRD（部分）
• 結(jié)構(gòu)層– PRD（部分）和低保真原型
• 框架層– 高保真原型和交互設(shè)計
• 表現(xiàn)層– UI設(shè)計

但是，在應(yīng)用用戶五要素的模型時，也不能完完全全直接的套用到工作流程里面。這個模型更多的是提供給我們一個思考的方式，而并非是一個指導(dǎo)產(chǎn)品設(shè)計的流程。

日常過程中，甚至有可能有部分設(shè)計環(huán)節(jié)是跟層次是反著來的。例如，我經(jīng)常使用思維導(dǎo)圖將產(chǎn)品的結(jié)構(gòu)整理出來（結(jié)構(gòu)層），然后再進一步的細化出需求說明（范圍層）。但是，本質(zhì)上還是從需求到結(jié)構(gòu)的一個過程。

另外，不同的團隊由不同的構(gòu)成，有些團隊沒有交互設(shè)計師，產(chǎn)品包攬了需求到交互的所有環(huán)節(jié)。產(chǎn)品這個職位在每個團隊的功能也不一樣。產(chǎn)品開發(fā)環(huán)節(jié)，有些團隊是產(chǎn)品主導(dǎo)的，產(chǎn)品主導(dǎo)了戰(zhàn)略層到結(jié)構(gòu)層的各個環(huán)節(jié)、有些團隊是交互設(shè)計師主導(dǎo)的，產(chǎn)品只需要負責(zé)戰(zhàn)略層和范圍層。

最后，這個模型給我最大的啟示就是。無論是產(chǎn)品還是交互，在產(chǎn)品設(shè)計時都要注重用戶的需求，并且從抽象到具體的逐步設(shè)計產(chǎn)品。