1. 為什么“用戶體驗(yàn)要素”值得反復(fù)拆解產(chǎn)品經(jīng)理圈子里有個(gè)挺有意思的現(xiàn)象幾乎所有人都聽過《用戶體驗(yàn)要素》這本書但真正能把里面那套五層模型落到日常需求評(píng)審、原型設(shè)計(jì)和上線復(fù)盤里的人其實(shí)不多。更多人記住的是那句“用戶體驗(yàn)就是產(chǎn)品好不好用”然后繼續(xù)在需求文檔里堆功能點(diǎn)。我自己帶過幾個(gè)從零到一的產(chǎn)品項(xiàng)目也接手過一些“功能齊全但用戶就是不買賬”的爛攤子踩過的坑讓我越來越確信一件事——用戶體驗(yàn)不是界面美化也不是交互細(xì)節(jié)的堆砌它是一套從戰(zhàn)略到表現(xiàn)的完整決策鏈條。你跳過任何一層后面都得用更高的成本補(bǔ)回來。這篇文章我想聊的不是讀書筆記而是把“用戶體驗(yàn)要素”這套框架拆成能直接上手用的東西。核心關(guān)鍵詞就三個(gè)用戶體驗(yàn)、五層模型、產(chǎn)品設(shè)計(jì)。我會(huì)講清楚這五層分別解決什么問題、每一層的產(chǎn)出物長(zhǎng)什么樣、層與層之間怎么銜接以及在實(shí)際項(xiàng)目中怎么用這套框架去排查問題。不管你是剛?cè)胄械漠a(chǎn)品助理還是做了幾年但總覺得“差點(diǎn)意思”的交互設(shè)計(jì)師或者是一個(gè)需要把控產(chǎn)品方向的創(chuàng)業(yè)者這套東西都能幫你把模糊的“體驗(yàn)不好”翻譯成具體的、可執(zhí)行的改進(jìn)項(xiàng)。先說一個(gè)我自己的判斷大部分產(chǎn)品的體驗(yàn)問題根源不在執(zhí)行層而在戰(zhàn)略層和范圍層沒想清楚。表現(xiàn)層的問題最容易被發(fā)現(xiàn)也最容易被當(dāng)成全部問題來治結(jié)果就是改了一版又一版UI用戶該走還是走。五層模型最大的價(jià)值就是逼著你從下往上檢查而不是從上往下瞎猜。2. 五層模型到底在解決什么問題2.1 從抽象到具體的決策漏斗《用戶體驗(yàn)要素》里把用戶體驗(yàn)拆成五個(gè)層級(jí)戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。很多人把它理解成一個(gè)瀑布式的開發(fā)流程先做完戰(zhàn)略再做范圍一層層往下推。這個(gè)理解不算錯(cuò)但容易讓人誤以為必須嚴(yán)格按順序來。實(shí)際上它更像一個(gè)決策漏斗——越往下的層級(jí)越抽象越往上的層級(jí)越具體每一層都在回答一個(gè)核心問題。戰(zhàn)略層回答的是“我們?yōu)槭裁匆鲞@個(gè)產(chǎn)品用戶想從中得到什么”。范圍層回答的是“我們要做哪些功能不做哪些功能”。結(jié)構(gòu)層回答的是“這些功能怎么組織用戶怎么在信息之間穿梭”。框架層回答的是“界面上的元素怎么擺放導(dǎo)航怎么設(shè)計(jì)”。表現(xiàn)層回答的是“最終呈現(xiàn)給用戶的視覺和感知是什么樣的”。我習(xí)慣用一個(gè)類比來解釋蓋房子。戰(zhàn)略層是“這房子給誰住、用來干嘛”范圍層是“要幾個(gè)房間、有沒有車庫”結(jié)構(gòu)層是“房間怎么連通、動(dòng)線怎么走”框架層是“家具擺在哪、開關(guān)裝在哪”表現(xiàn)層是“墻面刷什么顏色、地板用什么材質(zhì)”。你不會(huì)在沒想清楚給誰住之前就開始挑瓷磚但現(xiàn)實(shí)中很多產(chǎn)品就是這么干的。2.2 每一層的核心產(chǎn)出物光知道五層的名字沒用得知道每一層該產(chǎn)出什么。我整理了一個(gè)對(duì)照表這是我在實(shí)際項(xiàng)目中反復(fù)用的檢查清單層級(jí)核心問題典型產(chǎn)出物常見失誤戰(zhàn)略層為什么做、為誰做用戶畫像、產(chǎn)品目標(biāo)、成功指標(biāo)目標(biāo)模糊用“提升體驗(yàn)”當(dāng)目標(biāo)范圍層做什么、不做什么功能列表、需求優(yōu)先級(jí)、內(nèi)容清單功能蔓延什么都想要結(jié)構(gòu)層怎么組織、怎么流轉(zhuǎn)信息架構(gòu)圖、流程圖、交互邏輯分類混亂用戶找不到東西框架層怎么擺放、怎么引導(dǎo)線框圖、導(dǎo)航設(shè)計(jì)、界面布局信息層級(jí)不清重點(diǎn)不突出表現(xiàn)層長(zhǎng)什么樣、感覺如何視覺稿、設(shè)計(jì)規(guī)范、動(dòng)效方案風(fēng)格不統(tǒng)一視覺壓過功能這張表我建議你打印出來貼在工位上。每次需求評(píng)審或者方案討論卡殼的時(shí)候?qū)φ找幌麓蟾怕誓芏ㄎ坏绞悄囊粚記]對(duì)齊。比如團(tuán)隊(duì)在爭(zhēng)論按鈕放左邊還是右邊這其實(shí)是框架層的問題但如果戰(zhàn)略層的目標(biāo)用戶都沒定義清楚這個(gè)爭(zhēng)論就沒有判斷標(biāo)準(zhǔn)最后只能靠“我覺得”來收?qǐng)觥?.3 為什么不能跳層跳層是產(chǎn)品設(shè)計(jì)里最常見的隱性成本。我見過一個(gè)項(xiàng)目戰(zhàn)略層只寫了一句“做一個(gè)面向年輕人的社交產(chǎn)品”然后直接跳到表現(xiàn)層開始畫界面風(fēng)格很潮、動(dòng)效很炫上線后留存率慘不忍睹。復(fù)盤的時(shí)候發(fā)現(xiàn)范圍層沒定義清楚核心功能是什么結(jié)構(gòu)層沒想明白用戶怎么建立關(guān)系框架層沒解決冷啟動(dòng)時(shí)內(nèi)容從哪來的問題。表現(xiàn)層做得再好也撐不起一個(gè)空殼。跳層的另一個(gè)表現(xiàn)是“用表現(xiàn)層的問題掩蓋結(jié)構(gòu)層的問題”。比如用戶反饋“找不到某個(gè)功能”產(chǎn)品團(tuán)隊(duì)的第一反應(yīng)往往是“那我們把入口放大一點(diǎn)、顏色調(diào)亮一點(diǎn)”。這可能在短期內(nèi)有效但如果根本原因是信息架構(gòu)不合理放大入口只是讓用戶更快地走進(jìn)死胡同。正確的做法是回到結(jié)構(gòu)層重新審視分類邏輯和導(dǎo)航路徑。注意五層模型不是讓你每次做需求都從戰(zhàn)略層重新推導(dǎo)一遍。對(duì)于成熟產(chǎn)品的迭代戰(zhàn)略層和范圍層通常是穩(wěn)定的你只需要在結(jié)構(gòu)層、框架層、表現(xiàn)層里做調(diào)整。但如果是新產(chǎn)品或者大版本重構(gòu)從下往上完整走一遍是值得的。3. 戰(zhàn)略層把“用戶想要”翻譯成“產(chǎn)品目標(biāo)”3.1 用戶需求不是問出來的戰(zhàn)略層最核心的兩件事定義用戶需求定義產(chǎn)品目標(biāo)。聽起來簡(jiǎn)單做起來最難。因?yàn)橛脩粜枨笸皇怯脩糁苯诱f出來的。亨利·福特那句“如果我問用戶想要什么他們會(huì)說想要一匹更快的馬”被引用爛了但道理是對(duì)的。用戶能描述的是他們遇到的問題不是解決方案。我在實(shí)際項(xiàng)目中用的是一個(gè)“三層追問法”。第一層問“你遇到了什么不方便”第二層問“這個(gè)問題在什么場(chǎng)景下發(fā)生”第三層問“如果這個(gè)問題解決了你的感受會(huì)有什么變化”。舉個(gè)例子用戶說“你們的搜索功能不好用”這是第一層。追問下去發(fā)現(xiàn)是在商品數(shù)量超過一定量之后搜索結(jié)果排序不符合預(yù)期這是第二層。再追問發(fā)現(xiàn)用戶真正在意的是“快速找到符合預(yù)算且評(píng)價(jià)好的選項(xiàng)”這是第三層。到了第三層你才知道要優(yōu)化的不是搜索框的樣式而是排序算法和篩選條件的設(shè)計(jì)。這個(gè)方法的要點(diǎn)是不要問用戶“你想要什么功能”而是問“你在什么場(chǎng)景下遇到了什么阻礙”。功能是解決方案場(chǎng)景和阻礙才是需求本身。3.2 產(chǎn)品目標(biāo)要可衡量“提升用戶體驗(yàn)”不是產(chǎn)品目標(biāo)因?yàn)樗鼪]法衡量。戰(zhàn)略層的產(chǎn)品目標(biāo)必須是具體的、可量化的。我通常會(huì)把目標(biāo)分成三類用戶目標(biāo)、業(yè)務(wù)目標(biāo)、技術(shù)目標(biāo)。用戶目標(biāo)關(guān)注的是用戶行為和感受的變化比如“新用戶首次完成核心操作的時(shí)間從3分鐘降到1分鐘以內(nèi)”。業(yè)務(wù)目標(biāo)關(guān)注的是商業(yè)指標(biāo)比如“注冊(cè)轉(zhuǎn)化率提升15%”。技術(shù)目標(biāo)關(guān)注的是系統(tǒng)能力比如“頁面加載時(shí)間控制在2秒以內(nèi)”。這三類目標(biāo)之間往往存在張力比如為了提升注冊(cè)轉(zhuǎn)化率把流程簡(jiǎn)化可能會(huì)犧牲一些用戶信息的完整性。戰(zhàn)略層的作用就是把這些張力擺到桌面上讓團(tuán)隊(duì)知道優(yōu)先級(jí)是什么。實(shí)操心得戰(zhàn)略層的目標(biāo)不要超過三個(gè)。超過三個(gè)等于沒有重點(diǎn)。我見過一個(gè)項(xiàng)目的戰(zhàn)略文檔寫了八個(gè)目標(biāo)結(jié)果每個(gè)季度都在調(diào)整優(yōu)先級(jí)團(tuán)隊(duì)疲于奔命。后來砍到兩個(gè)核心目標(biāo)反而推進(jìn)得更快。3.3 用戶畫像要具體到能吵架用戶畫像不是畫一個(gè)卡通人物寫上“張三28歲白領(lǐng)”就完事了。好的用戶畫像應(yīng)該具體到團(tuán)隊(duì)能為了“這個(gè)功能張三會(huì)不會(huì)用”而吵架。我習(xí)慣用“場(chǎng)景行為痛點(diǎn)”的結(jié)構(gòu)來描述用戶畫像。比如“通勤場(chǎng)景下的內(nèi)容消費(fèi)者”每天早上8點(diǎn)到9點(diǎn)在地鐵上單手操作手機(jī)網(wǎng)絡(luò)信號(hào)不穩(wěn)定主要行為是快速瀏覽標(biāo)題和短內(nèi)容痛點(diǎn)是加載慢、操作復(fù)雜、內(nèi)容太長(zhǎng)看不完。這個(gè)畫像一出來很多設(shè)計(jì)決策就有了依據(jù)——按鈕要大、操作要少、內(nèi)容要短、加載要快。如果團(tuán)隊(duì)在爭(zhēng)論要不要加一個(gè)復(fù)雜的手勢(shì)操作對(duì)照這個(gè)畫像就知道答案了。戰(zhàn)略層還有一個(gè)容易被忽略的產(chǎn)出物不做什么。明確列出“我們不為哪些用戶服務(wù)”“我們不解決哪些問題”這比列出要做什么更能統(tǒng)一團(tuán)隊(duì)認(rèn)知。我見過太多產(chǎn)品因?yàn)橄胗懞盟腥俗詈笳l都沒討好。4. 范圍層功能取舍的決策框架4.1 功能列表不是越長(zhǎng)越好范圍層的核心任務(wù)是決定“做什么”和“不做什么”。大部分團(tuán)隊(duì)在這一層的典型問題是功能蔓延——每個(gè)需求評(píng)審都有人提“順便把這個(gè)也做了吧”結(jié)果版本越做越大上線時(shí)間一推再推核心功能反而沒打磨好。我用的方法是“功能價(jià)值矩陣”。橫軸是“用戶價(jià)值”縱軸是“實(shí)現(xiàn)成本”把每個(gè)候選功能放進(jìn)四個(gè)象限高價(jià)值低成本優(yōu)先做、高價(jià)值高成本規(guī)劃做、低價(jià)值低成本有空做、低價(jià)值高成本不做。這個(gè)矩陣的關(guān)鍵是“用戶價(jià)值”的評(píng)估標(biāo)準(zhǔn)要統(tǒng)一不能憑感覺打分。評(píng)估用戶價(jià)值的時(shí)候我會(huì)問三個(gè)問題這個(gè)功能能幫用戶完成什么任務(wù)不做這個(gè)功能用戶有沒有替代方案這個(gè)功能影響的是核心用戶還是邊緣用戶三個(gè)問題的答案越具體打分越靠譜。4.2 需求優(yōu)先級(jí)不是拍腦袋優(yōu)先級(jí)排序是范圍層最容易引發(fā)爭(zhēng)論的環(huán)節(jié)。產(chǎn)品說這個(gè)重要技術(shù)說那個(gè)做不了設(shè)計(jì)說另一個(gè)體驗(yàn)更好。我的經(jīng)驗(yàn)是把優(yōu)先級(jí)判斷拆成可量化的維度讓爭(zhēng)論有據(jù)可依。我常用的維度有四個(gè)用戶覆蓋度影響多少用戶、使用頻率用戶多久用一次、業(yè)務(wù)影響對(duì)核心指標(biāo)的影響程度、實(shí)現(xiàn)復(fù)雜度技術(shù)成本和依賴關(guān)系。每個(gè)維度按1到5分打分加權(quán)求和。權(quán)重根據(jù)產(chǎn)品階段調(diào)整——早期產(chǎn)品更看重用戶覆蓋度和使用頻率成熟產(chǎn)品更看重業(yè)務(wù)影響。這個(gè)方法不能保證結(jié)果絕對(duì)正確但能讓討論從“我覺得”變成“數(shù)據(jù)說”。而且打分的過程本身就能暴露很多信息比如技術(shù)團(tuán)隊(duì)在評(píng)估復(fù)雜度的時(shí)候可能會(huì)提出更簡(jiǎn)單的替代方案。4.3 內(nèi)容清單和功能清單一樣重要范圍層不只是功能列表還包括內(nèi)容清單。特別是內(nèi)容型產(chǎn)品內(nèi)容的質(zhì)量、數(shù)量、更新頻率直接決定了用戶體驗(yàn)。我見過一個(gè)知識(shí)付費(fèi)產(chǎn)品功能做得很完善但內(nèi)容更新跟不上用戶來了發(fā)現(xiàn)沒什么可看的很快就流失了。內(nèi)容清單要明確內(nèi)容從哪來UGC還是PGC、內(nèi)容怎么分類、內(nèi)容怎么更新、內(nèi)容質(zhì)量怎么把控。這些問題如果在范圍層沒想清楚到了結(jié)構(gòu)層和框架層就會(huì)變成無解的難題。比如UGC內(nèi)容如果沒有審核機(jī)制到了表現(xiàn)層就會(huì)出現(xiàn)大量低質(zhì)量?jī)?nèi)容影響整體體驗(yàn)。常見問題范圍層和結(jié)構(gòu)層的邊界在哪里我的判斷標(biāo)準(zhǔn)是范圍層回答“有什么”結(jié)構(gòu)層回答“怎么組織”。比如“有文章、視頻、音頻三種內(nèi)容形式”是范圍層“這三種內(nèi)容怎么分類、怎么關(guān)聯(lián)、怎么推薦”是結(jié)構(gòu)層。5. 結(jié)構(gòu)層讓用戶不迷路的信息架構(gòu)5.1 信息架構(gòu)的三種組織方式結(jié)構(gòu)層的核心是信息架構(gòu)和交互設(shè)計(jì)。信息架構(gòu)解決的是“內(nèi)容怎么分類”交互設(shè)計(jì)解決的是“用戶怎么操作”。這兩件事經(jīng)常被混在一起討論但它們的判斷標(biāo)準(zhǔn)不同。信息架構(gòu)的好壞看用戶能不能找到東西交互設(shè)計(jì)的好壞看用戶能不能順暢完成任務(wù)。信息架構(gòu)有三種基本的組織方式層級(jí)式、矩陣式、線性式。層級(jí)式最常見適合內(nèi)容有明確從屬關(guān)系的場(chǎng)景比如電商分類。矩陣式適合內(nèi)容可以從多個(gè)維度訪問的場(chǎng)景比如按價(jià)格和按品牌都能篩選。線性式適合有固定順序的場(chǎng)景比如注冊(cè)流程。選擇哪種方式取決于用戶的心智模型。用戶在想找某個(gè)東西的時(shí)候腦子里通常已經(jīng)有一個(gè)分類預(yù)期。如果你的分類和用戶的預(yù)期不一致用戶就會(huì)迷路。我常用的驗(yàn)證方法是“卡片分類法”把內(nèi)容項(xiàng)寫在卡片上讓目標(biāo)用戶自己分組看看他們的分類邏輯和你的設(shè)計(jì)是否一致。5.2 交互流程要畫到“異常路徑”畫流程圖的時(shí)候大部分人只畫正常路徑用戶打開頁面、點(diǎn)擊按鈕、完成任務(wù)。但真正影響體驗(yàn)的往往是異常路徑網(wǎng)絡(luò)斷了怎么辦、輸入錯(cuò)誤怎么辦、權(quán)限不夠怎么辦、內(nèi)容為空怎么辦。這些異常路徑如果在結(jié)構(gòu)層沒考慮到到了開發(fā)階段就會(huì)變成臨時(shí)補(bǔ)丁體驗(yàn)很難保證。我習(xí)慣在流程圖里用不同顏色標(biāo)注正常路徑和異常路徑異常路徑至少要考慮四種情況加載失敗、輸入無效、權(quán)限不足、內(nèi)容為空。每種情況都要有明確的用戶提示和下一步操作建議。比如內(nèi)容為空的時(shí)候是顯示“暫無內(nèi)容”還是推薦其他內(nèi)容是引導(dǎo)用戶去創(chuàng)建內(nèi)容還是返回上一頁這些決策在結(jié)構(gòu)層就要定下來。5.3 結(jié)構(gòu)層的驗(yàn)證方法結(jié)構(gòu)層的方案怎么驗(yàn)證最常用的方法是樹狀測(cè)試和可用性測(cè)試。樹狀測(cè)試是給用戶一個(gè)任務(wù)讓他在信息架構(gòu)樹里找到目標(biāo)內(nèi)容看能不能找到、需要幾步找到?？捎眯詼y(cè)試是讓用戶實(shí)際操作原型觀察他在哪里猶豫、在哪里出錯(cuò)。這兩種方法我都在項(xiàng)目里用過說句實(shí)在話樹狀測(cè)試更適合驗(yàn)證分類邏輯可用性測(cè)試更適合驗(yàn)證交互流程。如果時(shí)間有限優(yōu)先做可用性測(cè)試因?yàn)橛脩舻膶?shí)際操作行為比分類偏好更能暴露問題。測(cè)試樣本不用多5到8個(gè)目標(biāo)用戶就能發(fā)現(xiàn)大部分嚴(yán)重問題。實(shí)操心得做可用性測(cè)試的時(shí)候不要問用戶“你覺得這個(gè)設(shè)計(jì)怎么樣”而是給一個(gè)具體任務(wù)比如“你想買一雙跑步鞋預(yù)算500以內(nèi)請(qǐng)找到符合條件的商品”。觀察他的操作路徑記錄他在哪里停頓超過3秒、在哪里點(diǎn)了返回、在哪里皺眉頭。這些行為信號(hào)比口頭反饋可靠得多。6. 框架層界面上的每一像素都有理由6.1 線框圖的三個(gè)層次框架層的產(chǎn)出物主要是線框圖。線框圖不是隨便畫幾個(gè)框它要解決三個(gè)層次的問題信息層級(jí)、導(dǎo)航路徑、操作入口。信息層級(jí)決定用戶先看到什么、后看到什么。導(dǎo)航路徑?jīng)Q定用戶怎么在頁面之間跳轉(zhuǎn)。操作入口決定用戶在哪里完成核心操作。我畫線框圖的時(shí)候會(huì)遵循一個(gè)原則一個(gè)頁面只解決一個(gè)核心任務(wù)。如果一個(gè)頁面上有多個(gè)同等重要的任務(wù)用戶就會(huì)分心。比如商品詳情頁的核心任務(wù)是“讓用戶決定買不買”那么加入購(gòu)物車和立即購(gòu)買就是核心操作其他如分享、收藏、客服都是輔助操作在視覺權(quán)重上要明確區(qū)分。線框圖階段不要糾結(jié)顏色和字體那是表現(xiàn)層的事?？蚣軐雨P(guān)注的是布局和層級(jí)。我見過太多團(tuán)隊(duì)在線框圖階段就開始爭(zhēng)論按鈕顏色結(jié)果結(jié)構(gòu)問題被掩蓋了。6.2 導(dǎo)航設(shè)計(jì)的常見陷阱導(dǎo)航設(shè)計(jì)是框架層最容易出問題的地方。常見的陷阱有三個(gè)導(dǎo)航層級(jí)過深、導(dǎo)航標(biāo)簽含義模糊、導(dǎo)航狀態(tài)不清晰。導(dǎo)航層級(jí)過深是指用戶要點(diǎn)擊很多次才能到達(dá)目標(biāo)頁面。移動(dòng)端一般建議不超過三層桌面端可以適當(dāng)放寬。如果層級(jí)確實(shí)很深就要考慮用搜索、快捷入口、推薦等方式來縮短路徑。導(dǎo)航標(biāo)簽含義模糊是指用戶看了不知道點(diǎn)進(jìn)去是什么。比如“更多”“其他”“相關(guān)”這種標(biāo)簽用戶無法預(yù)判內(nèi)容。好的標(biāo)簽應(yīng)該是具體的、用戶能理解的比如“相似商品”“購(gòu)買過的人還看了”。導(dǎo)航狀態(tài)不清晰是指用戶不知道自己當(dāng)前在哪個(gè)位置。面包屑導(dǎo)航、高亮當(dāng)前菜單項(xiàng)、頁面標(biāo)題都是解決這個(gè)問題的常用手段。特別是移動(dòng)端用戶很容易迷失清晰的導(dǎo)航狀態(tài)能顯著降低焦慮感。6.3 框架層的檢查清單框架層方案完成后我會(huì)用一份檢查清單過一遍用戶第一眼看到的是不是最重要的信息核心操作是否在拇指可觸達(dá)的范圍內(nèi)移動(dòng)端頁面之間的跳轉(zhuǎn)邏輯是否一致返回操作是否符合用戶預(yù)期空狀態(tài)、加載狀態(tài)、錯(cuò)誤狀態(tài)是否都有設(shè)計(jì)信息密度是否適合目標(biāo)用戶的使用場(chǎng)景這份清單看起來簡(jiǎn)單但能篩掉大部分框架層的低級(jí)錯(cuò)誤。特別是空狀態(tài)和錯(cuò)誤狀態(tài)很多團(tuán)隊(duì)只設(shè)計(jì)正常狀態(tài)用戶遇到異常時(shí)看到一片空白或者一堆報(bào)錯(cuò)代碼體驗(yàn)直接崩掉。7. 表現(xiàn)層視覺不只是好看7.1 視覺設(shè)計(jì)的三個(gè)功能表現(xiàn)層是最容易被誤解的一層。很多人覺得表現(xiàn)層就是“把界面做好看”但實(shí)際上視覺設(shè)計(jì)承擔(dān)著三個(gè)功能引導(dǎo)注意力、傳達(dá)信息層級(jí)、建立情感連接。引導(dǎo)注意力是指通過顏色、大小、對(duì)比度等手段讓用戶的視線按照你期望的順序移動(dòng)。比如電商詳情頁用戶第一眼應(yīng)該看到商品圖片第二眼看到價(jià)格和核心賣點(diǎn)第三眼看到購(gòu)買按鈕。如果視覺設(shè)計(jì)沒有引導(dǎo)用戶可能第一眼看到的是促銷廣告反而忽略了商品本身。傳達(dá)信息層級(jí)是指通過視覺手段區(qū)分信息的重要程度。標(biāo)題和正文的字體大小、顏色深淺、間距大小都在告訴用戶哪些信息更重要。如果所有信息看起來都一樣重要用戶就不知道從哪里看起。建立情感連接是指視覺風(fēng)格傳遞出的情緒和調(diào)性。同樣是工具類產(chǎn)品有的看起來專業(yè)嚴(yán)謹(jǐn)有的看起來輕松活潑。這種調(diào)性要和目標(biāo)用戶的心理預(yù)期匹配。面向企業(yè)用戶的產(chǎn)品用太活潑的配色用戶會(huì)覺得不靠譜面向年輕用戶的產(chǎn)品用太沉悶的配色用戶會(huì)覺得無趣。7.2 設(shè)計(jì)規(guī)范的價(jià)值表現(xiàn)層最容易被忽視的產(chǎn)出物是設(shè)計(jì)規(guī)范。設(shè)計(jì)規(guī)范不是限制設(shè)計(jì)師的創(chuàng)造力而是保證產(chǎn)品在不同頁面、不同狀態(tài)下的一致性。沒有設(shè)計(jì)規(guī)范的產(chǎn)品做幾個(gè)版本之后就會(huì)出現(xiàn)各種不一致按鈕圓角不一樣、顏色深淺不一樣、間距大小不一樣。用戶可能說不出來哪里不對(duì)但會(huì)覺得“不精致”。設(shè)計(jì)規(guī)范至少應(yīng)該包含色彩系統(tǒng)主色、輔助色、語義色、字體系統(tǒng)字號(hào)、字重、行高、間距系統(tǒng)基礎(chǔ)單位、常用組合、組件庫按鈕、輸入框、卡片等。這些規(guī)范要同步給開發(fā)和測(cè)試確保實(shí)現(xiàn)和設(shè)計(jì)一致。常見問題設(shè)計(jì)規(guī)范做多細(xì)我的經(jīng)驗(yàn)是核心組件和常用頁面要細(xì)邊緣場(chǎng)景可以粗。比如按鈕的各種狀態(tài)默認(rèn)、懸停、點(diǎn)擊、禁用、加載要定義清楚但某個(gè)很少出現(xiàn)的彈窗可以靈活處理。規(guī)范是為了提高效率不是為了增加流程。7.3 表現(xiàn)層的驗(yàn)收標(biāo)準(zhǔn)表現(xiàn)層做完之后怎么驗(yàn)收我通常從三個(gè)維度檢查一致性、可讀性、適配性。一致性是指同一類元素在不同頁面是否表現(xiàn)一致。比如所有的主按鈕是不是同一個(gè)顏色、同一個(gè)圓角、同一個(gè)點(diǎn)擊反饋。可讀性是指文字是否清晰易讀包括字號(hào)是否夠大、對(duì)比度是否足夠、行高是否舒適。適配性是指在不同屏幕尺寸、不同設(shè)備上是否都能正常顯示。這三個(gè)維度里適配性最容易被忽略。設(shè)計(jì)師在電腦上看效果很好到了手機(jī)上發(fā)現(xiàn)文字太小、按鈕太擠。我建議在表現(xiàn)層階段就用真機(jī)測(cè)試不要等到開發(fā)完成才發(fā)現(xiàn)問題。8. 五層模型在實(shí)際項(xiàng)目中的排查應(yīng)用8.1 用五層模型定位問題五層模型最大的實(shí)用價(jià)值是排查問題。當(dāng)用戶反饋“體驗(yàn)不好”的時(shí)候你可以從下往上逐層檢查定位到具體是哪一層出了問題。我整理了一個(gè)排查表這是我在實(shí)際項(xiàng)目中反復(fù)用的用戶反饋可能的問題層級(jí)排查方向“不知道這個(gè)產(chǎn)品能干嘛”戰(zhàn)略層價(jià)值主張是否清晰“功能太多太亂”范圍層功能優(yōu)先級(jí)是否明確“找不到想要的東西”結(jié)構(gòu)層信息架構(gòu)是否合理“不知道怎么操作”框架層導(dǎo)航和引導(dǎo)是否清晰“看起來不舒服”表現(xiàn)層視覺規(guī)范是否統(tǒng)一這個(gè)表不能覆蓋所有情況但能幫你快速縮小排查范圍。比如用戶說“找不到想要的東西”你先檢查結(jié)構(gòu)層的信息架構(gòu)而不是急著改界面顏色。8.2 從表現(xiàn)層反推結(jié)構(gòu)層問題有時(shí)候表現(xiàn)層的問題其實(shí)是結(jié)構(gòu)層問題的癥狀。比如用戶反饋“頁面太亂”你去看表現(xiàn)層發(fā)現(xiàn)視覺設(shè)計(jì)確實(shí)有問題但改了一版之后用戶還是覺得亂。這時(shí)候就要往上追可能是結(jié)構(gòu)層的信息分類不合理導(dǎo)致頁面上堆了太多不相關(guān)的內(nèi)容。我遇到過一個(gè)典型案例一個(gè)后臺(tái)管理系統(tǒng)的用戶反饋“操作效率低”。表現(xiàn)層看界面很整潔按鈕也很清晰?？蚣軐涌磳?dǎo)航和布局也沒問題。追到結(jié)構(gòu)層才發(fā)現(xiàn)核心操作流程需要跳轉(zhuǎn)五個(gè)頁面每個(gè)頁面都要重新加載數(shù)據(jù)。用戶效率低的根源是流程設(shè)計(jì)不合理不是界面問題。后來把五個(gè)頁面合并成兩個(gè)效率問題就解決了。這個(gè)案例說明一個(gè)道理表現(xiàn)層的問題好改結(jié)構(gòu)層的問題難改但結(jié)構(gòu)層的問題影響更大。如果只改表現(xiàn)層可能短期內(nèi)用戶不抱怨了但根本問題還在。8.3 五層模型的迭代應(yīng)用五層模型不是一次性的而是持續(xù)迭代的。產(chǎn)品上線后用戶行為數(shù)據(jù)會(huì)告訴你哪一層需要調(diào)整。比如數(shù)據(jù)顯示用戶在某個(gè)頁面停留時(shí)間很短就離開了可能是框架層的信息層級(jí)有問題。如果用戶在某一步驟的流失率很高可能是結(jié)構(gòu)層的流程設(shè)計(jì)有問題。我習(xí)慣在每個(gè)版本復(fù)盤的時(shí)候用五層模型過一遍戰(zhàn)略層有沒有變化范圍層有沒有新增或砍掉功能結(jié)構(gòu)層有沒有調(diào)整框架層和表現(xiàn)層有沒有優(yōu)化這樣能保證產(chǎn)品迭代是有邏輯的而不是東改一下西改一下。實(shí)操心得不要試圖一次性把五層都做到完美。資源有限的情況下優(yōu)先保證戰(zhàn)略層和范圍層清晰結(jié)構(gòu)層合理框架層和表現(xiàn)層可以快速迭代。戰(zhàn)略層和范圍層的問題如果拖到后面才發(fā)現(xiàn)返工成本極高。9. 常見問題與避坑指南9.1 五層模型用不起來的原因很多人學(xué)了五層模型之后覺得“道理都懂但用不起來”。我觀察下來主要有三個(gè)原因。第一個(gè)原因是團(tuán)隊(duì)沒有共識(shí)。產(chǎn)品經(jīng)理學(xué)了五層模型但設(shè)計(jì)師和開發(fā)不認(rèn)討論的時(shí)候還是各說各的。解決辦法是在項(xiàng)目啟動(dòng)會(huì)上就把五層模型作為共同語言每個(gè)決策都明確是在哪一層做的。第二個(gè)原因是時(shí)間壓力。項(xiàng)目排期緊團(tuán)隊(duì)覺得“沒時(shí)間想那么多”直接跳到畫原型。結(jié)果原型改了一版又一版反而更浪費(fèi)時(shí)間。我的建議是哪怕只花半天時(shí)間把戰(zhàn)略層和范圍層對(duì)齊后面能省下好幾天的返工。第三個(gè)原因是缺乏驗(yàn)證。五層模型每一層都需要驗(yàn)證但很多團(tuán)隊(duì)做完方案就直接開發(fā)沒有用戶測(cè)試。我的經(jīng)驗(yàn)是結(jié)構(gòu)層和框架層至少要做一輪可用性測(cè)試表現(xiàn)層至少要做一輪視覺走查。這些驗(yàn)證花不了太多時(shí)間但能發(fā)現(xiàn)大部分嚴(yán)重問題。9.2 五層模型不是萬能藥五層模型是一個(gè)思考框架不是操作手冊(cè)。它幫你把復(fù)雜問題拆解成可管理的部分但具體怎么拆、怎么解還是要靠你的判斷。不同產(chǎn)品、不同階段、不同團(tuán)隊(duì)五層模型的用法都不一樣。比如To B產(chǎn)品和To C產(chǎn)品戰(zhàn)略層的側(cè)重點(diǎn)完全不同。To B產(chǎn)品更關(guān)注決策鏈和業(yè)務(wù)流程To C產(chǎn)品更關(guān)注用戶動(dòng)機(jī)和使用場(chǎng)景。再比如早期產(chǎn)品和成熟產(chǎn)品范圍層的策略也不同。早期產(chǎn)品要快速驗(yàn)證核心價(jià)值功能要少而精成熟產(chǎn)品要滿足不同用戶群體的需求功能可以更豐富。我見過一些團(tuán)隊(duì)把五層模型當(dāng)成 checklist每層都填一堆文檔結(jié)果文檔很厚但產(chǎn)品還是不行。問題在于他們把模型當(dāng)成了目的而不是工具。模型是幫你思考的不是替你思考的。9.3 五層模型和其他框架的關(guān)系五層模型和其他產(chǎn)品設(shè)計(jì)框架并不沖突而是互補(bǔ)的。比如設(shè)計(jì)思維Design Thinking強(qiáng)調(diào)同理心、定義問題、創(chuàng)意發(fā)散、原型驗(yàn)證這和五層模型的戰(zhàn)略層、范圍層、框架層、表現(xiàn)層有對(duì)應(yīng)關(guān)系。精益創(chuàng)業(yè)Lean Startup強(qiáng)調(diào)最小可行產(chǎn)品和快速迭代這和范圍層的功能取舍、表現(xiàn)層的快速驗(yàn)證也有交集。我的建議是把五層模型作為底層框架其他方法作為具體工具。比如用設(shè)計(jì)思維的方法做用戶調(diào)研用精益創(chuàng)業(yè)的方法做功能驗(yàn)證但整體上還是用五層模型來組織思考。這樣既有框架的完整性又有方法的靈活性。10. 我個(gè)人的一些實(shí)操體會(huì)做了這么多年產(chǎn)品五層模型對(duì)我最大的幫助不是讓我知道該做什么而是讓我知道不該做什么。每次團(tuán)隊(duì)討論陷入細(xì)節(jié)爭(zhēng)論的時(shí)候我就會(huì)問一句“這是哪一層的問題”這個(gè)問題往往能讓討論回到正確的軌道上。還有一個(gè)體會(huì)是五層模型里戰(zhàn)略層和范圍層是最需要反復(fù)確認(rèn)的。因?yàn)檫@兩層的變化會(huì)直接影響下面三層。我見過太多項(xiàng)目因?yàn)閼?zhàn)略層目標(biāo)變了導(dǎo)致范圍層功能要砍結(jié)構(gòu)層流程要改框架層和表現(xiàn)層全部重做。如果能在戰(zhàn)略層和范圍層多花一點(diǎn)時(shí)間對(duì)齊后面的返工成本會(huì)低很多。最后分享一個(gè)小技巧每次做新功能或者改版的時(shí)候先寫一句話描述這個(gè)功能在五層模型里分別是什么。比如“戰(zhàn)略層提升新用戶留存范圍層增加新手引導(dǎo)結(jié)構(gòu)層引導(dǎo)流程嵌入核心操作路徑框架層用氣泡提示和進(jìn)度條表現(xiàn)層品牌色和插畫風(fēng)格”。這一句話寫出來團(tuán)隊(duì)對(duì)要做什么就清楚了后面執(zhí)行起來也順暢得多。這個(gè)內(nèi)容后續(xù)還可以這樣擴(kuò)展針對(duì)不同產(chǎn)品類型工具類、內(nèi)容類、電商類、社交類分別整理五層模型的側(cè)重點(diǎn)和常見陷阱或者把五層模型和數(shù)據(jù)分析結(jié)合起來用數(shù)據(jù)指標(biāo)來驗(yàn)證每一層的效果。這些方向我在實(shí)際項(xiàng)目中都有嘗試后面有機(jī)會(huì)再展開聊。