編輯導(dǎo)語(yǔ)：設(shè)計(jì)師在面試時(shí)怎么體現(xiàn)自己的專業(yè)，比如在進(jìn)行自己的產(chǎn)品設(shè)計(jì)分析時(shí)，可以使用用戶體驗(yàn)五要素進(jìn)行回答，用戶體驗(yàn)的五要素在我們的工作中也很有用；本文作者分析了用戶體驗(yàn)五要素，我們一起來(lái)看一下。

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)略層開篇的說(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)后他們就開始賣貨了，讓用戶從看筆記到種草下單的整個(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)線率）…；做小桔車服時(shí)的幾個(gè)核心指標(biāo)：各子業(yè)務(wù)（比如加油、維保）的下單率/交易量…，但這些核心數(shù)據(jù)和設(shè)計(jì)之間的關(guān)系大家需要盡量通過(guò)一些A/B test或控制變量的方式合理求證。

看完以上這一趴大家就可以先對(duì)自己的內(nèi)心（zuo pin ji）暴擊三連問(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層含義：

• 需要開發(fā)的產(chǎn)品功能的范圍；
• 項(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ì)合作流程開始，逐步整理出自己在項(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)同與使用，范圍層界定是以“一鍵加速”清理垃圾功能為核心展開的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)行自定義的。

四、框架層

相較結(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)決定的。

基本遵循的原則就是：讓用戶優(yōu)先看到他們需要的內(nèi)容和我們想讓他看見的內(nèi)容。

現(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è)重要意義：信息獲取、品牌識(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é)奏。

作者：Nana，滴滴資深UX設(shè)計(jì)師，微信公眾號(hào)「Nana的設(shè)計(jì)錦囊」

本文由 @NaNa 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議