我們作為産品的設計者，需要清楚的認識到産品從0到1的設計過程，對每個階段深入的思考才能形成一個清楚的認識。吸收用戶體驗要素的精髓就必須在實踐中不斷地學習用戶體驗，了解用戶體驗，總結用戶體驗。

又見面了，在此之前，和多位同行有過溝通，發現很多人反映自己的基礎不太紮實，沒有系統的知識體系支撐自己進階、轉崗。這讓我産生了反思，所以這段時間梳理了一些關于交互設計師的知識架構，這也是我今年要完成的分享目标。

希望通過這種形式的分享，能夠讓自己形成一個系統化的知識體系、鞏固體驗設計基礎，同時也能幫助大家一起成長（反正狠話已經放出來了，接下來就使勁撸吧！）

當産品發展到一定階段，優秀的用戶體驗設計對于産品在激烈的商業競争中保持核心競争力是至關重要的。一個産品能否高效的幫助用戶完成任務，這直接決定着用戶留存和口碑。這時，用戶體驗就成為了商機。

我們作為産品的設計者，需要清楚的認識到産品從0到1的設計過程，對每個階段深入的思考才能形成一個清楚的認識。吸收用戶體驗要素的精髓就必須在實踐中不斷地學習用戶體驗，了解用戶體驗，總結用戶體驗。

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

用戶體驗是指産品如何與外界發生聯系并發揮作用，也就是人們如何“接觸”它、“使用”它、人與産品互動的舒适感、人與産品的有效溝通。

用戶體驗設計通常要解決的是應用環境的綜合問題，兼顧視覺和功能兩個方面的因素，同時解決産品所面臨的其他問題。産品越複雜，确定如何向用戶提供良好的使用體驗就越困難（比如B端産品在設計上就有很多局限性）。任何在用戶體驗上所做的努力，目的都是為了提高易用性和易通性，也就是提高使用效率。這裡可以分兩種形式體現：“幫助用戶工作得更快”和“減少用戶犯錯的幾率”。

影響用戶體驗的因素有很多，内容決定了産品能對用戶提供什麼、技術決定了産品能給用戶什麼樣的穩定性、交互決定了用戶完成任務的舒适度、視覺決定了産品在用戶心中的映象及是否願意點擊，其中内容和技術是最重要的因素。

在産品開發過程中，我們都有類似的經曆（可能設計師比較少），時常關注産品将來做什麼、如何實現出來才最高效，用戶體驗卻常常被忽略，甚至定義為優先級不高，當這些“優先級不高”的需求積累到一定量時，會變成決定産品體驗成敗的關鍵。

除了這兩個因素外，影響用戶體驗的就是下面這五大要素：戰略層、範圍層、結構層、框架層、表現層。正如百尺高樓也需要從整體構思到結構設計再到細節構造一樣，所以這五個要素貫穿着整個産品的始終。

為了方便具體闡述各個層面的内涵，我們把産品分為兩個大類：功能型産品和信息型産品。功能型産品是從傳統的桌面和客戶端軟件的角度出發，主要關注的是核心任務。所有的操作都被納入一個過程，去思考用戶如何完成這個過程。信息型産品是從信息的發布和組合角度出發，主要關注的是内容，産品應該提供哪些内容，這些内容信息對用戶的意義是什麼。

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

一、戰略層

無論是功能型産品還是信息型産品，在戰略層所關心的内容都是一樣的：“我們為什麼要開發這個産品？”，可以分解為兩個問題：

1. 用戶需求（産品給用戶帶來了什麼？）

我們必須抛棄自己的立場，從用戶的角度重新審視産品，不能把自己當成用戶，所以做産品設計提到最多的就是“同理心”，最忌諱的就是閉門造車（YY），我們需要熟悉知道用戶選擇我們的産品想要得到什麼、解決什麼問題，并且在解決用戶核心問題之後，他還能在我們的産品中獲得什麼。

這時我們要解決的是如何獲取用戶需求：

為了了解用戶需求，我們就要對用戶進行調研分析，找到産品真正的目标用戶群（有哪幾類、幾種用戶角色，比如外賣産品有商家、騎手、消費者三類），再對用戶群進行場景化分析（他們在什麼場景下使用産品），以确定産品真正可能覆蓋到的使用場景有哪些。

常見的用研方法有：問卷調查、用戶訪談、焦點小組等，最适合用于收集用戶的普遍觀點與需求。其他研究工具（如用戶測試或體驗旅程圖）則更适用于理解用戶具體行為及用戶和産品交互時的表現。通過前期的調研，我們可以得出一個用戶畫像，既代表了目标用戶有哪幾類人、有哪些行為目标，這樣可以讓團隊成員在“産品給誰用”的概念裡，清晰的知道用戶是“誰”。

之前有分享過用戶訪談、用戶畫像、用戶體驗旅程圖的制作過程，其他用研方法後面會陸續分享，敬請期待哦（文末有之前分享的鍊接）

2. 産品目标（企業通過産品得到什麼？）

與用戶需求相對應的，是我們對産品的期望價值，也就是産品目标，其實就是對産品總體方向的把控，包括産品的商業邏輯、商業價值、商業壁壘、品牌傳播等。

當前互聯網已進入下半場，大把燒錢野蠻生長的模式已經越來越不可持續。此時無論是投資人還是創業者，更多的都将回歸到商業本質，即對産品商業屬性的思考。互聯網圈常說不要去創造需求而要去發掘需求，真正去滿足目标用戶的特定需求，因為這樣的産品才能具有商業價值，商業價值的大小可以通過市場規模分析、目标用戶價值分析等方式進行衡量。

除此之外，對于自身商業壁壘的分析也十分重要，在明确自身優勢的同時可以進一步鞏固和發展這些優勢以提高後來者的準入門檻，以此取得更為有利的發展空間。

在項目開始初期，團隊的成員就要對此有清晰的認識。 對戰略清晰的認識會在設計過程中提供一把标尺，引導我們按照正确方向前進。因為我們越是明确知道用戶想從我們這裡獲取什麼，我們就能夠更好的服務他們。

最後，這些内容（用戶調研、戰略定位）最好做成文檔，并同步到團隊成員，以供大家進行讨論，讓大家知道BOSS或高層對産品現狀及未來的看法。

需要注意的是：戰略層面雖然是整個産品的根基，但不意味着在項目開始之前你的戰略要完全确定下來，也可以在過程中逐步完善，因為通過産品逐漸發展、成熟，會随着商業市場發生變化。

3. 階段性目标

産品目标在實行一段時間後，最好需要複盤，也就是之前要設立一個階段性目标，它可以是一些可追蹤的指标，在産品上線以後，用來顯示他是否滿足了我們自己的目标和用戶的需求，這些階段性目标與産品本身和用戶如何使用産品有着緊密的關系。

同時，指标會和可視化數據有關聯，所以産品經理需要多觀察産品數據，我本人也是非常提倡設計師主動去觀察數據，這也是你檢驗設計成果的一項标準，如：用戶平均停留時長、單月登錄次數、改版後的數據變化、活動頁的跳出率減少了30%、Banner圖的轉化率等…

可以看出，階段性目标和可視化數據是分不開的，任何造成了産品訪問降低、粘度降低、跳出率增加等行為是可以通過數據分析來得到結論的。

二、範圍層

帶着“産品給用戶帶來了什麼”、“企業通過産品得到什麼”的明确認識，我們才能搞清楚如何去滿足這些戰略目标。當你把用戶需求和産品目标轉變成産品，應該提供給用戶什麼樣的内容和功能時，戰略就變成了範圍。這裡也是産品經理需要重點專注的層面。

1. 你正在設計什麼？

詳細記錄你正在設計的内容，知道這個項目的目标是什麼，什麼時候完成這個疊代，本次疊代需要上線什麼東西，當前進度是怎樣的，善于記錄這些能讓你把責任分配的更加清晰，可以大大提高協作效率，工作中我們要考慮三個維度：

1. 自己的工作流程：明确如何進行背調，如何進行需求評審，每一步的流程是否清晰，是否還有優化的空間等，尤其是當出現錯誤的時候，複盤自己，一定會有可優化的環節；
2. 産品的疊代流程：産品會從一個demo進入到完整的疊代環節，整個過程中，産品應該以什麼樣的進度和方向來進行疊代，也是需要思考的，在整體過程中尤其考驗了産品人的決策把控和需求優先級的管理能力；
3. 團隊的工作流程：比如定義産品的時候是某幾個部門還是全部、疊代産品的時候是隻要考慮需求方、還是連其他産品同事一起、開發資源是否需要協調、團隊應該如何配合并且透明的了解産品成長進度等，這些都需要在疊代前後考慮有所思考。

這麼多管理事項，總要有工具協助你記錄吧，在這裡推薦幾款我在工作中常用的團隊、項目、需求管理工具：Xmind、Jira、TAPD、Merlin Project Express（甘特圖）

2. 你不需要設計什麼？

這裡需要進一步讨論産品所包含的具體功能，使産品從一個概念轉化為功能聚合體。此時明确不需要做什麼要比列出需要做什麼更重要，太多的産品一上線便拖着一副臃腫的身軀，許多功能聽上去相當誘人，但是它們對于項目的戰略目标并不是必需且緊急的，最終落得失敗的結局。

因此需要明确産品範圍邊界，梳理得到核心功能。C端産品通常隻有一個核心功能解決個人用戶的一個核心問題，而B端産品則有多個核心功能來滿足企業用戶多個使用場景。被解決的問題即是需求，需求從何而來？

需求來源：需求來源一般來說分為内部和外部，内部大多是職能部門的一些業務性需求或受到戰略上的決策影響，而外部可能是和競品、用戶反饋的需求，無論是哪些需求，一定是站在戰略性角度去看，即：這些需求能否滿足用戶或企業價值來，更接地氣的說，這個需求能否起到實際作用，還是僞需求，或者不緊急的。

在産品落地前可以提前考慮潛在的沖突和産品中的粗略點，可以劃定界限什麼功能和内容可以做，什麼功能和内容不能做，什麼功能和内容暫時不需要做，什麼功能和内容放在後期做。也就是說我們前期規劃（功能設計）的時候是先做加法，然後做減法，比如根據“四象限法則”的思路，評定出優先級、排期、不需要的。

當然，有些産品團隊的PM會輸出一份《功能規格說明書》或《PRD文檔》，這也是範圍層面的産出物，文檔是起到定義功能的作用，他不需要包含産品的每一個細節（不像交互文檔那樣細緻），隻需要包含在設計或開發過程中出現有可能混淆的功能定義即可。

接下來我們直接來看下，喜馬拉雅APP6.3.60.3版本有哪些功能需求和内容需求，一個産品從0到1制定範圍層時可能不會這麼詳細，在後續的結構層和框架層設計中偶爾也會反過來對範圍層進行補充。

三、結構層

定義好功能範圍并排列好優先級之後，我們對最終的産品模型包含什麼特性會有一個清晰的認識，然後這些需求并沒有說明如何将這些分散的片段組成一個整體。這就是在範圍層之上的結構層：為産品創建一個功能架構，設計用戶如何到達某個頁面，并且要思考他們完成事情之後能夠去哪裡，也就是确定頁面各種特性和功能最适合的組合方式，并在流程上形成一個閉環。

從這裡往後就是我們交互設計師該重點專注的層面了：将抽象的需求逐漸整理成一個具象的産品原型。

對結構是否有質量的的評判标準是

1. 以各種方式将産品信息合理并有意義地呈現給用戶，讓用戶更容易找到最有用的信息；
2. 不是整個過程需要多少步完成，而是用戶是否認為每個步驟都是合理的；
3. 一個高效結構的優點具備“可包容”和“可擴展”的能力。

結構層的定義

根據用戶的使用場景、行為、思考等方式将範圍層中的功能和内容建立一種有序的排列結構，讓用戶在使用産品時能夠高效順暢地實現需求。這就好比你把在範圍層确定好的一個個功能點，整理成一個層次清晰的腦圖，稱為：功能架構圖。

有了功能架構圖之後，就相當于羅列出了功能層級和抽象的頁面布局，接下來要對每個功能點、任務點輸出一個完整的流程圖。流程圖對于産品經理和交互設計師是非常重要的工具，它能夠幫助你梳理産品邏輯，通過畫流程圖可以清晰的看到産品與用戶、角色與角色、行為與反饋、頁面與頁面之間的交互關系。

常用的流程圖可分為

（1）功能流程圖

描述一個功能或任務，從開始到結束的行為過程，中間有什麼特殊情況、異常情況，走流程時，遇見這些情況又該如何處理，功能點與功能點之間的邏輯關系又是怎樣的，當前步驟或流程是不是最合理的，切勿為了減少步驟而盲目壓縮流程，這裡要先保證易通性（既讓使用者通俗易懂，能夠快速了解裡面的運作模式）。

通常用于介紹産品功能模塊的相互關系或某個功能模塊的具體組成，如産品經理需要向開發人員介紹某個新增功能模塊時，可以在原型圖宣講之前使用功能流程圖讓其對功能的輪廓和走向了然于胸。繪制功能流程圖能夠有效的幫助我們快速梳理産品邏輯和交互流程，用Axure畫流程圖非常方便哦。

如圖：

（2）業務流程圖

也可以叫“泳道圖”，它是描述整個産品業務或單個業務模塊是如何運轉的，包含了角色與角色、前台與後台、模塊與模塊之間的流程關系，比如外賣産品的消費者、騎手、商家三種角色是如何交互的。

通常用于介紹産品業務，如産品經理需要向boss、客戶、團隊成員介紹産品業務時，用流程圖輔助講解的效果，相較于純語言或文字表達要好得多。同時，繪制業務流程圖能幫助我們快速了解産品業務及角色關系，如圖：

（3）頁面流程圖

這個是大家最常見的，就是把各個原型頁面用頁面流的方式串聯起來，APP、H5、PC……這些都是由一個個頁面組成，頁面流描述了用戶完成一個任務需要經過哪些頁面。

也就是我在哪，經過什麼操作，一般由交互設計師進行繪制，其過程能夠幫助交互設計師确定産品頁面之間的跳轉順序以及交互狀态，同時還能幫助我們檢查是否有遺漏的頁面和設計點。

畫頁面流時，主要描述用戶的正常路徑，異常流程則在正常流程附近畫出異常流程即可，如圖：

産品設計的從0到1，從需求分析到信息/功能架構→再到業務流程→任務流程→頁面流程→再到最後的原型圖（線框圖）是一個從抽象到具象的過程，也是從概況到細分的過程。經過一步步的分析，逐步将想法變成實實在在的産品，這就是産品設計的魅力所在。而這其中流程設計起到舉足輕重的作用，千萬千萬不可忽視。

四、框架層

将功能和流程梳理清楚之後，我們就要開始設計功能點裡的具體細節，也就是讓廣大設計師又愛又恨的原型圖。在充滿概念的結構層當中形成了大量的需求，這些需求都是來自戰略目标的需求。在框架層裡，我們要更進一步的提煉這些結構，輸出詳細的界面雛形、導航及信息設計，也就是将結構層的東西變得更加清晰、實在。“交互設計文檔”就是在該階段産生的。

這個階段，需要注意

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

不要出現一些“奇葩”的交互方式和“自以為”創新的組件，這些一旦違背了使用習慣和用戶認知，都會影響操作效率，然鵝，我們做體驗設計不就是為了提高操作效率和舒适度嗎？

舉例：消息列表中出現比較多的删除方式是左滑删除，這已經形成了普遍的使用習慣，如果你非要創新到“長按→移動→删除”，這不就是提高了學習成本麼，随之而來的就是吐槽産品易用性差。

所以做界面設計要選擇正确的界面元素，這些界面元素要能幫助用戶完成他們的任務，還要通過适當方式讓它們容易被感知到和容易使用。

這裡最忌諱的是：不要為了所有人的所有偏好做設計，因為一個設計不可能适應所有用戶，我們要考慮的是符合“目标用戶”的使用習慣、貼近“目标用戶”的認知即可，比如我們做主打90後視頻社交産品，難道還要考慮到70後的認知習慣嗎，顯然不需要，這沒有價值，因此我們在做方案決策時，隻需考慮目标用戶中的大部分人群即可。

（2）要注意突出重點，讓用戶一眼看到核心内容

這裡需要考慮交互元素和整體頁面的布局，可能有些懶惰的原型設計者把這個階段完全丢給UI設計師了，認為布局是他們的事情，但前提是UI設計師如何快速理解你的交互原型，這就考驗了交互設計師在輸出原型時，内容層次有沒有區分，哪些需要一屏内展示，哪些需要弱化。

這些注意事項有沒有在原型裡體現或者說明，最讓人無語的就是一些PM或交互設計師，将所有内容都往頁面裡堆積，完全不考慮信息的層次，哦對了，還有口頭需求，這些都是減少了他們的工作量，讓UI設計師增加工作量（會增加後期重新溝通需求的時間）。

除此之外，這些布局也不能憑感覺構建，需要有理有據，比如是否考慮到目标用戶的浏覽習慣，舉例：“微信訂閱号消息列表”頁面為什麼是文字在前，縮略圖在後，那是因為在該場景下，用戶在找一條内容或浏覽頁面時，主要通過文章标題來判斷是否是自己想要的内容，而不是圖片。

（3）為信息做設計，将産品信息呈現出來并且讓用戶容易理解

除了上一條說的如何根據浏覽習慣組織信息之外，還要将這些信息再次處理，就是如何讓用戶看的舒服、有代入感，這是一種促進理解的表達方式。之前我在琢磨“長表單如何設計”時，總結出了一句話“信息是界面的嘴巴，它需要與友好的與用戶聊天，而不是審問用戶”。

事實就是如此，大家都有共同的經曆，在錄入多項信息時，情緒上抵觸的，這個抵觸點可能來源于：表單交互不智能、組件沒有記住我之前輸入的、甯願讓我輸入也不讓我做選擇、提示反饋不及時、文字引導不友好，文案既死闆又啰嗦等情況。

這就體現了信息表達是多麼重要，舉例：之前我幫朋友設計“豆芽作文”時，有一個在線反饋入口，我準備用“圖标 在線反饋”的文字描述來呈現，後來發現這種方式不太好玩、太過于傳統，不能彰顯産品調性，而且我們的用戶是中小學生、家長、老師，這是一群活潑陽光的群體。

因此我根據實際場景，把“在線反饋”的文案換成“打小報告”，增加了表達趣味，上線後的入口點擊事件也明顯比之前要好，目标用戶看到這裡會覺得符合他們的生活場景，都會想點進去看看，這不就達到了我們設立該入口的第一個目的嗎——希望有人點擊，降低用戶對“在線反饋”的忽略感（不在乎）。

（4）在合适的地方權衡利弊，使用合适的組件

很多組件的功能類似，同時可适用于多個場景，所以我們在做交互或UI設計時，一定也經曆過類似的糾結點，糾結不知道如何選擇設計方案，感覺A和B組件都能滿足需求。這裡推薦一個方法給大家，比如我們要做一個選擇器，在該選擇器内可以對選項進行單選，但這裡考慮到設備平台的兼容性和開發成本，所以準備采用系統原生的選擇器和動作菜單，如圖：

我們可以看到AB組件都能滿足單選的需求，那麼如何選擇最合适的呢？

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

但如果選項是定量的，我會選擇B組件，因為少量的選項，不需要我做出滑動的動作（“找”的行為）就能将選項清晰的呈現在我眼前，并且點擊選項後能夠直接關閉彈窗且生效，而A組件卻要選中後，再點擊“确認”，所以考慮到内容因素和操作成本，B組件更合适。

所以說，設計方案并不是憑感覺來做的，而要結合内容呈現和使用場景來決策，這也是要求設計師在動手之前想一想使用場景。

（5）理性的錯誤處理

一個聰明的系統應該考慮到異常情況和特殊情況，記得剛入行（坑）時，我曾責怪過“為什麼還有這麼笨的用戶”，後來才發現用戶始終的都是無辜的，而是我們的産品沒有把防錯機制做完善。“用戶錯誤”這個詞似乎暗示用戶做錯了某些事情，但不僅如此，産品設計者也犯下了錯誤，因為他們讓用戶輕易的做出了錯的行為。

所以，解決用戶錯誤的方法不是責怪用戶、不是指導用戶如何用，而應該設立一套防錯規則和提高容錯性，也就是“防禦設計”，讓犯錯變得困難。比如通過一些手段避免錯誤：默認值、建議、限制（約束）、及時反饋、逆操作等方法。

通過3個行為維度來分析

（1）操作前，提醒防錯

1）詳盡的說明文字，突出顯示

主要是針對新用戶或謹慎的操作說明，目的是為了正确引導用戶學習使用。引導和提示的位置要突出，從而讓用戶容易感知到（比如離标題或輸入區近一些），确保用戶在操作前能注意到引導或提示信息。

如下圖，如果不進行提示用戶就不知道這個位置的錄入機制和字數極限值是怎樣的，等輸入完再提示或者點擊提交再提示是否有輸入的時候已經晚了，這時用戶就會認為系統反應尺寸，嚴重的影響了他的工作效率

2）當結果不可逆時，詢問用戶讓其知道操作的後果

在用戶操作前及時給出正确且有效地引導和提示，有助于減少錯誤發生的可能性。對于比較重要的操作，需要通過二次确認減少錯誤的發生，這裡指的二次确認有幾種程度可以參考，我把他分為：輕度防錯、中度防錯、重度防錯。

如圖：

3）選項比輸入更簡單，并提供默認選項

用戶出錯的原因無非就是這4種：系統性能差、被界面誤導、自己粗心大意、操作複雜的功能。就拿“操作複雜的功能”來看，用戶操作的時間越長犯錯的幾率就越高，所以，我們在做一些組件的時候，能讓用戶選擇的就不讓用戶輸入，甯可讓他點擊完成任務，也不讓他輸入完成任務，因為輸入比點擊的失誤概率要大的多，操作成本也相對較高。

其次就是選項給用戶提供默認值，尤其是用戶需要做重複的動作，或者需要精确數字的時候，先提供一個默認值，然後讓用戶再修改它們。

（2）操作中，實時感知

1）對用戶的操作進行視覺化呈現，并及時回饋

對用戶輸入的信息進行實時檢驗，在下面這個案例中，當用戶輸入自己的郵件信息之後，即被告知用戶這個動作的含義，到底是輸入正确還是輸入錯誤，而不是等全部輸入完畢點擊“确認”後才提示，實時狀态能将錯誤扼殺在搖籃中，用戶在感知上會認為系統是敏感的，而不是遲鈍的。

2）适當限制用戶的某些交互操作

對一些可能造成錯誤的操作入口設置約束或直接禁止操作，從而避免錯誤的發生。舉個例子：操作完一個模塊内容，展開另一模塊的同時收起上一個模塊。填寫過程限制用戶某些操作，這樣始終讓焦點聚集在當前内容，在操作者的角度也不會因為内容過多而導緻情緒波動。

（3）操作後，及時反饋&友好引導

1）錯誤發生時，即使反饋錯誤并提供糾錯幫助

錯誤反饋及時就能保證用戶每個階段的操作都能得到回應，避免因為一個小的錯誤就要修改關聯的一系列内容的情況，提高完成任務的效率。反饋不僅要指出有錯，還要指出錯在哪裡，反饋文案要準确、友好（看到這裡别忘記上面說的信息設計：文案呈現方式是要和用戶聊天，不要審問用戶），這樣便于用戶了解錯誤的原因，方便下一步的修改。

另外在用戶提交操作之後，也需要及時反饋是正确or錯誤，因為這裡有種叫“心理犯錯”的因素，是用戶對自己操作不自信的表現，你不及時告訴他操作結果，他可能會擔心一小會呢。

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

iPhone手機的還原功能，可以在用戶出錯時将多種功能設置快速還原到原始狀态。還有常見的：删除相片、删除郵件、因異常情況退出的文稿編輯等，這些極端操作都有對應的草稿箱、垃圾箱、下次進入提醒是否還原等逆操作來挽回用戶的錯誤。

五、表現層

現在整個産品的形态是不是清晰很多呢，現在就需要為你的孩子設計容貌了，是的，提高他的顔值和氣質。表現層在這五層模型的最頂端，也是用戶會首先注意到的地方：感知設計。

這裡是将品牌、内容、功能和美學彙集到一起界面設計。在框架層，我們主要解決組件放置和元素布局的問題，表現層則要解決并彌補“産品框架層的邏輯排布”的感知呈現問題。通過視覺設計，我們決定這些内容在界面上應該如何呈現。

五大感知：視覺、聽覺、觸覺、嗅覺、味覺

嗅覺和味覺更多是體現在實體産品上，如食物、香水、酒水等用戶可以通過聞和吃直接獲取到信息。而互聯網産品是屬于工業設計領域的再創作，我們不可能讓一個虛拟的産品發出香味（emmm，APP真香~），所以下面來談談視覺、觸覺、聽覺。

（1）觸覺

最直觀的體現就是手機本身了，重量、質感、薄厚以及材質等。而體現在應用交互上就是振動反饋的方式，像鍵盤的短振，充電、長按時候的中振，關機時候的長振，甚至還有打遊戲、收到重要消息、操作失誤等場景都有震動。

雖然這些震動幾乎沒什麼差别，但是對身體的反應是是敏感的，用戶能清楚的感覺到系統在和我“對話”，出于使用手機的本能，不用查看都知道現在在進行什麼樣的操作，有時觸覺會比視覺先感知到，合理利用觸覺反饋，無形中也完善了“及時反饋”的機制。

（2）聽覺

聲音在很多産品上是作為提示來用的，雖然這是一種很不友好的提示方式，但是不能否認他比振動、視覺效果來的更直觀（手機在身邊的情況下）。而對一些産品來說，聲音這一環就顯得至關重要了，比如音樂、音頻、視頻、遊戲、直播類産品的音質的保障。

兒童教育類和少兒拓展類産品在音頻上的引導會比文字信息更直觀，這類産品音頻質量直接影響着産品的沉浸式體驗，在小朋友眼裡，産品有了聲音才顯得更可愛，更符合他們的心理模型，就好比我們讀小學時，老師家長天天唠叨我們寫作業，等進入社會以後，學習完全靠自律，基本沒有人再去監督你。

所以他們的心理模型是：“這裡需要有人說話來引導”，在他們眼裡這種方式是好玩的、有趣的、學習産品的成本也是最低的。

（3）視覺

由于我們互聯網産品的特性，視覺的權重是最多的，這也是用戶體驗設計師最得心應手的領域。因為幾乎所有的互聯網産品都會涉及界面視覺設計，出于這個原因，下面主要就講視覺設計如何支持功能設計。

1. 引導用戶

評估一個産品視覺設計的簡單方法之一，就是“視線首先落在什麼地方？”、“哪個設計元素在第一時間吸引了用戶的注意力？”、“這個元素是偏向于産品目标還是用戶訴求？”。

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

• 首先，它們是一條流暢的視線流。如果用戶評論一個設計是擁擠、複雜時，表示這個設計沒能順利地引導視線在頁面上有序移動。他們的眼睛在各種各樣的元素之間跳來跳去，所有元素都在試圖引起他的注意。
• 其次，在不需要太多花裡胡哨的設計吓到用戶的前提下，它能否為用戶提供某種視覺上的“引導”，這些引導應該支持用戶去完成某個目标或任務，且不應該分散用戶對的注意力。

2. 對比和一緻性

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

對比手段一般有：空間對比、大小對比、字體對比、顔色對比、虛實對比、動靜對比、稀疏對比、方向對比、圖文對比、立體與扁平對比、局部與整體對比等，這些對比手法是源自于版式設計，當然在界面設計中也是通用的，本篇主要是分享産品設計，因此在這裡就不做細化。

如果元素之間沒有對比性，那整個界面将顯得非常平庸，沒有視覺落點，缺乏應有的活力，最主要的是不能有效的引導用戶視線，不能實現傳達信息的目的。

一緻性原則，是另一個重要的組成部分，可分為：視覺一緻性、交互一緻性

視覺一緻性：例如通過工具将視覺元素、模塊的大小、空間保持一緻性。基于栅格線的方法是就通過使用母版來确保設計的一緻性，栅格系統在頁面排版布局、尺寸設定方面給了設計師直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本。栅格化提高了頁面布局的一緻性跟可複用性，避免了設計師與開發者在細節上的反複溝通和走查，從而提升了整個設計開發流程的效率，并能幫助開發者實現較為理想的設計還原。各種布局也都可以套用這個模闆來創建，最後并納入“UI設計規範”中。

交互一緻性：在不斷疊代的曆程中，很多模塊為了“功能先行”對交互規則做了一些修改，這些小的修改積累到一定量就會對産品整體的一緻性方面提出挑戰。産品中的功能點在不斷完善的過程中，涉及到業務流程的場景也會豐富起來，很多的組件适用于不同場景也成為産品中必不可少的一部分。

B端産品相對來說，要比C端更注重交互一緻性原則，因為B端産品的組件複用面積要比C端更廣泛，比如表單組件在B端産品中最常見，基本每個模塊、每個任務流都會使用，如果每個模塊的交互方式都不一緻，會導緻複雜的B端産品更複雜。

因此需要制定一套交互規則。其次從開發角度來講，制定統一的交互規則能夠幫助開發在工作中直接調用，從而減少開發成本。推薦幾個常用的PC端和移動端組件庫：Element-UI、Ant Design、Vant

3. 配色方案

在表現層最能讓用戶形成直觀感受的就是顔色了，人是視覺動物，顔色也表達了産品調性，樹立了用戶第一次打開産品的心理印象。核心的配色方案就是使用品牌色，可以有效地向外界傳遞品牌形象，使用品牌色并不是讓你直接吸色，而是根據情況進行飽和度調節，這裡也需要考慮你的目标用戶是什麼屬性，他們是否能接受這種配色方案。

需要注意的是，我們設計師不能因為追趕潮流而忽略了産品調性，比如說我們的産品是B端，他面向企業用戶，有特定的職業屬性，那在配色方面就需要更冷靜、理性一些，不能整的花裡胡哨的。可能有些設計師會問“如果都采用理性的配色，那就不能打破差異化了”。

其實我個人對這句話是非常不贊同的，從産品角度看差異化不是從配色出發，而是從功能出發，你解決用戶需求的方法和競品有什麼不同，或者說服務點有哪些優勢，視覺設計永遠都是服務于功能、服務于商業的，脫離了商業的設計就變成了“藝術”，而不是解決問題的設計。隻有從功能上打破差異化了，你的配色方案才有更大的意義，比如加入品牌元素、合理搭配輔助色等。

如果是C端産品則會更開放一些，因為面對的是個人用戶，在視覺上更注重設計趨勢和品牌化，使整個産品看起來更獨特，這樣用戶在使用的時候才會眼前一亮。一些運營、活動、專題類設計，視覺設計就顯得尤為重要，它直接成為了引流工具，能幫助産品提高轉化率。

在一個完整的産品設計流程裡，會要求設計師将表現層的東西整理出一套“UI、交互設計規範”，也可以叫“定義設計語言”。這個規範确定了表現層設計的各個方面，從最大到最小的範圍内的所有元素。影響到産品的每一個局部标準，比如：跳轉邏輯、色彩系統、字體系統、栅格系統、組件規則、圖标、投影等原則。

做設計規範的好處是顯而易見的：

• 對内：可保證設計團隊産出物的一緻性，尤其是在多人協作設計、跨部門協作、崗位交接、設計傳承、提升設計和開發效率等方面，這些方面做好了，産品交付到用戶手中，也能為用戶帶來體驗的一緻性，降低學習成本；
• 對外：統一品牌符号，有助于加深産品在用戶心中的印象，讓我們的産品看起來是個協調一緻的整體，而不是一堆亂七八糟的碎片，為公司的品牌宣傳和文化建設可以保駕護航。

所以在互聯網産品設計中，合理利用視覺、觸覺、聽覺，能使産品變的更生動，試問誰不喜歡既聰明又生動的産品呢？

回顧

實際上這五個層面，就是我們産品設計的工作流程和注意點：

1. 戰略層——确定産品目标和用戶需求，為産品将來的方向做市場調研、用戶研究，這是産品經理設計産品的根源，也是做一個産品的開端；
2. 範圍層——當我們獲取到用戶需求、明确好産品目标後，就要開始研究提供什麼解決方案來滿足用戶的需求，這些解決方案對應的功能有哪些，内容由什麼組成，這時一般會産出《PRD文檔》、《功能規格說明書》來記錄這些，一般包含：版本記錄、産品規劃圖、功能清單、業務流程圖、需求列表、開發資源、其他相關規範……
3. 結構層——功能和内容範圍确定後，交互設計師開始根據産品的需求設計解決方案，通過架構圖和流程圖，将這些打散的需求串聯起來，形成一個可以閉環的流程，并且羅列出功能架構：這些需求會有幾個頁面組成、每個頁面包含什麼東西。當然有些團隊可能沒有交互設計師的崗位，那就是PM和UI共同擔任；
4. 框架層——有了架構圖和流程圖之後，就開始設計具體界面雛形（原型圖、線框圖），具體到這些頁面如何跳轉、用什麼組件、交互規則是怎麼樣的、頁面元素怎麼組合等，這時候通常會産出《交互設計文檔》，一般包含：版本記錄、需求背景、流程圖、架構圖、頁面原型、交互說明、頁面demo……
5. 表現層——UI設計對功能設計進行支持的環節，基于原型圖将産品呈現出來，顔色、元素、品牌、内容怎麼通過視覺設計來定義，這都取決于UI設計師如何把控産品特性、功能理解及目标用戶的調性，最後将設計稿（高保真）交付給開發工程師，并産出《UI、交互設計規範》和組件庫，方便開發調用及後期複用。

我在這裡還是非常提倡UI設計師去參與産品和交互的工作，然而行業趨勢也是這樣，最近和一位在滴滴工作的體驗設計師交流時發現，他在滴滴是專家級設計師管理崗，除了管理團隊之外還參與了産品的工作，同時也負責交互、視覺、用研等多項工作。

所以，一位優秀的設計師不是隻把界面做的好看而已，他一定是具備界面設計之外的項目推動能力和團隊建設能力。總而言之，我們要從宏觀的角度去看待設計崗位，假如你未來想成為一名UED或UXD，甚至是全棧設計師，那從現在開始就應該把“設計做好視覺”的心态，轉變為“設計是用來解決産品問題”的心态。

去掉開發的工作之後，這就是把一個用戶需求，或者一個點子，變成最終的産品。每一層都是環環相扣的，涉及到各種決策，我們做什麼、不做什麼、用什麼組件、放什麼位置。每一個流程上的每一個決策，都會影響到産品最終的樣子和用戶使用産品的樣子。

以上是我站在用戶體驗五要素的維度對産品設計從0到1的梳理，希望為大家帶來一些啟發。

随着國内互聯網企業的發展沉澱，用戶體驗領域也會變得異常重要，在殘酷的市場競争環境中，産品體驗的差異有時對于産品本身而言将會是緻命的。尤其是牽涉到使用的核心流程，比如支付流程體驗差，那将是産品終結的罪魁禍首。

同時，互聯網團隊也應該對于用戶體驗保持好克制，不可一味的盲從。比如因為随便一個人，對界面設計提出幾個改進問題，你不經過調研和思考就盲目遵從，最後上線也沒有得到太多好評，同時還浪費了開發資源，所以說，設計可以經不起誇獎，但要經得起考驗。如果直接從表現層開始做産品，那必定會把産品推向一個危險的境地。

希望對你有所幫助~下次見！

作者：h梓暄，公衆号：UXD筆記

本文由 @h梓暄 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!