?當產(chǎn)品發(fā)展到一定階段，優(yōu)秀的用戶體驗設計對于產(chǎn)品在激烈的商業(yè)競爭中保持核心競爭力是至關(guān)重要的长捧。一個產(chǎn)品能否高效地幫助用戶完成任務嚣鄙，這直接決定著用戶留存和口碑。這時串结，用戶體驗就成為了商機哑子。

我們作為產(chǎn)品的設計者，需要清楚地認識到產(chǎn)品從 0 到 1 的設計過程肌割，對每個階段深入的思考才能形成一個清晰的認知卧蜓。吸收用戶體驗要素的精髓就必須在實踐中不斷地學習用戶體驗，了解用戶體驗把敞，總結(jié)用戶體驗弥奸。

用戶體驗為什么如此重要？

用戶體驗是指產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用奋早，也就是人們?nèi)绾巍附佑|」它盛霎、「使用」它赠橙、人與產(chǎn)品互動的舒適感、人與產(chǎn)品的有效溝通愤炸。

用戶體驗設計通常要解決的是應用環(huán)境的綜合問題期揪，兼顧視覺和功能兩個方面的因素，同時解決產(chǎn)品所面臨的其他問題摇幻。產(chǎn)品越復雜，確定如何向用戶提供良好的使用體驗就越困難挥萌，比如 B 端產(chǎn)品在設計上就有很多局限性绰姻。任何在用戶體驗上所做的努力，目的都是為了提高易用性和易通性引瀑，也就是提高使用效率狂芋。這里可以分兩種形式體現(xiàn)：「幫助用戶工作得更快」和「減少用戶犯錯的幾率」。

影響用戶體驗的因素有很多憨栽，內(nèi)容決定了產(chǎn)品能對用戶提供什么帜矾、技術(shù)決定了產(chǎn)品能給用戶什么樣的穩(wěn)定性、交互決定了用戶完成任務的舒適度屑柔、視覺決定了產(chǎn)品在用戶心中的印象及是否愿意點擊屡萤，其中內(nèi)容和技術(shù)是最重要的因素。在產(chǎn)品開發(fā)過程中掸宛，我們都有類似的經(jīng)歷死陆，時常關(guān)注產(chǎn)品將來做什么、如何實現(xiàn)出來才最高效唧瘾，用戶體驗卻常常被忽略措译，甚至定義為優(yōu)先級不高，當這些「優(yōu)先級不高」的需求積累到一定量時饰序，會變成決定產(chǎn)品體驗成敗的關(guān)鍵领虹。除了這兩個因素外，影響用戶體驗的就是下面這五大要素：戰(zhàn)略層求豫，范圍層塌衰，結(jié)構(gòu)層，框架層蝠嘉，表現(xiàn)層猾蒂。正如百尺高樓也需要從整體構(gòu)思到結(jié)構(gòu)設計再到細節(jié)構(gòu)造一樣。所以這五個要素貫穿著整個產(chǎn)品的始終是晨。

為了方便具體闡述各個層面的內(nèi)容肚菠，我們把產(chǎn)品分為兩個大類：功能型產(chǎn)品和信息型產(chǎn)品。功能型產(chǎn)品是從傳統(tǒng)的桌面和客戶端軟件的角度出發(fā)罩缴，主要關(guān)注的是核心任務蚊逢。所有的操作都被納入一個過程层扶，去思考用戶如何完成這個過程。信息型產(chǎn)品是從信息的發(fā)布和組合角度出發(fā)烙荷，主要關(guān)注的是內(nèi)容镜会，產(chǎn)品應該提供哪些內(nèi)容，這些內(nèi)容信息對用戶的意義是什么终抽。

下面戳表，我們就來具體闡述這五個層面的含義。

戰(zhàn)略層

無論是功能型產(chǎn)品還是信息型產(chǎn)品昼伴，在戰(zhàn)略層所關(guān)心的內(nèi)容都是一樣的：我們?yōu)槭裁匆_發(fā)這個產(chǎn)品匾旭？可以分解為兩個問題。

1. 用戶需求（產(chǎn)品給用戶帶來了什么圃郊？）

我們必須拋棄自己的立場价涝，從用戶的角度重新審視產(chǎn)品，不能把自己當成用戶持舆，所以做產(chǎn)品設計提到最多的就是「同理心」色瘩，最忌諱的就是閉門造車。我們需要熟知用戶選擇我們的產(chǎn)品想要得到什么逸寓、解決什么問題居兆，并且在解決用戶核心問題之后，他還能在我們的產(chǎn)品中獲得什么竹伸。這時我們要解決的是如何獲取用戶需求史辙。

為了了解用戶需求，我們就要對用戶進行調(diào)研分析佩伤，找到產(chǎn)品真正的目標用戶群（有哪幾類聊倔、幾種用戶角色，比如外賣產(chǎn)品有商家生巡、騎手耙蔑、消費者三類），再對用戶群進行場景化分析（他們在什么場景下使用產(chǎn)品）孤荣，以確定產(chǎn)品真正可能覆蓋到的使用場景有哪些甸陌。

常見的用研方法有：問卷調(diào)查、用戶訪談盐股、焦點小組等钱豁，最適合用于收集用戶的普遍觀點與需求。其他研究工具（如用戶測試或體驗旅程圖）則更適用于理解用戶具體行為及用戶和產(chǎn)品交互時的表現(xiàn)疯汁。通過前期的調(diào)研牲尺，我們可以得出一個用戶畫像，既代表了目標用戶有哪幾類人、有哪些行為目標谤碳，這樣可以讓團隊成員在「產(chǎn)品給誰用」的概念里溃卡，清晰地知道用戶是「誰」。

2. 產(chǎn)品目標（企業(yè)通過產(chǎn)品得到什么蜒简？）

與用戶需求相對應的瘸羡，是我們對產(chǎn)品的期望價值，也就是產(chǎn)品目標搓茬，其實就是對產(chǎn)品總體方向的把控犹赖，包括產(chǎn)品的商業(yè)邏輯、商業(yè)價值卷仑、商業(yè)壁壘峻村、品牌傳播等畴蹭。當前互聯(lián)網(wǎng)已進入下半場，大把燒錢野蠻生長的模式已經(jīng)越來越不可持續(xù)荤胁。此時無論是投資人還是創(chuàng)業(yè)者热某，更多的都將回歸到商業(yè)本質(zhì)，即對產(chǎn)品商業(yè)屬性的思考扫尖。互聯(lián)網(wǎng)圈常說不要去創(chuàng)造需求而要去發(fā)掘需求，真正去滿足目標用戶的特定需求衬浑，因為這樣的產(chǎn)品才能具有商業(yè)價值，商業(yè)價值的大小可以通過市場規(guī)模分析放刨、目標用戶價值分析等方式進行衡量工秩。除此之外，對于自身商業(yè)壁壘的分析也十分重要进统，在明確自身優(yōu)勢的同時可以進一步鞏固和發(fā)展這些優(yōu)勢以提高后來者的準入門檻助币，以此取得更為有利的發(fā)展空間。

在項目開始初期螟碎，團隊的成員就要對此有清晰的認識眉菱。對戰(zhàn)略有清晰的認識會在設計過程中提供一把標尺，引導我們按照正確方向前進掉分。因為我們越是明確知道用戶想從我們這里獲取什么俭缓，我們就能夠更好的服務他們。最后酥郭，這些內(nèi)容（用戶調(diào)研华坦、戰(zhàn)略定位）最好做成文檔，并同步到團隊成員不从，以供大家進行討論惜姐，讓大家知道 BOSS 或高層對產(chǎn)品現(xiàn)狀及未來的看法。需要注意的是椿息，戰(zhàn)略層面雖然是整個產(chǎn)品的根基载弄，但不意味著在項目開始之前你的戰(zhàn)略要完全確定下來耘拇，也可以在過程中逐步完善，因為隨著產(chǎn)品逐漸發(fā)展宇攻、成熟惫叛，也會隨著商業(yè)市場發(fā)生變化。

3. 階段性目標

產(chǎn)品目標在實行一段時間后逞刷，最好需要復盤嘉涌，也就是之前要設立一個階段性目標，它可以是一些可追蹤的指標夸浅，在產(chǎn)品上線以后仑最，用來顯示他是否滿足了我們自己的目標和用戶的需求，這些階段性目標與產(chǎn)品本身和用戶如何使用產(chǎn)品有著緊密的關(guān)系帆喇。同時警医，指標會和可視化數(shù)據(jù)有關(guān)聯(lián)，所以產(chǎn)品經(jīng)理需要多觀察產(chǎn)品數(shù)據(jù)坯钦，我本人也是非常提倡設計師主動去觀察數(shù)據(jù)预皇，這也是你檢驗設計成果的一項標準。如：用戶平均停留時長婉刀、單月登錄次數(shù)吟温、改版后的數(shù)據(jù)變化、活動頁的跳出率減少了 30%突颊、Banner 圖的轉(zhuǎn)化率等鲁豪。

可以看出，階段性目標和可視化數(shù)據(jù)是分不開的律秃，任何造成了產(chǎn)品訪問降低爬橡、粘度降低、跳出率增加等行為是可以通過數(shù)據(jù)分析來得到結(jié)論的棒动。

范圍層

帶著「產(chǎn)品給用戶帶來了什么」糙申、「企業(yè)通過產(chǎn)品得到什么」的明確認識，我們才能搞清楚如何去滿足這些戰(zhàn)略目標迁客。當你把用戶需求和產(chǎn)品目標轉(zhuǎn)變成產(chǎn)品應該提供給用戶什么樣的內(nèi)容和功能時郭宝，戰(zhàn)略就變成了范圍。這里也是產(chǎn)品經(jīng)理需要重點專注的層面掷漱。

1. 你正在設計什么粘室？

詳細記錄你正在設計的內(nèi)容，知道這個項目的目標是什么卜范，什么時候完成這個迭代衔统，本次迭代需要上線什么東西，當前進度是怎樣的，善于記錄這些能讓你把責任分配得更加清晰锦爵，可以大大提高協(xié)作效率舱殿，工作中我們要考慮下面三個維度。

自己的工作流程：明確如何進行背調(diào)险掀，如何進行需求評審沪袭，每一步的流程是否清晰，是否還有優(yōu)化的空間等樟氢，尤其是當出現(xiàn)錯誤的時候冈绊，復盤自己，一定會有可優(yōu)化的環(huán)節(jié)埠啃。

產(chǎn)品的迭代流程：產(chǎn)品會從一個 demo 進入到完整的迭代環(huán)節(jié)死宣，整個過程中，產(chǎn)品應該以什么樣的進度和方向來進行迭代碴开，也是需要思考的毅该，在整體過程中尤其考驗了產(chǎn)品人的決策把控和需求優(yōu)先級的管理能力。

團隊的工作流程：比如定義產(chǎn)品的時候是某幾個部門還是全部潦牛，迭代產(chǎn)品的時候是只要考慮需求方眶掌，還是連其他產(chǎn)品同事一起，開發(fā)資源是否需要協(xié)調(diào)罢绽，團隊應該如何配合并且透明地了解產(chǎn)品成長進度等畏线，這些都需要在迭代前后有所思考静盅。

這么多管理事項良价，總要有工具協(xié)助你記錄吧，在這里推薦幾款我在工作中常用的團隊蒿叠、項目明垢、需求管理工具：Xmind、Jira市咽、TAPD痊银、Merlin Project Express（甘特圖）。

2. 你不需要設計什么施绎？

這里需要進一步討論產(chǎn)品所包含的具體功能溯革，使產(chǎn)品從一個概念轉(zhuǎn)化為功能聚合體。此時明確不需要做什么要比列出需要做什么更重要谷醉，太多的產(chǎn)品一上線便拖著一副臃腫的身軀致稀，許多功能聽上去相當誘人，但是它們對于項目的戰(zhàn)略目標并不是必需且緊急的俱尼，最終落得失敗的結(jié)局抖单。因此需要明確產(chǎn)品范圍邊界，梳理得到核心功能。C 端產(chǎn)品通常只有一個核心功能解決個人用戶的一個核心問題矛绘，而 B 端產(chǎn)品則有多個核心功能來滿足企業(yè)用戶多個使用場景耍休。被解決的問題即是需求，需求從何而來货矮？

需求來源：需求來源一般來說分為內(nèi)部和外部羊精，內(nèi)部大多是職能部門的一些業(yè)務性需求或受到戰(zhàn)略上的決策影響，而外部可能是和競品囚玫、用戶反饋的需求园匹，無論是哪些需求，一定是站在戰(zhàn)略性角度去看劫灶，即裸违，這些需求能否滿足用戶或企業(yè)價值，更接地氣地說本昏，這個需求能否起到實際作用供汛，還是偽需求，或者不緊急的涌穆。

在產(chǎn)品落地前可以提前考慮潛在的沖突和產(chǎn)品中的粗略點怔昨，可以劃定界限什么功能和內(nèi)容可以做，什么功能和內(nèi)容不能做宿稀，什么功能和內(nèi)容暫時不需要做趁舀，什么功能和內(nèi)容放在后期做。也就是說我們前期規(guī)劃（功能設計）的時候是先做加法祝沸，然后做減法矮烹。比如根據(jù)「四象限法則」的思路，評定出優(yōu)先級罩锐、排期奉狈、不需要的。

當然涩惑，有些產(chǎn)品團隊的 PM 會輸出一份《功能規(guī)格說明書》或《PRD文檔》仁期，這也是范圍層面的產(chǎn)出物，文檔是起到定義功能的作用竭恬，他不需要包含產(chǎn)品的每一個細節(jié)（不像交互文檔那樣細致）跛蛋，只需要包含在設計或開發(fā)過程中出現(xiàn)有可能混淆的功能定義。

接下來我們看痊硕，喜馬拉雅APP 6.3.60.3 版本有哪些功能需求和內(nèi)容需求赊级，一個產(chǎn)品從 0 到 1 制定范圍層時可能不會這么詳細，在后續(xù)的結(jié)構(gòu)層和框架層設計中偶爾也會反過來對范圍層進行補充寿桨。

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

定義好功能范圍此衅，并排列好優(yōu)先級之后强戴，我們對最終的產(chǎn)品模型包含什么特性會有一個清晰地認識，然后這些需求并沒有說明如何將分散的片段組成一個整體挡鞍。這就是在范圍層之上的結(jié)構(gòu)層：為產(chǎn)品創(chuàng)建一個功能架構(gòu)骑歹，設計用戶如何到達某個頁面，并且要思考他們完成事情之后能夠去哪里墨微，也就是確定頁面各種特性和功能最適合的組合方式道媚，并在流程上形成一個閉環(huán)。從這里往后就是我們交互設計師該重點專注的層面了：將抽象的需求逐漸整理成一個具象的產(chǎn)品原型翘县。

1. 評判標準

結(jié)構(gòu)是否有質(zhì)量的評判標準：

以各種方式將產(chǎn)品信息合理并有意義地呈現(xiàn)給用戶最域，讓用戶更容易找到最有用的信息；

不是整個過程需要多少步完成锈麸，而是用戶是否認為每個步驟都是合理的镀脂；

一個高效結(jié)構(gòu)的優(yōu)點具備「可包容」和「可擴展」的能力。

2. 結(jié)構(gòu)層的定義

根據(jù)用戶的使用場景忘伞、行為薄翅、思考等方式將范圍層中的功能和內(nèi)容建立一種有序的排列結(jié)構(gòu)，讓用戶在使用產(chǎn)品時能夠高效順暢地實現(xiàn)需求氓奈。這就好比你把在范圍層確定好的一個個功能點翘魄，整理成一個層次清晰的腦圖，稱為：功能架構(gòu)圖舀奶。

有了功能架構(gòu)圖之后暑竟，就相當于羅列出了功能層級和抽象的頁面布局，接下來要對每個功能點育勺、任務點輸出一個完整的流程圖但荤。流程圖對于產(chǎn)品經(jīng)理和交互設計師是非常重要的工具，它能夠幫助你梳理產(chǎn)品邏輯怀大，通過畫流程圖可以清晰地看到產(chǎn)品與用戶纱兑、角色與角色呀闻、行為與反饋化借、頁面與頁面之間的交互關(guān)系。

3. 常用的流程圖分類

功能流程圖

描述一個功能或任務捡多，從開始到結(jié)束的行為過程蓖康，中間有什么特殊情況、異常情況垒手，走流程時蒜焊，遇見這些情況又該如何處理，功能點與功能點之間的邏輯關(guān)系又是怎樣的科贬，當前步驟或流程是不是最合理的泳梆，切勿為了減少步驟而盲目壓縮流程鳖悠，這里要先保證易通性，即讓使用者通俗易懂优妙，能夠快速了解里面的運作模式乘综。

通常用于介紹產(chǎn)品功能模塊的相互關(guān)系或某個功能模塊的具體組成，如產(chǎn)品經(jīng)理需要向開發(fā)人員介紹某個新增功能模塊時套硼，可以在原型圖宣講之前使用功能流程圖讓其對功能的輪廓和走向了然于胸卡辰。繪制功能流程圖能夠有效地幫助我們快速梳理產(chǎn)品邏輯和交互流程，用 Axure 畫流程圖非常方便邪意。如圖：

業(yè)務流程圖

業(yè)務流程圖也可以叫「泳道圖」九妈，它是描述整個產(chǎn)品業(yè)務或單個業(yè)務模塊是如何運轉(zhuǎn)的，包含了角色與角色雾鬼、前臺與后臺萌朱、模塊與模塊之間的流程關(guān)系，比如外賣產(chǎn)品的消費者策菜、騎手嚷兔、商家三種角色是如何交互的。通常用于介紹產(chǎn)品業(yè)務做入，如產(chǎn)品經(jīng)理需要向 boss冒晰、客戶、團隊成員介紹產(chǎn)品業(yè)務時竟块，用流程圖輔助講解的效果壶运，相較于純語言或文字表達要好得多。同時浪秘，繪制業(yè)務流程圖能幫助我們快速了解產(chǎn)品業(yè)務及角色關(guān)系蒋情，如圖：

頁面流程圖

這個是大家最常見的，就是把各個原型頁面用頁面流的方式串聯(lián)起來耸携，APP棵癣、H5、PC 這些都是由一個個頁面組成夺衍，頁面流描述了用戶完成一個任務需要經(jīng)過哪些頁面狈谊。也就是我在哪，經(jīng)過什么操作沟沙。一般由交互設計師進行繪制河劝，其過程能夠幫助交互設計師確定產(chǎn)品頁面之間的跳轉(zhuǎn)順序以及交互狀態(tài)，同時還能幫助我們檢查是否有遺漏的頁面和設計點矛紫。畫頁面流時赎瞎，主要描述用戶的正常路徑，異常流程則在正常流程附近畫出異常流程即可颊咬，如圖：

產(chǎn)品設計的從 0 到 1务甥，從需求分析到信息/功能架構(gòu)→再到業(yè)務流程→任務流程→頁面流程→再到最后的原型圖（線框圖）牡辽，是一個從抽象到具象的過程，也是從概況到細分的過程敞临。經(jīng)過一步步的分析催享，逐步將想法變成實實在在的產(chǎn)品，這就是產(chǎn)品設計的魅力所在哟绊。而這其中流程設計起到舉足輕重的作用因妙，千萬不可忽視。（本人8年平面設計老司機票髓，想學習平面設計的可以利用業(yè)余時間帶你哦攀涵！qq群：760610867！）

框架層

將功能和流程梳理清楚之后洽沟，我們就要開始設計功能點里的具體細節(jié)以故，也就是讓廣大設計師又愛又恨的原型圖。在充滿概念的結(jié)構(gòu)層當中形成了大量的需求裆操，這些需求都是來自戰(zhàn)略目標的需求怒详。在框架層里，我們要更進一步的提煉這些結(jié)構(gòu)踪区，輸出詳細的界面雛形昆烁、導航及信息設計，也就是將結(jié)構(gòu)層的東西變得更加清晰缎岗、實在静尼。「交互設計文檔」就是在該階段產(chǎn)生的传泊。

1. 注意事項

讓設計盡量符合用戶的使用習慣

不要出現(xiàn)一些「奇葩」的交互方式和「自以為」創(chuàng)新的組件鼠渺，一旦違背了使用習慣和用戶認知，都會影響操作效率眷细，然而拦盹，我們做體驗設計不就是為了提高操作效率和舒適度嗎？舉例：消息列表中出現(xiàn)比較多的刪除方式是左滑刪除溪椎，這已經(jīng)形成了普遍的使用習慣普舆，如果你非要創(chuàng)新到「長按→移動→刪除」，這不就是提高了學習成本么池磁，隨之而來的就是吐槽產(chǎn)品易用性差奔害。

所以做界面設計要選擇正確的界面元素，這些界面元素要能幫助用戶完成他們的任務地熄，還要通過適當方式讓它們?nèi)菀妆桓兄胶腿菀资褂谩＿@里最忌諱的是不要為了所有人的所有偏好做設計芯杀，因為一個設計不可能適應所有用戶端考，我們要考慮的是符合「目標用戶」的使用習慣雅潭，貼近「目標用戶」的認知即可。比如我們做主打 90 后視頻社交產(chǎn)品却特，難道還要考慮到 70 后的認知習慣嗎扶供，顯然不需要，這沒有價值裂明，因此我們在做方案決策時椿浓，只需考慮目標用戶中的大部分人群即可。

要注意突出重點闽晦，讓用戶一眼看到核心內(nèi)容

這里需要考慮交互元素和整體頁面的布局扳碍，可能有些懶惰的原型設計者把這個階段完全丟給 UI 設計師了，認為布局是他們的事情仙蛉，但前提是 UI 設計師如何快速理解你的交互原型笋敞，這就考驗了交互設計師在輸出原型時，內(nèi)容層次有沒有區(qū)分荠瘪，哪些需要一屏內(nèi)展示夯巷，哪些需要弱化，這些注意事項有沒有在原型里體現(xiàn)或者說明哀墓。

除此之外趁餐，這些布局也不能憑感覺構(gòu)建，需要有理有據(jù)篮绰，比如是否考慮到目標用戶的瀏覽習慣澎怒。舉例：「微信訂閱號消息列表」頁面為什么是文字在前，縮略圖在后阶牍，那是因為在該場景下喷面，用戶在找一條內(nèi)容或瀏覽頁面時，主要通過文章標題來判斷是否是自己想要的內(nèi)容走孽，而不是圖片惧辈。

為信息做設計，將產(chǎn)品信息呈現(xiàn)出來并且讓用戶容易理解

除了上一條說的如何根據(jù)瀏覽習慣組織信息之外磕瓷，還要將這些信息再次處理盒齿，就是如何讓用戶看德舒服、有代入感困食，這是一種促進理解的表達方式边翁。之前我在琢磨「長表單如何設計」時，總結(jié)出了一句話「信息是界面的嘴巴硕盹，它需要友好的與用戶聊天符匾，而不是審問用戶」。事實就是如此瘩例，大家都有共同的經(jīng)歷啊胶，在錄入多項信息時甸各，情緒上是抵觸的，這個抵觸點可能來源于：表單交互不智能焰坪、組件沒有記住我之前輸入的趣倾、寧愿讓我輸入也不讓我做選擇、提示反饋不及時某饰、文字引導不友好儒恋，文案既死板又啰嗦等情況。這就體現(xiàn)了信息表達是多么重要黔漂。

舉例诫尽，之前我?guī)团笥言O計「豆芽作文」時，有一個在線反饋入口瘟仿，我準備用「圖標+在線反饋」的文字描述來呈現(xiàn)箱锐，后來發(fā)現(xiàn)這種方式不太好玩、太過于傳統(tǒng)劳较，不能彰顯產(chǎn)品調(diào)性驹止，而且我們的用戶是中小學生、家長观蜗、老師臊恋，這是一群活潑陽光的群體，因此我根據(jù)實際場景墓捻，把「在線反饋」的文案換成「打小報告」抖仅，增加了表達趣味，上線后的入口點擊事件也明顯比之前要好砖第，目標用戶看到這里會覺得符合他們的生活場景撤卢，都會想點進去看看，這不就達到了我們設立該入口的第一個目的嗎梧兼。希望有人點擊放吩，降低用戶對「在線反饋」的忽略感。

在合適的地方權(quán)衡利弊羽杰，使用合適的組件

很多組件的功能類似渡紫，同時可適用于多個場景，所以我們在做交互或 UI 設計時考赛，一定也經(jīng)歷過類似的糾結(jié)點惕澎，不知道如何選擇設計方案，感覺 A 和 B 組件都能滿足需求颜骤。這里推薦一個方法給大家唧喉，比如我們要做一個選擇器，在該選擇器內(nèi)可以對選項進行單選，但這里考慮到設備平臺的兼容性和開發(fā)成本欣喧，所以準備采用系統(tǒng)原生的選擇器和動作菜單腌零，如圖：

我們可以看到 AB 組件都能滿足單選的需求梯找，那么如何選擇最合適的呢唆阿？

在排除不影響用戶認知和使用習慣的條件下，我們可以選擇當前兼容性強且操作成本低的組件锈锤，比如 A 組件驯鳖，它是滑動選擇的，假設未來可能要加入更多的選項久免，那就需要考慮到組件的延展性和包容性浅辙，所以我會選擇使用它。

但如果選項是定量的阎姥，我會選擇 B 組件记舆，因為少量的選項，不需要我做出滑動的動作就能將選項清晰地呈現(xiàn)在我眼前呼巴，并且點擊選項后能夠直接關(guān)閉彈窗且生效泽腮，而 A 組件卻要選中后，再點擊「確認」衣赶，所以考慮到內(nèi)容因素和操作成本诊赊，B 組件更合適。

所以說府瞄，設計方案并不是憑感覺來做的碧磅，而要結(jié)合內(nèi)容呈現(xiàn)和使用場景來決策，這也是要求設計師在動手之前想一想使用場景遵馆。

理性的錯誤處理

一個聰明的系統(tǒng)應該考慮到異常情況和特殊情況鲸郊，記得剛?cè)胄袝r，我曾責怪過「為什么還有這么笨的用戶」货邓，后來才發(fā)現(xiàn)用戶始終都是無辜的秆撮，而是我們的產(chǎn)品沒有把防錯機制做完善÷呖郑「用戶錯誤」這個詞似乎暗示用戶做錯了某些事情像吻，但不僅如此，產(chǎn)品設計者也犯下了錯誤复隆，因為他們讓用戶輕易的做出了錯的行為拨匆。所以，解決用戶錯誤的方法不是責怪用戶挽拂，不是指導用戶如何用惭每，而應該設立一套防錯規(guī)則和提高容錯性，也就是「防御設計」，讓犯錯變得困難台腥。比如通過一些手段避免錯誤：默認值宏赘、建議、限制（約束）黎侈、及時反饋察署、逆操作等方法。

下面通過 3 個行為維度來分析：

2. 操作前峻汉，提醒防錯

詳盡的說明文字贴汪，突出顯示

主要是針對新用戶或謹慎的操作說明，目的是為了正確引導用戶學習使用休吠。引導和提示的位置要突出扳埂，從而讓用戶容易感知到（比如離標題或輸入?yún)^(qū)近一些），確保用戶在操作前能注意到引導或提示信息瘤礁。如下圖阳懂，如果不進行提示用戶就不知道這個位置的錄入機制和字數(shù)極限值是怎樣的，等輸入完再提示或者點擊提交再提示是否有輸入的時候已經(jīng)晚了柜思，這時用戶就會認為系統(tǒng)反應遲鈍岩调，嚴重影響了他的工作效率。

當結(jié)果不可逆時酝蜒，詢問用戶讓其知道操作的后果

在用戶操作前及時給出正確且有效地引導和提示誊辉，有助于減少錯誤發(fā)生的可能性。對于比較重要的操作亡脑，需要通過二次確認減少錯誤的發(fā)生堕澄，這里指的二次確認有幾種程度可以參考，我把它分為：輕度防錯霉咨、中度防錯蛙紫、重度防錯，如圖：

選項比輸入更簡單途戒，并提供默認選項

用戶出錯的原因無非就是這 4 種：系統(tǒng)性能差坑傅、被界面誤導、自己粗心大意喷斋、操作復雜的功能唁毒。就拿「操作復雜的功能」來看，用戶操作的時間越長犯錯的幾率就越高星爪，所以浆西，我們在做一些組件的時候，能讓用戶選擇的就不讓用戶輸入顽腾，寧可讓他點擊完成任務近零，也不讓他輸入完成任務，因為輸入比點擊的失誤概率要大得多，操作成本也相對較高久信。其次就是選項給用戶提供默認值窖杀，尤其是用戶需要做重復的動作，或者需要精確數(shù)字的時候裙士，先提供一個默認值入客，然后讓用戶再修改它們。

3. 操作中潮售，實時感知

對用戶的操作進行視覺化呈現(xiàn)痊项，并及時回饋

對用戶輸入的信息進行實時檢驗锅风，在下面這個案例中酥诽，當用戶輸入自己的郵件信息之后，即被告知用戶這個動作的含義皱埠，到底是輸入正確還是輸入錯誤肮帐，而不是等全部輸入完畢點擊「確認」后才提示，實時狀態(tài)能將錯誤扼殺在搖籃中边器，用戶在感知上會認為系統(tǒng)是敏感的训枢，而不是遲鈍的。

適當限制用戶的某些交互操作

對一些可能造成錯誤的操作入口設置約束或直接禁止操作忘巧，從而避免錯誤的發(fā)生恒界。舉個例子：操作完一個模塊內(nèi)容，展開另一模塊的同時收起上一個模塊砚嘴。填寫過程限制用戶某些操作十酣，這樣始終讓焦點聚集在當前內(nèi)容，在操作者的角度也不會因為內(nèi)容過多而導致情緒波動际长。

4. 操作后耸采，及時反饋&友好引導

錯誤發(fā)生時，及時反饋錯誤并提供糾錯幫助

及時的錯誤反饋就能保證用戶每個階段的操作都能得到回應工育，避免因為一個小的錯誤就要修改關(guān)聯(lián)的一系列內(nèi)容的情況虾宇，提高完成任務的效率。反饋不僅要指出有錯如绸，還要指出錯在哪里嘱朽，反饋文案要準確、友好怔接，這樣便于用戶了解錯誤的原因搪泳，方便下一步的修改。另外在用戶提交操作之后蜕提，也需要及時反饋是正確 or 錯誤森书，因為這里有種叫「心理犯錯」的因素，是用戶對自己操作不自信的表現(xiàn)，你不及時告訴他操作結(jié)果凛膏，他可能會擔心一小會呢杨名。

允許用戶犯錯，并支持操作可逆（即撤銷以前的指令）

iPhone 手機的還原功能猖毫，可以在用戶出錯時將多種功能設置快速還原到原始狀態(tài)台谍。還有常見的還有刪除相片、刪除郵件吁断、因異常情況退出的文稿編輯等趁蕊，這些極端操作都有對應的草稿箱、垃圾箱仔役、下次進入提醒是否還原等逆操作來挽回用戶的錯誤掷伙。

表現(xiàn)層

整個產(chǎn)品的形態(tài)是不是清晰很多了，現(xiàn)在就需要為你的孩子設計容貌了又兵，是的任柜，提高他的顏值和氣質(zhì)。表現(xiàn)層在這五層模型的最頂端沛厨，也是用戶會首先注意到的地方：感知設計宙地。這里是將品牌、內(nèi)容逆皮、功能和美學匯集到一起的界面設計宅粥。在框架層，我們主要解決組件放置和元素布局的問題电谣，表現(xiàn)層則要解決并彌補「產(chǎn)品框架層的邏輯排布」的感知呈現(xiàn)問題秽梅。通過視覺設計，我們決定這些內(nèi)容在界面上應該如何呈現(xiàn)辰企。人類有五大感知：視覺风纠、聽覺、觸覺牢贸、嗅覺竹观、味覺。

嗅覺和味覺更多是體現(xiàn)在實體產(chǎn)品上潜索，如食物臭增、香水、酒水等用戶可以通過聞和吃直接獲取到信息竹习。而互聯(lián)網(wǎng)產(chǎn)品是屬于工業(yè)設計領(lǐng)域的再創(chuàng)作誊抛，我們不可能讓一個虛擬的產(chǎn)品發(fā)出香味，所以下面來談談視覺整陌、觸覺拗窃、聽覺瞎领。

1. 觸覺

最直觀的體現(xiàn)就是手機本身了，重量随夸、質(zhì)感九默、薄厚以及材質(zhì)等。而體現(xiàn)在應用交互上就是振動反饋的方式宾毒，像鍵盤的短振驼修，充電、長按時候的中振诈铛，關(guān)機時候的長振乙各，甚至還有打游戲、收到重要消息幢竹、操作失誤等場景都有震動耳峦，雖然這些震動幾乎沒什么差別，但是身體是敏感的妨退，用戶能清楚地感覺到系統(tǒng)在和我「對話」妇萄。出于使用手機的本能，不用查看都知道現(xiàn)在在進行什么樣的操作咬荷，有時觸覺會比視覺先感知到，合理利用觸覺反饋轻掩，無形中也完善了「及時反饋」的機制幸乒。

2. 聽覺

聲音在很多產(chǎn)品上是作為提示來用的，雖然這是一種很不友好的提示方式唇牧，但是不能否認它比振動罕扎、視覺效果來得更直觀（手機在身邊的情況下）。而對一些產(chǎn)品來說丐重，聲音這一環(huán)就顯得至關(guān)重要了腔召，比如音樂、音頻扮惦、視頻臀蛛、游戲、直播類產(chǎn)品的音質(zhì)的保障崖蜜。兒童教育類和少兒拓展類產(chǎn)品在音頻上的引導會比文字信息更直觀浊仆，這類產(chǎn)品音頻質(zhì)量直接影響著產(chǎn)品的沉浸式體驗。在小朋友眼里豫领，產(chǎn)品有了聲音才顯得更可愛抡柿，更符合他們的心理模型。就好比我們讀小學時等恐，老師家長天天嘮叨我們寫作業(yè)洲劣，等進入社會以后备蚓，學習完全靠自律，基本沒有人再去監(jiān)督你囱稽，所以他們的心理模型是：「這里需要有人說話來引導」星著，在他們眼里這種方式是好玩的、有趣的、學習產(chǎn)品的成本也是最低的诉儒。

3. 視覺

由于我們互聯(lián)網(wǎng)產(chǎn)品的特性秆吵，視覺的權(quán)重是最多的，這也是用戶體驗設計師最得心應手的領(lǐng)域横缔。因為幾乎所有的互聯(lián)網(wǎng)產(chǎn)品都會涉及界面視覺設計，出于這個原因衫哥，下面主要講視覺設計如何支持功能設計茎刚。

引導用戶

評估一個產(chǎn)品視覺設計的簡單方法之一，就是「視線首先落在什么地方」撤逢、「哪個設計元素在第一時間吸引了用戶的注意力」膛锭、「這個元素是偏向于產(chǎn)品目標還是用戶訴求」。

一般來說蚊荣，用戶視線的移動方式遵循著相當一致的模式初狰。如果你的設計是成功的，用戶眼球的移動軌跡一般有以下兩個重要的特點：

首先互例，它們是一條流暢的視線流奢入。如果用戶評論一個設計是擁擠、復雜時媳叨，表示這個設計沒能順利地引導視線在頁面上有序移動腥光。他們的眼睛在各種各樣的元素之間跳來跳去，所有元素都在試圖引起他的注意糊秆。

其次武福，在不需要太多花里胡哨的設計嚇到用戶的前提下，它能否為用戶提供某種視覺上的「引導」痘番，這些引導應該支持用戶去完成某個目標或任務捉片，且不應該分散用戶的注意力。

對比和一致性

對比：當一個元素在眾多元素中顯得與眾不同時夫偶，用戶就會注意到界睁，這就是對比。是用于吸引用戶注意的一個主要設計手段兵拢，把用戶的注意力吸引到界面中的關(guān)鍵部分翻斟，幫助用戶理解頁面導航元素之間的關(guān)系，傳達信息設計中的概念群組说铃。

對比手段一般有：空間對比访惜、大小對比嘹履、字體對比、顏色對比债热、虛實對比砾嫉、動靜對比、稀疏對比窒篱、方向?qū)Ρ然拦巍D文對比、立體與扁平對比墙杯、局部與整體對比等配并，這些對比手法是源自于版式設計，當然在界面設計中也是通用的高镐，本篇主要是分享產(chǎn)品設計溉旋，因此在這里就不做細化。如果元素之間沒有對比性嫉髓，那整個界面將顯得非常平庸观腊，沒有視覺落點，缺乏應有的活力算行，最主要的是不能有效地引導用戶視線梧油，不能實現(xiàn)傳達信息的目的。

一致性原則纱意，是另一個重要的組成部分婶溯，可分為：視覺一致性、交互一致性偷霉。

視覺一致性：例如通過工具將視覺元素、模塊的大小褐筛、空間保持一致性类少。基于柵格線的方法是通過使用模板來確保設計的一致性渔扎，柵格系統(tǒng)在頁面排版布局硫狞、尺寸設定方面給了設計師直觀的參考，它讓頁面設計變得有規(guī)律晃痴，從而減少了設計決策成本残吩，柵格化提高了頁面布局的一致性和可復用性，避免了設計師與開發(fā)者在細節(jié)上的反復溝通和走查倘核，從而提升了整個設計開發(fā)流程的效率泣侮，并能幫助開發(fā)者實現(xiàn)較為理想的設計還原。各種布局也都可以套用這個模板來創(chuàng)建紧唱，最后并納入「UI設計規(guī)范」中活尊。

交互一致性：在不斷迭代的歷程中隶校，很多模塊為了「功能先行」對交互規(guī)則做了一些修改，這些小的修改積累到一定量就會對產(chǎn)品整體的一致性方面提出挑戰(zhàn)蛹锰。產(chǎn)品中的功能點在不斷完善的過程中深胳，涉及到業(yè)務流程的場景也會豐富起來，很多的組件適用于不同場景也成為產(chǎn)品中必不可少的一部分铜犬。

B 端產(chǎn)品相對來說舞终，要比 C 端更注重交互一致性原則，因為 B 端產(chǎn)品的組件復用面積要比 C 端更廣泛癣猾，比如表單組件在 B 端產(chǎn)品中最常見敛劝，基本每個模塊、每個任務流都會使用煎谍，如果每個模塊的交互方式都不一致攘蔽，會導致復雜的 B 端產(chǎn)品更復雜，因此需要制定一套交互規(guī)則呐粘。其次從開發(fā)角度來講满俗，制定統(tǒng)一的交互規(guī)則能夠幫助開發(fā)在工作中直接調(diào)用，從而減少開發(fā)成本作岖。推薦幾個常用的 PC 端和移動端組件庫：Element-UI唆垃、Ant Design、Vant痘儡。

配色方案

在表現(xiàn)層最能讓用戶形成直觀感受的就是顏色了辕万，人是視覺動物，顏色也表達了產(chǎn)品調(diào)性沉删，樹立了用戶第一次打開產(chǎn)品的心理印象渐尿。核心的配色方案就是使用品牌色，可以有效地向外界傳遞品牌形象矾瑰，使用品牌色并不是讓你直接吸色砖茸，而是根據(jù)情況進行飽和度調(diào)節(jié)，這里也需要考慮你的目標用戶是什么屬性殴穴，他們是否能接受這種配色方案凉夯。

需要注意的是，我們設計師不能因為追趕潮流而忽略了產(chǎn)品調(diào)性采幌，比如說我們的產(chǎn)品是 B 端劲够，他面向企業(yè)用戶，有特定的職業(yè)屬性休傍，那在配色方面就需要更冷靜征绎、理性一些，不能整得花里胡哨的尊残〕慈常可能有些設計師會問「如果都采用理性的配色淤堵，那就不能打破差異化了」，其實我個人對這句話是非常不贊同的顷扩，從產(chǎn)品角度看差異化不是從配色出發(fā)拐邪，而是從功能出發(fā)，你解決用戶需求的方法和競品有什么不同隘截，或者說服務點有哪些優(yōu)勢扎阶，視覺設計永遠都是服務于功能、服務于商業(yè)的婶芭，脫離了商業(yè)的設計就變成了「藝術(shù)」东臀，而不是解決問題的設計。只有從功能上打破差異化了犀农，你的配色方案才有更大的意義惰赋，比如加入品牌元素、合理搭配輔助色等呵哨。

如果是 C 端產(chǎn)品則會更開放一些赁濒，因為面對的是個人用戶，在視覺上更注重設計趨勢和品牌化孟害，使整個產(chǎn)品看起來更獨特拒炎，這樣用戶在使用的時候才會眼前一亮。一些運營挨务、活動击你、專題類設計，視覺設計就顯得尤為重要谎柄，它直接成為了引流工具丁侄，能幫助產(chǎn)品提高轉(zhuǎn)化率。

在一個完整的產(chǎn)品設計流程里朝巫，會要求設計師將表現(xiàn)層的東西整理出一套「UI绒障、交互設計規(guī)范」，也可以叫「定義設計語言」捍歪。這個規(guī)范確定了表現(xiàn)層設計的各個方面，從最大到最小的范圍內(nèi)的所有元素鸵钝。影響到產(chǎn)品的每一個局部標準糙臼，比如：跳轉(zhuǎn)邏輯、色彩系統(tǒng)恩商、字體系統(tǒng)变逃、柵格系統(tǒng)、組件規(guī)則怠堪、圖標揽乱、投影等原則名眉。做設計規(guī)范的好處是顯而易見的：

對內(nèi)：可保證設計團隊產(chǎn)出物的一致性，尤其是在多人協(xié)作設計凰棉、跨部門協(xié)作损拢、崗位交接、設計傳承撒犀、提升設計和開發(fā)效率等方面福压，這些方面做好了，產(chǎn)品交付到用戶手中或舞，也能為用戶帶來體驗的一致性荆姆，降低學習成本；

對外：統(tǒng)一品牌符號映凳，有助于加深產(chǎn)品在用戶心中的印象胆筒，讓我們的產(chǎn)品看起來是個協(xié)調(diào)一致的整體，而不是一堆亂七八糟的碎片诈豌，為公司的品牌宣傳和文化建設保駕護航仆救。

所以在互聯(lián)網(wǎng)產(chǎn)品設計中，合理利用視覺队询、觸覺派桩、聽覺，能使產(chǎn)品變得更生動蚌斩。

回顧

實際上這五個層面铆惑，就是我們產(chǎn)品設計的工作流程和注意點：

戰(zhàn)略層：確定產(chǎn)品目標和用戶需求，為產(chǎn)品將來的方向做市場調(diào)研送膳、用戶研究员魏，這是產(chǎn)品經(jīng)理設計產(chǎn)品的根源，也是做一個產(chǎn)品的開端叠聋。

范圍層：當我們獲取到用戶需求撕阎、明確好產(chǎn)品目標后，就要開始研究提供什么解決方案來滿足用戶的需求碌补，這些解決方案對應的功能有哪些虏束，內(nèi)容由什么組成，這時一般會產(chǎn)出《PRD文檔》厦章、《功能規(guī)格說明書》來記錄镇匀，一般包含：版本記錄、產(chǎn)品規(guī)劃圖袜啃、功能清單汗侵、業(yè)務流程圖、需求列表、開發(fā)資源晰韵、其他相關(guān)規(guī)范……

結(jié)構(gòu)層：功能和內(nèi)容范圍確定后发乔，交互設計師開始根據(jù)產(chǎn)品的需求設計解決方案，通過架構(gòu)圖和流程圖雪猪，將這些打散的需求串聯(lián)起來栏尚，形成一個可以閉環(huán)的流程，并且羅列出功能架構(gòu)：這些需求會有幾個頁面組成浪蹂、每個頁面包含什么東西抵栈。當然有些團隊可能沒有交互設計師的崗位，那就是 PM 和 UI 共同擔任坤次。

框架層：有了架構(gòu)圖和流程圖之后古劲，就開始設計具體界面雛形（原型圖、線框圖）缰猴，具體到這些頁面如何跳轉(zhuǎn)产艾、用什么組件、交互規(guī)則是怎么樣的滑绒、頁面元素怎么組合等闷堡，這時候通常會產(chǎn)出《交互設計文檔》，一般包含：版本記錄疑故、需求背景杠览、流程圖、架構(gòu)圖纵势、頁面原型踱阿、交互說明、頁面demo……

表現(xiàn)層：UI 設計對功能設計進行支持的環(huán)節(jié)钦铁，基于原型圖將產(chǎn)品呈現(xiàn)出來软舌，顏色、元素牛曹、品牌佛点、內(nèi)容怎么通過視覺設計來定義，這都取決于 UI 設計師如何把控產(chǎn)品特性黎比、功能理解及目標用戶的調(diào)性超营，最后將設計稿（高保真）交付給開發(fā)工程師，并產(chǎn)出《UI阅虫、交互設計規(guī)范》和組件庫糟描，方便開發(fā)調(diào)用及后期復用。

我在這里還是非常提倡 UI 設計師去參與產(chǎn)品和交互的工作书妻，并且行業(yè)趨勢也是如此。最近和一位在滴滴工作的體驗設計師交流時發(fā)現(xiàn)，他在滴滴是專家級設計師管理崗躲履，除了管理團隊之外還參與了產(chǎn)品的工作见间，同時也負責交互、視覺工猜、用研等多項工作米诉。

所以，一位優(yōu)秀的設計師不是只把界面做的好看而已篷帅，他一定是具備界面設計之外的項目推動能力和團隊建設能力史侣。總而言之魏身，我們要從宏觀的角度去看待設計崗位惊橱，假如你未來想成為一名 UED 或 UXD，甚至是全棧設計師箭昵，那從現(xiàn)在開始就應該把「設計做好視覺」的心態(tài)税朴，轉(zhuǎn)變?yōu)椤冈O計是用來解決產(chǎn)品問題」的心態(tài)。

去掉開發(fā)的工作之后家制，這就是把一個用戶需求正林，或者一個點子，變成最終的產(chǎn)品颤殴。每一層都是環(huán)環(huán)相扣的觅廓，涉及到各種決策，我們做什么涵但、不做什么杈绸、用什么組件、放什么位置贤笆。每一個流程上的每一個決策蝇棉，都會影響到產(chǎn)品最終的樣子和用戶使用產(chǎn)品的樣子。

以上是我站在用戶體驗五要素的維度對產(chǎn)品設計從 0 到 1 的梳理芥永，希望為大家?guī)硪恍﹩l(fā)篡殷。

（本人8年平面設計老司機，想學習平面設計的可以利用業(yè)余時間帶你哦埋涧！qq群：760610867０辶伞）