AJAX 之父 Jesse James Garrett 在 2007 年出版了一本名為《用戶體驗(yàn)要素》的書，提出了從 5 個(gè)要素自下而上的建設(shè)用戶體驗(yàn)。從最早這本書針對(duì) web 端的設(shè)計(jì)到現(xiàn)在移動(dòng)互聯(lián)的 app 設(shè)計(jì)，因?yàn)槠涑瑥?qiáng)的普適性和實(shí)戰(zhàn)指導(dǎo)性被廣為流傳為 UX 設(shè)計(jì)中經(jīng)典的項(xiàng)目創(chuàng)建與研究的方法論。

其實(shí)市面上寫 5 要素的文章挺多的，但是最近作為面試官收到了一些給 5 要素強(qiáng)凹造型的作品集，所以還是想給大家寫一篇看完就能用的 5 要素解析，爭(zhēng)取就一篇讓大家 get 如何使用用戶體驗(yàn) 5 要素深度分析產(chǎn)品設(shè)計(jì)，如何高級(jí)且不露聲色地把它應(yīng)用到你的作品集里。

戰(zhàn)略層

非常認(rèn)同書里對(duì)于戰(zhàn)略層開(kāi)篇的說(shuō)法：通常一款產(chǎn)品的失敗原因并不在于用戶體驗(yàn)或技術(shù)實(shí)現(xiàn)，而是在產(chǎn)品搭建之前沒(méi)有人明確回答 2 個(gè)問(wèn)題「我們通過(guò)這個(gè)產(chǎn)品要獲得什么？」和「用戶通過(guò)我們的產(chǎn)品能獲得什么？」，概括來(lái)說(shuō)就是「產(chǎn)品目標(biāo)」和「用戶需求」這 2 個(gè)維度的問(wèn)題。

讓我們來(lái)看看他們的拓展分支：

1. 商業(yè)目標(biāo)

商業(yè)產(chǎn)品的終期目的都是賺錢二字，那么如何賺錢就是分階段進(jìn)行商業(yè)戰(zhàn)略規(guī)劃的。不同階段的商業(yè)目標(biāo)決定了產(chǎn)品目標(biāo)和形態(tài)，打個(gè)比方：馬蜂窩、小紅書一類的社交產(chǎn)品在進(jìn)行商業(yè)化目標(biāo)后他們就開(kāi)始賣貨了，讓用戶從看筆記到種草下單的整個(gè)流程都可以在自家的 app 里完成（「閉環(huán)」建設(shè)）。所以從商業(yè)目標(biāo)的角度我們基本可以回答做一款產(chǎn)品的目的是什么，也就是它整體大方向的產(chǎn)品目標(biāo)。

2. 用戶研究

要弄清用戶需要什么，就需要先定義我們的用戶到底是誰(shuí)，從而針對(duì)定義的用戶群進(jìn)行相關(guān)的用戶研究。具體的用戶研究方法相信大家也都有了解，定性調(diào)研：用戶畫像、用戶訪談、焦點(diǎn)小組。定量調(diào)研：?jiǎn)柧碚{(diào)研等。這些建議大家在往作品集里加的時(shí)候準(zhǔn)備一下細(xì)節(jié)的問(wèn)題類似「你的問(wèn)卷樣本在什么渠道投放的？」、「你的樣本投放數(shù)量是怎么商定的？」，防止面試時(shí)的尷尬。

3. 成功標(biāo)準(zhǔn)

不同的產(chǎn)品目標(biāo)對(duì)應(yīng)著不同的核心數(shù)據(jù)指標(biāo)，如何判斷產(chǎn)品目標(biāo)是否達(dá)成需要進(jìn)行對(duì)應(yīng)的數(shù)據(jù)校驗(yàn)。打個(gè)比方：之前做小桔租車時(shí)幾個(gè)核心指標(biāo)：用戶租車率、用戶滿意度（進(jìn)線率）……；做小桔車服務(wù)時(shí)的幾個(gè)核心指標(biāo)：各子業(yè)務(wù)（比如加油、維保）的下單率/交易量等，但這些核心數(shù)據(jù)和設(shè)計(jì)之間的關(guān)系大家需要盡量通過(guò)一些A/B test 或控制變量的方式合理求證。

看完以上這一趴大家就可以先對(duì)自己的作品集暴擊三連問(wèn)：我們的產(chǎn)品是出于什么樣的商業(yè)目標(biāo)變成現(xiàn)階段這個(gè)形態(tài)的？我們的產(chǎn)品是怎樣一群人在用？我們產(chǎn)品的核心數(shù)據(jù)指標(biāo)是啥？（設(shè)計(jì)是否對(duì)其產(chǎn)生影響？）

范圍層

之前看很多人把范圍層理解為「用戶需求」，但其實(shí)應(yīng)該是更具象一點(diǎn)的東西，即通過(guò)「用戶需求」推導(dǎo)出的產(chǎn)品內(nèi)容需求和功能規(guī)劃，「范圍」二字可以理解為 2 層含義：（1）需要開(kāi)發(fā)的產(chǎn)品功能的范圍（2）項(xiàng)目時(shí)間規(guī)劃的范圍。

1. 產(chǎn)品功能

根據(jù)實(shí)戰(zhàn)中的經(jīng)歷，我們一般把產(chǎn)品功能劃分為 2 部分「功能型」和「信息型」。

「功能型」顧名思義就是產(chǎn)品的基礎(chǔ)功能，比如抖音中的拍攝流程、用戶中心、關(guān)注列表等等，它決定了用戶都可以在我們的產(chǎn)品上做什么，它的決策需要充分思考用戶的不同場(chǎng)景訴求。我們可以依據(jù)目標(biāo)用戶在不同場(chǎng)景下的行為路徑判斷出他們的剛需。

「信息型」指的是用戶編輯內(nèi)容 UGC 和專業(yè)編輯內(nèi)容 PGC 的對(duì)外展示，比如喜馬拉雅中用戶上傳的音頻就是用戶編輯內(nèi)容 UGC，而運(yùn)營(yíng)/產(chǎn)品小編上傳的音頻就是專業(yè)編輯內(nèi)容 PGC。

對(duì)于體驗(yàn)設(shè)計(jì)來(lái)說(shuō)，認(rèn)知不同的產(chǎn)品功能分類能讓我們?cè)趯?shí)戰(zhàn)中更好地規(guī)劃布局少踩一些坑。舉個(gè)例子：比如一個(gè) UGC 的視頻信息流設(shè)計(jì)，需要對(duì)用戶可能編輯與發(fā)布的各種情況有所決策，比如是挖空腦子想一個(gè)萬(wàn)能布局保障他們上傳什么奇奇怪怪的尺寸也可以適配？還是對(duì)他們上傳尺寸進(jìn)行裁剪？如果裁剪是拉伸裁剪還是全顯裁剪？

2. 項(xiàng)目規(guī)劃

對(duì)于產(chǎn)品、技術(shù)、設(shè)計(jì)來(lái)說(shuō)都有各自不同的項(xiàng)目規(guī)劃方式，但統(tǒng)一的是對(duì)功能優(yōu)先級(jí)的劃分以及規(guī)劃排期。這里建議初中級(jí)的同學(xué)先了解整體的項(xiàng)目排期（產(chǎn)品迭代上線的時(shí)間與設(shè)計(jì)的周期）與團(tuán)隊(duì)合作流程開(kāi)始，逐步整理出自己在項(xiàng)目中的角色定位與規(guī)劃，高級(jí)到資深的同學(xué)建議嘗試自己搭建項(xiàng)目排期并進(jìn)行需求優(yōu)先級(jí)的界定，有機(jī)會(huì)的話再帶帶實(shí)習(xí)童鞋和新人會(huì)對(duì)你們下一步晉升有很大幫助。

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

結(jié)構(gòu)層是一個(gè)將實(shí)際需求從抽象轉(zhuǎn)為具象的中間層，這里包含「交互設(shè)計(jì)」與「信息架構(gòu)」2 個(gè)方面。

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

這里的交互設(shè)計(jì)解決的是范圍層界定的功能以什么樣的方式呈現(xiàn)的問(wèn)題。打個(gè)比方：之前做的獵豹清理大師（手機(jī)清理 app)，產(chǎn)品目標(biāo)：更輕更快從而獲得更多用戶認(rèn)同與使用，范圍層界定是以「一鍵加速」清理垃圾功能為核心展開(kāi)的 4 類清理功能。那么針對(duì)以上情況，我們做的整體交互設(shè)計(jì)就是減少手勢(shì)操作，點(diǎn)對(duì)點(diǎn)直線使用功能，沉浸式加速動(dòng)畫直觀表達(dá)功能的快速反饋。

另外因?yàn)槲覀兘佑|的端口除了移動(dòng)端以外，還有很多類似現(xiàn)在涌現(xiàn)的 M 端（例如盒馬線下自助終端機(jī)等），就會(huì)牽扯到更多「深?yuàn)W」的人機(jī)交互，需要我們有更多整體人機(jī)交互上的考量。

2. 信息架構(gòu)

信息架構(gòu)的目的是梳理復(fù)雜的產(chǎn)品功能，確保用戶體驗(yàn)的邏輯，落地到實(shí)處的話可以理解為功能節(jié)點(diǎn)的關(guān)聯(lián)流程圖，這個(gè)可以拆分用在之后體驗(yàn)優(yōu)化的很多環(huán)節(jié)：比如用戶體驗(yàn)地圖、節(jié)點(diǎn)漏斗優(yōu)化等。書里列舉了一堆結(jié)構(gòu)化的方式：自然結(jié)構(gòu)、矩陣結(jié)構(gòu)、線型結(jié)構(gòu)等等，個(gè)人覺(jué)得了解一下就好了，具體還是要根據(jù)產(chǎn)品進(jìn)行自定義的。

△ 來(lái)自之前滴滴交互大神PPT

框架層

相較結(jié)構(gòu)層，框架層的顆粒度更加細(xì)化，在框架層我們需要仔細(xì)思考每個(gè)具體頁(yè)面的框架與信息設(shè)計(jì)，再落地說(shuō)就是要出個(gè)高保真原型出來(lái)。

具體的框架與信息設(shè)計(jì)定義不同的功能安放在對(duì)應(yīng)合適的容器框架中，依然還是由范圍層界定的產(chǎn)品功能及優(yōu)先級(jí)來(lái)決定的?；咀裱脑瓌t就是：讓用戶優(yōu)先看到他們需要的內(nèi)容和我們想讓他看見(jiàn)的內(nèi)容?，F(xiàn)在主流的幾種大容器框架設(shè)計(jì)：大卡片 feed 流、無(wú)框式、線性列表等。定義整體的產(chǎn)品框架設(shè)計(jì)是非常核心的體驗(yàn)設(shè)計(jì)亮點(diǎn)，大家可以將此與前幾層偏抽象的內(nèi)容呼應(yīng)起來(lái)，使框架設(shè)計(jì)變得有理有據(jù)。

具體的信息設(shè)計(jì)除了注意信息表達(dá)的優(yōu)先級(jí)、拓展性與一致性之外。實(shí)戰(zhàn)經(jīng)驗(yàn)告誡大家一定注意區(qū)分運(yùn)營(yíng)配置位與產(chǎn)品功能區(qū)的信息設(shè)計(jì)。具體的內(nèi)容可以回看之前寫過(guò)的 0-1 系列：UX 全方案思考與呈現(xiàn)，這里就不細(xì)說(shuō)了。

表現(xiàn)層

忘了之前在哪兒看到有人提出過(guò)因?yàn)楸憩F(xiàn)層已經(jīng)到瓶頸了，所以大家需要轉(zhuǎn)向其他層去提升自己的價(jià)值。這里表示不太認(rèn)同，視覺(jué)層并不是只給高保真原型圖上個(gè)色、畫個(gè)插圖這種操作。書里把視覺(jué)層定義為感知設(shè)計(jì)，這里我們應(yīng)用到日常項(xiàng)目中可以理解為通過(guò)良好視覺(jué)化表達(dá)達(dá)成 2 個(gè)重要意義：1. 信息獲取 ，2. 品牌識(shí)別

1. 信息獲取

如果說(shuō)前 4 層的建設(shè)都是在為吸引用戶做鋪墊，那么表現(xiàn)層則是直接決定了用戶的視線停留?；疑?、純文字的產(chǎn)品表達(dá) VS 對(duì)比與一致性平衡的符號(hào)化產(chǎn)品表達(dá)，顯然后者可以在第一時(shí)間抓住用戶視線，并幫助用戶快速甄別內(nèi)容獲取信息。

2. 品牌識(shí)別

關(guān)于品牌這一趴我違背了書里的意志，擅自將它挪到了表現(xiàn)層。原因是因?yàn)楝F(xiàn)在國(guó)內(nèi)的互聯(lián)網(wǎng)行情和可口可樂(lè)那個(gè)時(shí)代不太一樣了，太多像拼多多這樣雄起的產(chǎn)品先業(yè)務(wù)再品牌，他們的勝出帶來(lái)一個(gè)思考：是否用戶下沉的互聯(lián)網(wǎng)國(guó)潮更習(xí)慣將品牌建設(shè)后置。

這里我們談及的「品牌」概念不僅僅只是一個(gè) logo 一種顏色，它覆蓋了產(chǎn)品從線上到線下、端內(nèi)到端外的所有視覺(jué)內(nèi)容，決定了用戶對(duì)產(chǎn)品的潛在認(rèn)知，是一個(gè)涵蓋多方面視覺(jué) DNA 的完整視覺(jué)識(shí)別系統(tǒng)。通常都是由多方設(shè)計(jì)組根據(jù)各自的業(yè)務(wù)線與端口共建完成的大型系統(tǒng)。

5要素樸實(shí)無(wú)華用法小tips

作為一個(gè)主導(dǎo) 0-1 項(xiàng)目 N 次的老司機(jī)來(lái)說(shuō)，其實(shí) 5 要素不算紙上談兵還是很實(shí)用的，在項(xiàng)目創(chuàng)建初期就可以起到一定的指導(dǎo)作用。新手搭建團(tuán)隊(duì)或者新項(xiàng)目起手都可以依據(jù)這個(gè)方法論進(jìn)行團(tuán)隊(duì)角色和流程的梳理。

另外對(duì)于大家來(lái)說(shuō)可能更加實(shí)用的是作品集的規(guī)劃和面試問(wèn)答?？赐赀@篇文章大家應(yīng)該都發(fā)現(xiàn) 5 要素幾乎涵蓋了所有 UX 設(shè)計(jì)師面試大小廠子時(shí)可能經(jīng)歷的問(wèn)答題，因?yàn)樗且粋€(gè)完整且經(jīng)典的產(chǎn)品設(shè)計(jì)流分析法。這里給大家一個(gè)超大忠告就是切莫在作品集里像問(wèn)答題一樣把 5 要素列舉出來(lái)，這樣就顯得很生硬很強(qiáng)凹造型，如下圖：

最好是把 5 要素化為自己的理解，靜悄悄的融入到每個(gè)項(xiàng)目中，把問(wèn)答題變成講故事（可以參考以上各種示例圖）。

也并不是所有項(xiàng)目都需要把這么全面的 5 要素都體現(xiàn)出來(lái)，可以根據(jù)項(xiàng)目的量級(jí)與情況，突出相應(yīng)出彩的部分，這樣作品集就有了節(jié)奏。

歡迎關(guān)注作者的微信公眾號(hào)：「Nana的設(shè)計(jì)錦囊」