結合實際案例,一篇看懂用戶體驗五個層次

看過了很多描述用戶體驗五個層次的文章，但感覺很多都淺嘗而止，今天我特地結合了十來個案例對用戶體驗進行了一次相對全面的闡述，希望大家在閱讀時也能夠同樣尋找相關產品進行比照和論證，想必會更有收穫。

一、概要

用戶體驗設計就是「以用戶為中心的設計」，即創造「每件事都按照正確的方式在工作」的用戶體驗，讓用戶賓至如歸，就像《Don’t make me think》裡提到的「這會讓用戶覺得自己更聰明，更能把握全局，這會讓他們成為老用戶」。Garrett 大師圍繞「以用戶為中心的設計」得出一套產品設計的思維方式：從抽象到具體逐層擊破五個層面，包括戰略層、範圍層、結構層、框架層和表現層，最終達到用戶體驗設計目的。

二、五個層面

1、戰略層

戰略層的制定決定了產品的基本走向，它是以企業目標為前提，根據產品目標和用戶需求來制定。

（1）產品目標

產品目標即企業要通過產品得到什麼，主要通過三個方面來衡量：商業目標、品牌標識和成功標準。以下以支付寶的螞蟻森林為例。

• 商業目標：簡單說就是替企業賺錢或替企業省錢，螞蟻森林屬於後者，它不是盈利性產品，但是它屬於支付寶產品的戰略支持層面，它的商業價值是提升整個支付寶產品的用戶活躍度。
• 品牌識別：品牌識別可以是概念系統，也可以是情緒反應，用戶與產品產生交互時不可避免地在腦海中形成的品牌形象。比如，螞蟻森林有助於支付寶豎立正面的品牌形象，通過公益的結合，提升「企業道德」，獲得用戶好感。
• 成功標準：指一些可量化可追蹤的指標，用來顯示產品是否滿足了我們的目標和用戶需求。比如，螞蟻森林本身的日活月活等以及它的上線後對支付寶產品用戶活躍度的提升、對阿里/支付寶品牌形象的提升等。

（2）用戶需求

用戶需求即用戶希望通過產品得到什麼，而戰略層制定的一項重要工作就是確定用戶需求，主要有用戶細分和用戶研究兩個方面。

用戶細分方法：通過用戶細分構建完整的用戶畫像

• 人口統計學：包括性別、年齡、教育水平、婚姻狀況、收入等。
• 消費心態檔案：用來描述用戶對於這個世界，尤其是與你的產品有關的某個事物的觀點和看法的心理分析方法。
• 用戶認知程度：用戶對於網際網路產品的熟悉程度和適應程度，是小白用戶還是重度用戶。

用戶研究方法：通過用戶研究確認用戶需求。

• 市場調研方法：問卷調查、用戶訪談、焦點小組
• 現場調查：一整套完整、有效且全面的方法，用於了解在日常生活情境中的用戶行為
• 任務分析：每一個用戶與產品的交互行為都發生在執行某一任務的環境中
• 用戶測試：請用戶來幫忙測試你的產品，最終目標是尋找令產品更容易使用的途徑，具體可參照《Don’t make me think》一書，可用性測試也是我自己常用的驗證產品方案可行可用性方法。

創建人物角色：也可以稱作用戶模型或用戶簡介，代表真實用戶需求的虛構人物。

通過用戶調查和用戶細分過程中得到的分散資料重新關聯起來，賦予一張人物的面孔和名字，創建出代表真實用戶需求的虛構人物。咱們仍然以螞蟻森林舉個例子：

2、範圍層

制定完戰略層，我們對「企業想要從產品獲得什麼」和「用戶想要從產品獲得什麼」有了一個較清晰的認知，接下來要做的就是對已確認需求進行進一步具體拆分細化和排定優先級，考慮提供給用戶什麼樣的功能和內容。

（1）功能需求

功能型方面考慮的主要是具體滿足用戶哪些需求，需求又大致可以分為三類：障眼需求、根本需求和潛在需求。

舉個例子，就像我上一篇文章《從一個包子的誕生談產品工作流程》中提到的：一個北方人希望安裝第三隻手，原因是這樣他就可以一隻手拿饅頭，一隻手夾菜，一隻手做作業，這就是障眼需求。因為他的根本需求是邊吃飯邊做作業，而實現方式有很多更好的方案，比如把饅頭和菜整合一起做成包子，這樣就可以一隻手拿包子，一隻手做作業，而不是奇葩地安裝上第三隻手。通過這個需求我們發現潛在需求是提升做作業的效率，而不是一定要佔用吃飯時間。

（2）內容需求

內容型方面需要與功能需求相配合、融合，有效地收集和管理內容資源。內容包括但不局限於音視頻、圖片和文字，內容特性想要達到的規模，將對你所做出的用戶體驗決策產生極大的影響。我們直接舉個例子，以下為某基金排行，優先展示全部的月排行，展示內容重心為各基金近一周和近一月的漲跌數據，並以近一月漲跌降序排列。

（3）確定優先級

範圍層決策的一項重要工作就是排定優先級，在調研過程中會發現大量的用戶需求，有時候一個戰略目標會對應多個需求，一個需求會對應多個功能，但是在快節奏的網際網路環境中，留給產品上線或迭代的時間很有限，我們必須學會排定功能的開發優先級，快速迭代。

（4）功能規格說明

文檔不能解決問題，但是定義可以，我很喜歡這句話。功能規格說明不需要包含產品的每個細節——只需要包含在設計或開發過程中出現有可能混淆的功能定義，主要包括以下幾種規則：全面但不細微、樂觀正面表述、具體和避免主觀的語氣。這也是PRD文檔的一部分，我後面會詳細再寫篇PRD文檔內容的文章，這裡就不展開闡述。

3、結構層

結構層就是將範圍層中那些分散的需求/功能片段組成一個整體。

（1）互動設計

功能方面考慮的主要是互動設計，關注於描述「可能的用戶行為」，同時定義「系統如何配合與響應」這些用戶行為。互動設計是一門大學科，可以詳見我其他專門的文章，這裡主要闡述概念模型。概念模型就是在用戶慣有思維裡「交互組件將怎樣工作」的思維模型，被舉得最多的例子就是電商平臺的購物：挑選商品—放入/移出購物車—結帳—訂單和發票。不止電商產品，大部分網際網路產品的概念模型都可以在現實生活中找到映射，比如滴滴問世之前大家的打車行為、美團問世之前商家的促銷行為等。

（2）信息架構

內容方面主要考慮的是信息架構，信息架構關注的就是呈現給用戶的信息是否合理並具有意義。對於用戶來說，能否快速的找到想要的東西將極大地影響用戶體驗，所以產品的友好程度也很大部分取決於信息結構的目的：設計出讓用戶容易找到信息的系統。

信息架構的設計原則：與戰略層的產品目標和用戶需求相對應；識別用戶心中至關重要的信息並呈現。咱們以某基金產品中單個基金的展示界面為例：該基金產品目標是為廣大投資者提供專業、及時、全面的基金資訊。用戶點擊某個基金最想看到的是該基金的收益情況。所以該界面重點呈現的是該基金最近淨值以及當日漲跌情況，然後是近期收益情況。

信息架構設計的結構化方法：層級式結構、矩陣結構、自然結構、線性結構；從上到下&從下到上，要具備「容納成長和適應變動」的能力。以下舉個某產品的信息架構為例子：

對於結構層設計的闡述中，給我感觸很深的一個觀點是：結構質量最重要的標準，不是「整個過程一個需要多少儘量少的步驟」，而是「用戶是否認為每個步驟都是合理的」以及「當前步驟是否合理地延續了上個步驟中的任務」。這個思維最直接的體現例子就是移動端產品的註冊登錄分步形式，而不是擠在同一個頁面。

4、框架層

經過結構層設計，我們的產品已經有了一個整體的形象，就像一個人有了一副骨頭架子。接下來我們要做的就是在合適的位置恰如其分地填充上血肉，確定很詳細的界面外觀、導航和信息設計。

（1）界面設計

• 說明：從功能方面考慮，界面設計就是提供給用戶做某些事的能力，安排好能讓用戶與系統的功能產品互動的界面元素。通過它，用戶能真正接觸到那些「在結構層的互動設計中」確定的「具體功能」。
• 目標：用戶一眼就能看到和使用最重要的東西，如上面基金界面中，最新淨值和日漲幅放在了最顯眼的位置。
• 做法：基於用戶最常採用的行為，交互元素的布局要讓用戶用最容易的方式獲取和使用。

（2）導航設計

• 說明：提供給用戶去某個地方的能力。
• 目標：實現跳轉、傳達各導航按鈕和它們所包含內容的關係，傳達導航內容和當前閱覽頁面之間的關係。
• 做法：清楚地告訴用戶「他們來自哪裡」「他們在哪裡」「他們可以去哪裡」。

（3）信息設計

• 說明：微觀的信息架構，具體頁面上的信息呈現。
• 目標：用一種能「反映用戶的思路」和「支持他們的任務和目標」的方式來分類和排列這些信息元素。
• 做法：將信息分類，按優先級排列，遵循用戶的思路。

5、表現層

在框架層，主要解決的是放置的問題。界面設計考慮可交互元素的布局，導航設計考慮在產品中引導用戶移動的元素的安排，信息設計考慮傳達給用戶的信息要素的排布。接下來就是表現層，主要解決並彌補「產品框架層的邏輯排布」的感知呈現問題。就像一個人在骨骼架上填充完血肉，但還是顯得晦澀，不便面世，這時候還需要雕刻上精細的五官，水嫩的皮膚、修長的手腳指等。

（1）嗅覺/味覺/觸覺設計

在網際網路產品中較少使用到這些方面，在AI產品中可能會較為常見，此處不做詳細展開。

（2）聽覺設計

聽覺設計在遊戲類產品中較為常見，在非遊戲類產品中多用作通知提醒，此處也不做詳細展開。

（3）視覺設計

表現層設計中最為常見的就是視覺設計，咱們做重點闡述。

① 讓產品「說話」

一個好的視覺設計，能夠正確地延續上層確立的產品思路，給予相應視覺效果支持。比如傳遞品牌形象、提高付費轉化率等，舉個例子，下圖為某個職場社交軟體，選擇藍色為主色調，無論加載頁還是icon等都以商務範為基礎，很好地支持了職場社交的品牌形象。

② 視覺對比和引導

在不破壞網站結構情況下，加強各個模塊之間的區分，把用戶的注意力吸引到界面中的關鍵部分。用戶的瀏覽軌跡是流暢的路徑，各個設計元素不會分散用戶注意力，視覺引導支持用戶去完成他們的目標任務。

同樣以剛才那個基金界面舉例：關鍵信息採用綠色色塊展示，一眼就能看到；次重要信息採用白色色塊，中間用灰色色塊隔離，模塊清晰不突兀；漲跌幅分別採用紅綠色字體，看到跌幅是綠色的可一定程度降低心裡牴觸；想要用戶產生點擊行為的「購買/定投」採用具有誘惑力的橘黃色展示；整個用戶瀏覽軌跡也非常順暢，並能夠很快聚焦重點內容。

③ 內部視覺設計的一致性

視覺設計的一致性能夠使產品的設計有效地傳達信息，而不會導致用戶迷茫或焦慮。這邊舉個反例吧，某公司作為一個挺大的公司，這設計真的不敢恭維，我第一次用的時候都有點暈，各頁面跳轉後感覺不是同一個產品裡，估計一個因素是各部分內容的產品經理和設計團隊不同，而且還沒有統一的設計規範；另一個因素是該公司誕生於PC時代，很多地方把網頁風格帶入了移動產品中。

③ 設計合成品和風格指南

設計合成品也可以稱為視覺模型，確切地說，它就是從已選定的各個獨立的組件中建立起來的、一個最終的可視化產品。從框架層的線框圖到表現層的設計合成品，是從一個個蒼白組件過渡成為一個有機整體的過程。

風格指南的建立是由於：隨著時間推移，我們的決策原因會逐漸從記憶中消失；當人們離開這份工作後，後來者能夠很好地繼承這些標準。所以我們需要風格指南來承載這些設計決策，這份文檔確定了視覺設計的每個方面，從最大到最小範圍內的所有元素以及某一個模塊或功能的具體標準。其實從上面一個例子就可以看出風格指南有多重要了。

三、總結

體驗要素五個層面間無論自上而下還是自下而上都是息息相關的，如果更高層面比如表現層設計地亂七八糟，用戶可能很快就會離開而不會注意到你的範圍層決策多麼英明，你的互動設計做得多麼好。如果更低層面比如結構層設計錯誤，那麼更高層面的決定和設計就失去意義，只會是花架子。所以我們在用戶體驗設計過程中需要根據實際情況，在自上而下和自下而上中取得平衡，真正做到以用戶為中心的產品設計。

最後，感謝你的閱讀，有興趣的朋友也可以看我其他文章《從一個包子的誕生談產品工作流程》和《四步分析真實案例，讓你線上用戶訪談也能深度挖掘》。

 

作者：古道千，曾經創業者，現於上海，意向深耕在線教育領域，喜歡看書、旅遊、攝影

本文由 @古道千 原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pixabay，基於 CC0 協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}