AJAX 之父 Jesse James Garrett 在 2007 年出版了一本名為《用戶體驗要素》的書，提出了從 5 個要素自下而上的建設用戶體驗。從最早這本書針對 web 端的設計到現在移動互聯的 app 設計，因為其超強的普適性和實戰指導性被廣為流傳為 UX 設計中經典的項目創建與研究的方法論。

閱讀文章 >>

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

戰略層

非常認同書里對於戰略層開篇的說法：通常一款產品的失敗原因並不在於用戶體驗或技術實現，而是在產品搭建之前沒有人明確回答 2 個問題「我們通過這個產品要獲得什麼？」和「用戶通過我們的產品能獲得什麼？」，概括來說就是「產品目標」和「用戶需求」這 2 個維度的問題。

讓我們來看看他們的拓展分支：

1. 商業目標

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

2. 用戶研究

要弄清用戶需要什麼，就需要先定義我們的用戶到底是誰，從而針對定義的用戶群進行相關的用戶研究。具體的用戶研究方法相信大家也都有了解，定性調研：用戶畫像、用戶訪談、焦點小組。定量調研：問卷調研等。這些建議大家在往作品集里加的時候準備一下細節的問題類似「你的問卷樣本在什麼渠道投放的？」、「你的樣本投放數量是怎麼商定的？」，防止面試時的尷尬。

3. 成功標準

不同的產品目標對應着不同的核心數據指標，如何判斷產品目標是否達成需要進行對應的數據校驗。打個比方：之前做小桔租車時幾個核心指標：用戶租車率、用戶滿意度（進線率）……；做小桔車服務時的幾個核心指標：各子業務（比如加油、維保）的下單率/交易量等，但這些核心數據和設計之間的關係大家需要盡量通過一些A/B test 或控制變量的方式合理求證。

看完以上這一趴大家就可以先對自己的作品集暴擊三連問：我們的產品是出於什麼樣的商業目標變成現階段這個形態的？我們的產品是怎樣一群人在用？我們產品的核心數據指標是啥？（設計是否對其產生影響？）

範圍層

之前看很多人把範圍層理解為「用戶需求」，但其實應該是更具象一點的東西，即通過「用戶需求」推導出的產品內容需求和功能規劃，「範圍」二字可以理解為 2 層含義：（1）需要開發的產品功能的範圍（2）項目時間規劃的範圍。

1. 產品功能

根據實戰中的經歷，我們一般把產品功能劃分為 2 部分「功能型」和「信息型」。

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

「信息型」指的是用戶編輯內容 UGC 和專業編輯內容 PGC 的對外展示，比如喜馬拉雅中用戶上傳的音頻就是用戶編輯內容 UGC，而運營/產品小編上傳的音頻就是專業編輯內容 PGC。

對於體驗設計來說，認知不同的產品功能分類能讓我們在實戰中更好地規劃布局少踩一些坑。舉個例子：比如一個 UGC 的視頻信息流設計，需要對用戶可能編輯與發布的各種情況有所決策，比如是挖空腦子想一個萬能布局保障他們上傳什麼奇奇怪怪的尺寸也可以適配？還是對他們上傳尺寸進行裁剪？如果裁剪是拉伸裁剪還是全顯裁剪？

2. 項目規劃

對於產品、技術、設計來說都有各自不同的項目規劃方式，但統一的是對功能優先級的劃分以及規劃排期。這裏建議初中級的同學先了解整體的項目排期（產品迭代上線的時間與設計的周期）與團隊合作流程開始，逐步整理出自己在項目中的角色定位與規劃，高級到資深的同學建議嘗試自己搭建項目排期並進行需求優先級的界定，有機會的話再帶帶實習童鞋和新人會對你們下一步晉陞有很大幫助。

結構層

結構層是一個將實際需求從抽象轉為具象的中間層，這裏包含「交互設計」與「信息架構」2 個方面。

1. 交互設計

這裏的交互設計解決的是範圍層界定的功能以什麼樣的方式呈現的問題。打個比方：之前做的獵豹清理大師（手機清理 app)，產品目標：更輕更快從而獲得更多用戶認同與使用，範圍層界定是以「一鍵加速」清理垃圾功能為核心展開的 4 類清理功能。那麼針對以上情況，我們做的整體交互設計就是減少手勢操作，點對點直線使用功能，沉浸式加速動畫直觀表達功能的快速反饋。

另外因為我們接觸的端口除了移動端以外，還有很多類似現在湧現的 M 端（例如盒馬線下自助終端機等），就會牽扯到更多「深奧」的人機交互，需要我們有更多整體人機交互上的考量。

2. 信息架構

信息架構的目的是梳理複雜的產品功能，確保用戶體驗的邏輯，落地到實處的話可以理解為功能節點的關聯流程圖，這個可以拆分用在之後體驗優化的很多環節：比如用戶體驗地圖、節點漏斗優化等。書里列舉了一堆結構化的方式：自然結構、矩陣結構、線型結構等等，個人覺得了解一下就好了，具體還是要根據產品進行自定義的。

△ 來自之前滴滴交互大神PPT

框架層

相較結構層，框架層的顆粒度更加細化，在框架層我們需要仔細思考每個具體頁面的框架與信息設計，再落地說就是要出個高保真原型出來。

具體的框架與信息設計定義不同的功能安放在對應合適的容器框架中，依然還是由範圍層界定的產品功能及優先級來決定的。基本遵循的原則就是：讓用戶優先看到他們需要的內容和我們想讓他看見的內容。現在主流的幾種大容器框架設計：大卡片 feed 流、無框式、線性列表等。定義整體的產品框架設計是非常核心的體驗設計亮點，大家可以將此與前幾層偏抽象的內容呼應起來，使框架設計變得有理有據。

具體的信息設計除了注意信息表達的優先級、拓展性與一致性之外。實戰經驗告誡大家一定注意區分運營配置位與產品功能區的信息設計。具體的內容可以回看之前寫過的 0-1 系列：UX 全方案思考與呈現，這裏就不細說了。

閱讀文章 >>

表現層

忘了之前在哪兒看到有人提出過因為表現層已經到瓶頸了，所以大家需要轉向其他層去提升自己的價值。這裏表示不太認同，視覺層並不是只給高保真原型圖上個色、畫個插圖這種操作。書里把視覺層定義為感知設計，這裏我們應用到日常項目中可以理解為通過良好視覺化表達達成 2 個重要意義：1. 信息獲取 ，2. 品牌識別

1. 信息獲取

如果說前 4 層的建設都是在為吸引用戶做鋪墊，那麼表現層則是直接決定了用戶的視線停留。灰色的、純文字的產品表達 VS 對比與一致性平衡的符號化產品表達，顯然後者可以在第一時間抓住用戶視線，並幫助用戶快速甄別內容獲取信息。

2. 品牌識別

關於品牌這一趴我違背了書里的意志，擅自將它挪到了表現層。原因是因為現在國內的互聯網行情和可口可樂那個時代不太一樣了，太多像拼多多這樣雄起的產品先業務再品牌，他們的勝出帶來一個思考：是否用戶下沉的互聯網國潮更習慣將品牌建設後置。

這裏我們談及的「品牌」概念不僅僅只是一個 logo 一種顏色，它覆蓋了產品從線上到線下、端內到端外的所有視覺內容，決定了用戶對產品的潛在認知，是一個涵蓋多方面視覺 DNA 的完整視覺識別系統。通常都是由多方設計組根據各自的業務線與端口共建完成的大型系統。

5要素樸實無華用法小tips

作為一個主導 0-1 項目 N 次的老司機來說，其實 5 要素不算紙上談兵還是很實用的，在項目創建初期就可以起到一定的指導作用。新手搭建團隊或者新項目起手都可以依據這個方法論進行團隊角色和流程的梳理。

另外對於大家來說可能更加實用的是作品集的規劃和面試問答。看完這篇文章大家應該都發現 5 要素幾乎涵蓋了所有 UX 設計師面試大小廠子時可能經歷的問答題，因為它是一個完整且經典的產品設計流分析法。這裏給大家一個超大忠告就是切莫在作品集里像問答題一樣把 5 要素列舉出來，這樣就顯得很生硬很強凹造型，如下圖：

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

也並不是所有項目都需要把這麼全面的 5 要素都體現出來，可以根據項目的量級與情況，突出相應出彩的部分，這樣作品集就有了節奏。

歡迎關注作者的微信公眾號：「Nana的設計錦囊」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五登錄網站_如何高級且不露神色把「用戶體驗五要素」用到你的作品集里？