看過了很多描述用戶體驗(yàn)五個(gè)層次的文章，但感覺很多都淺嘗而止，今天我特地結(jié)合了十來個(gè)案例對用戶體驗(yàn)進(jìn)行了一次相對全面的闡述，希望大家在閱讀時(shí)也能夠同樣尋找相關(guān)產(chǎn)品進(jìn)行比照和論證，想必會(huì)更有收獲。

一、概要

用戶體驗(yàn)設(shè)計(jì)就是“以用戶為中心的設(shè)計(jì)”，即創(chuàng)造“每件事都按照正確的方式在工作”的用戶體驗(yàn)，讓用戶賓至如歸，就像《Don’t make me think》里提到的“這會(huì)讓用戶覺得自己更聰明，更能把握全局，這會(huì)讓他們成為老用戶”。Garrett 大師圍繞“以用戶為中心的設(shè)計(jì)”得出一套產(chǎn)品設(shè)計(jì)的思維方式：從抽象到具體逐層擊破五個(gè)層面，包括戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層，最終達(dá)到用戶體驗(yàn)設(shè)計(jì)目的。

二、五個(gè)層面

1、戰(zhàn)略層

戰(zhàn)略層的制定決定了產(chǎn)品的基本走向，它是以企業(yè)目標(biāo)為前提，根據(jù)產(chǎn)品目標(biāo)和用戶需求來制定。

（1）產(chǎn)品目標(biāo)

產(chǎn)品目標(biāo)即企業(yè)要通過產(chǎn)品得到什么，主要通過三個(gè)方面來衡量：商業(yè)目標(biāo)、品牌標(biāo)識(shí)和成功標(biāo)準(zhǔn)。以下以支付寶的螞蟻森林為例。

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

（2）用戶需求

用戶需求即用戶希望通過產(chǎn)品得到什么，而戰(zhàn)略層制定的一項(xiàng)重要工作就是確定用戶需求，主要有用戶細(xì)分和用戶研究兩個(gè)方面。

用戶細(xì)分方法：通過用戶細(xì)分構(gòu)建完整的用戶畫像

• 人口統(tǒng)計(jì)學(xué)：包括性別、年齡、教育水平、婚姻狀況、收入等。
• 消費(fèi)心態(tài)檔案：用來描述用戶對于這個(gè)世界，尤其是與你的產(chǎn)品有關(guān)的某個(gè)事物的觀點(diǎn)和看法的心理分析方法。
• 用戶認(rèn)知程度：用戶對于互聯(lián)網(wǎng)產(chǎn)品的熟悉程度和適應(yīng)程度，是小白用戶還是重度用戶。

用戶研究方法：通過用戶研究確認(rèn)用戶需求。

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

創(chuàng)建人物角色：也可以稱作用戶模型或用戶簡介，代表真實(shí)用戶需求的虛構(gòu)人物。

通過用戶調(diào)查和用戶細(xì)分過程中得到的分散資料重新關(guān)聯(lián)起來，賦予一張人物的面孔和名字，創(chuàng)建出代表真實(shí)用戶需求的虛構(gòu)人物。咱們?nèi)匀灰晕浵伾峙e個(gè)例子：

2、范圍層

制定完戰(zhàn)略層，我們對“企業(yè)想要從產(chǎn)品獲得什么”和“用戶想要從產(chǎn)品獲得什么”有了一個(gè)較清晰的認(rèn)知，接下來要做的就是對已確認(rèn)需求進(jìn)行進(jìn)一步具體拆分細(xì)化和排定優(yōu)先級，考慮提供給用戶什么樣的功能和內(nèi)容。

（1）功能需求

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

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

（2）內(nèi)容需求

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

（3）確定優(yōu)先級

范圍層決策的一項(xiàng)重要工作就是排定優(yōu)先級，在調(diào)研過程中會(huì)發(fā)現(xiàn)大量的用戶需求，有時(shí)候一個(gè)戰(zhàn)略目標(biāo)會(huì)對應(yīng)多個(gè)需求，一個(gè)需求會(huì)對應(yīng)多個(gè)功能，但是在快節(jié)奏的互聯(lián)網(wǎng)環(huán)境中，留給產(chǎn)品上線或迭代的時(shí)間很有限，我們必須學(xué)會(huì)排定功能的開發(fā)優(yōu)先級，快速迭代。

（4）功能規(guī)格說明

文檔不能解決問題，但是定義可以，我很喜歡這句話。功能規(guī)格說明不需要包含產(chǎn)品的每個(gè)細(xì)節(jié)——只需要包含在設(shè)計(jì)或開發(fā)過程中出現(xiàn)有可能混淆的功能定義，主要包括以下幾種規(guī)則：全面但不細(xì)微、樂觀正面表述、具體和避免主觀的語氣。這也是PRD文檔的一部分，我后面會(huì)詳細(xì)再寫篇PRD文檔內(nèi)容的文章，這里就不展開闡述。

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

結(jié)構(gòu)層就是將范圍層中那些分散的需求/功能片段組成一個(gè)整體。

（1）交互設(shè)計(jì)

功能方面考慮的主要是交互設(shè)計(jì)，關(guān)注于描述“可能的用戶行為”，同時(shí)定義“系統(tǒng)如何配合與響應(yīng)”這些用戶行為。交互設(shè)計(jì)是一門大學(xué)科，可以詳見我其他專門的文章，這里主要闡述概念模型。概念模型就是在用戶慣有思維里“交互組件將怎樣工作”的思維模型，被舉得最多的例子就是電商平臺(tái)的購物：挑選商品—放入/移出購物車—結(jié)賬—訂單和發(fā)票。不止電商產(chǎn)品，大部分互聯(lián)網(wǎng)產(chǎn)品的概念模型都可以在現(xiàn)實(shí)生活中找到映射，比如滴滴問世之前大家的打車行為、美團(tuán)問世之前商家的促銷行為等。

（2）信息架構(gòu)

內(nèi)容方面主要考慮的是信息架構(gòu)，信息架構(gòu)關(guān)注的就是呈現(xiàn)給用戶的信息是否合理并具有意義。對于用戶來說，能否快速的找到想要的東西將極大地影響用戶體驗(yàn)，所以產(chǎn)品的友好程度也很大部分取決于信息結(jié)構(gòu)的目的：設(shè)計(jì)出讓用戶容易找到信息的系統(tǒng)。

信息架構(gòu)的設(shè)計(jì)原則：與戰(zhàn)略層的產(chǎn)品目標(biāo)和用戶需求相對應(yīng)；識(shí)別用戶心中至關(guān)重要的信息并呈現(xiàn)。咱們以某基金產(chǎn)品中單個(gè)基金的展示界面為例：該基金產(chǎn)品目標(biāo)是為廣大投資者提供專業(yè)、及時(shí)、全面的基金資訊。用戶點(diǎn)擊某個(gè)基金最想看到的是該基金的收益情況。所以該界面重點(diǎn)呈現(xiàn)的是該基金最近凈值以及當(dāng)日漲跌情況，然后是近期收益情況。

信息架構(gòu)設(shè)計(jì)的結(jié)構(gòu)化方法：層級式結(jié)構(gòu)、矩陣結(jié)構(gòu)、自然結(jié)構(gòu)、線性結(jié)構(gòu)；從上到下&從下到上，要具備“容納成長和適應(yīng)變動(dòng)”的能力。以下舉個(gè)某產(chǎn)品的信息架構(gòu)為例子：

對于結(jié)構(gòu)層設(shè)計(jì)的闡述中，給我感觸很深的一個(gè)觀點(diǎn)是：結(jié)構(gòu)質(zhì)量最重要的標(biāo)準(zhǔn)，不是“整個(gè)過程一個(gè)需要多少盡量少的步驟”，而是“用戶是否認(rèn)為每個(gè)步驟都是合理的”以及“當(dāng)前步驟是否合理地延續(xù)了上個(gè)步驟中的任務(wù)”。這個(gè)思維最直接的體現(xiàn)例子就是移動(dòng)端產(chǎn)品的注冊登錄分步形式，而不是擠在同一個(gè)頁面。

4、框架層

經(jīng)過結(jié)構(gòu)層設(shè)計(jì)，我們的產(chǎn)品已經(jīng)有了一個(gè)整體的形象，就像一個(gè)人有了一副骨頭架子。接下來我們要做的就是在合適的位置恰如其分地填充上血肉，確定很詳細(xì)的界面外觀、導(dǎo)航和信息設(shè)計(jì)。

（1）界面設(shè)計(jì)

• 說明：從功能方面考慮，界面設(shè)計(jì)就是提供給用戶做某些事的能力，安排好能讓用戶與系統(tǒng)的功能產(chǎn)品互動(dòng)的界面元素。通過它，用戶能真正接觸到那些“在結(jié)構(gòu)層的交互設(shè)計(jì)中”確定的“具體功能”。
• 目標(biāo)：用戶一眼就能看到和使用最重要的東西，如上面基金界面中，最新凈值和日漲幅放在了最顯眼的位置。
• 做法：基于用戶最常采用的行為，交互元素的布局要讓用戶用最容易的方式獲取和使用。

（2）導(dǎo)航設(shè)計(jì)

• 說明：提供給用戶去某個(gè)地方的能力。
• 目標(biāo)：實(shí)現(xiàn)跳轉(zhuǎn)、傳達(dá)各導(dǎo)航按鈕和它們所包含內(nèi)容的關(guān)系，傳達(dá)導(dǎo)航內(nèi)容和當(dāng)前閱覽頁面之間的關(guān)系。
• 做法：清楚地告訴用戶“他們來自哪里”“他們在哪里”“他們可以去哪里”。

（3）信息設(shè)計(jì)

• 說明：微觀的信息架構(gòu)，具體頁面上的信息呈現(xiàn)。
• 目標(biāo)：用一種能“反映用戶的思路”和“支持他們的任務(wù)和目標(biāo)”的方式來分類和排列這些信息元素。
• 做法：將信息分類，按優(yōu)先級排列，遵循用戶的思路。

5、表現(xiàn)層

在框架層，主要解決的是放置的問題。界面設(shè)計(jì)考慮可交互元素的布局，導(dǎo)航設(shè)計(jì)考慮在產(chǎn)品中引導(dǎo)用戶移動(dòng)的元素的安排，信息設(shè)計(jì)考慮傳達(dá)給用戶的信息要素的排布。接下來就是表現(xiàn)層，主要解決并彌補(bǔ)“產(chǎn)品框架層的邏輯排布”的感知呈現(xiàn)問題。就像一個(gè)人在骨骼架上填充完血肉，但還是顯得晦澀，不便面世，這時(shí)候還需要雕刻上精細(xì)的五官，水嫩的皮膚、修長的手腳指等。

（1）嗅覺/味覺/觸覺設(shè)計(jì)

在互聯(lián)網(wǎng)產(chǎn)品中較少使用到這些方面，在AI產(chǎn)品中可能會(huì)較為常見，此處不做詳細(xì)展開。

（2）聽覺設(shè)計(jì)

聽覺設(shè)計(jì)在游戲類產(chǎn)品中較為常見，在非游戲類產(chǎn)品中多用作通知提醒，此處也不做詳細(xì)展開。

（3）視覺設(shè)計(jì)

表現(xiàn)層設(shè)計(jì)中最為常見的就是視覺設(shè)計(jì)，咱們做重點(diǎn)闡述。

① 讓產(chǎn)品“說話”

一個(gè)好的視覺設(shè)計(jì)，能夠正確地延續(xù)上層確立的產(chǎn)品思路，給予相應(yīng)視覺效果支持。比如傳遞品牌形象、提高付費(fèi)轉(zhuǎn)化率等，舉個(gè)例子，下圖為某個(gè)職場社交軟件，選擇藍(lán)色為主色調(diào)，無論加載頁還是icon等都以商務(wù)范為基礎(chǔ)，很好地支持了職場社交的品牌形象。

② 視覺對比和引導(dǎo)

在不破壞網(wǎng)站結(jié)構(gòu)情況下，加強(qiáng)各個(gè)模塊之間的區(qū)分，把用戶的注意力吸引到界面中的關(guān)鍵部分。用戶的瀏覽軌跡是流暢的路徑，各個(gè)設(shè)計(jì)元素不會(huì)分散用戶注意力，視覺引導(dǎo)支持用戶去完成他們的目標(biāo)任務(wù)。

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

③ 內(nèi)部視覺設(shè)計(jì)的一致性

視覺設(shè)計(jì)的一致性能夠使產(chǎn)品的設(shè)計(jì)有效地傳達(dá)信息，而不會(huì)導(dǎo)致用戶迷?；蚪箲]。這邊舉個(gè)反例吧，某公司作為一個(gè)挺大的公司，這設(shè)計(jì)真的不敢恭維，我第一次用的時(shí)候都有點(diǎn)暈，各頁面跳轉(zhuǎn)后感覺不是同一個(gè)產(chǎn)品里，估計(jì)一個(gè)因素是各部分內(nèi)容的產(chǎn)品經(jīng)理和設(shè)計(jì)團(tuán)隊(duì)不同，而且還沒有統(tǒng)一的設(shè)計(jì)規(guī)范；另一個(gè)因素是該公司誕生于PC時(shí)代，很多地方把網(wǎng)頁風(fēng)格帶入了移動(dòng)產(chǎn)品中。

③ 設(shè)計(jì)合成品和風(fēng)格指南

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

風(fēng)格指南的建立是由于：隨著時(shí)間推移，我們的決策原因會(huì)逐漸從記憶中消失；當(dāng)人們離開這份工作后，后來者能夠很好地繼承這些標(biāo)準(zhǔn)。所以我們需要風(fēng)格指南來承載這些設(shè)計(jì)決策，這份文檔確定了視覺設(shè)計(jì)的每個(gè)方面，從最大到最小范圍內(nèi)的所有元素以及某一個(gè)模塊或功能的具體標(biāo)準(zhǔn)。其實(shí)從上面一個(gè)例子就可以看出風(fēng)格指南有多重要了。

三、總結(jié)

體驗(yàn)要素五個(gè)層面間無論自上而下還是自下而上都是息息相關(guān)的，如果更高層面比如表現(xiàn)層設(shè)計(jì)地亂七八糟，用戶可能很快就會(huì)離開而不會(huì)注意到你的范圍層決策多么英明，你的交互設(shè)計(jì)做得多么好。如果更低層面比如結(jié)構(gòu)層設(shè)計(jì)錯(cuò)誤，那么更高層面的決定和設(shè)計(jì)就失去意義，只會(huì)是花架子。所以我們在用戶體驗(yàn)設(shè)計(jì)過程中需要根據(jù)實(shí)際情況，在自上而下和自下而上中取得平衡，真正做到以用戶為中心的產(chǎn)品設(shè)計(jì)。

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

作者：古道千，曾經(jīng)創(chuàng)業(yè)者，現(xiàn)于上海，意向深耕在線教育領(lǐng)域，喜歡看書、旅游、攝影

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

題圖來自 Pixabay，基于 CC0 協(xié)議