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