B端產品往往都具有較長的業務流程和操作步驟，需要用戶循規蹈矩、通過較多的步驟找到相應的頁面，來觸達相應的用戶目標。落實到體驗設計中，需要設計師充分考慮用戶在操作路徑中的操作權重（頻率&停留時長），進一步以核心步驟為中心向路徑兩端延伸，完成頁面布局。

如何分析和評估用戶在操作路徑中的權重呢？今天介紹一下，本人從統計學中借用的一個概念——正態分布模型，并將其應用到體驗設計的流程中。

1 首先，什么是正態分布模型呢？

正態分布，也稱“常態分布”，或高斯分布，是一個在數學、物理及工程等領域都非常重要的概率分布，在統計學的許多方面有著重大的影響力。

如果一個指標受到若干獨立因素共同影響，且每個因素不能產生支配性的影響，不管每個因素本身是什么分布，它們疊加后影響的這個指標平均值就是正態分布。

如圖：

標準正態分布模型

正態曲線呈鐘型，兩頭低，中間高，左右對稱因其曲線呈鐘形，因此，人們又經常稱之為鐘形曲線。

標準的正態分布模型包含了中心極限定理的三要素，影響因素獨立，因素影響程度隨機但無法支配，各個因素之間是相加的關系。

中心極限定理三要素

當然，在體驗設計中正態分布模型就沒有那么復雜，而且用戶的操作也不是隨機分布。那如何在體驗設計中如何應用呢？

接下來，介紹一下基于用戶體驗，提煉的正態分布模型。

如圖：

體驗設計中標準正態分布模型

總的來說，體驗設計中的正態分布模型，是一種用來探討用戶在某一功能的操作過程（或產品的整個生命周期）中，操作頻率（權重）所集中的區間與頁面布局、信息架構之間關系的方法與思維。

這個模型涉及兩個維度：

一是帶有指向性的操作路徑（步驟/功能模塊），可以是一個功能的詳細、單一的操作路徑，也可以是一個產品從使用到停止使用的生命周期中，用戶對整體功能使用流程；

二是頻率，操作路徑中的步驟或者核心功能被使用的頻率，即權重。這個維度可以直觀的反應出用戶的關注重點和高頻操作，便于后續的用戶引導及頁面布局等。

將用戶的操作頻率按流程順序放置到坐標中，即可得到類似于正態曲線的圖形，直觀的反映出用戶在功能步驟（模塊）上的關注度。

2 體驗設計中正態模型的類型

根據分析功能的顆粒度不同，得到正態分布模型的驗證結果也不相同。

由此，體驗設計中的正態模型，大體上可分為兩類：

第一類是具體的功能（功能型），通過該功能的起始到完成，獲得該功能高頻操作及核心頁面，可有助于功能路徑優化及頁面布局、功能排布，讓用戶更方便的獲取高頻操作。

第二是產品整體功能（產品型），通過用戶從使用到停止使用該產品的全部路徑，獲取用戶在使用產品時關注的功能，有利于明確產品定位、優化功能架構，在B端產品上還可以進行角色和權限的管理。

接下來，我們就詳細探討一下兩種類型的正態分布模型。

2.1 功能型的正態分布模型

功能型的正態分布模型多用于優化產品功能及路徑。這種類型的模型關注更加聚焦，結論也更加直接，甚至可以直接應用到設計方案上。因此在分析功能路徑時，要簡化相關聯的分支路徑，避免其對聚焦問題的干擾，使分析結論更加精準。

例如，一個手機TB的購物流程，如果要研究用戶購買行為，就需要更多的關注用戶對商品的選擇、比較等操作，同時簡化用戶的支付操作路徑；如果研究的是購物流程中用戶的支付行為，就應該相應的簡化用戶選擇產品的路徑。

如圖：

舉例：淘寶購物流程分析

另外，這種類型分析結果的落地，需要格外關注功能操作路徑的入口及其他功能的銜接，保證在更大層級上的操作不會出現斷點，保證使用流暢。

2.2、產品型的正態分布模型

產品型的正態分布模型，可以看作眾多功能型路徑的簡化提煉版本，忽略操作細節，著眼于業務在功能模塊之間的流轉，多用于產品定位升級或架構調整。這種類型的模型是將產品的拓撲圖，按照用戶從開始使用到停止使用的的操作路徑（產品的生命周期），將其映射到坐標軸上，來直觀表現出產品的核心功能。

如圖:

產品型&功能型

其結果屬于定性結論，在設計方案時更多的是參考意義，只有在進行產品定位迭代及架構調整時，才具有指導意義。因此，在不同場景下用合適的模型才能更具有說服力。

正態分布模型的可以應用到B/C/G等多種類型的產品上，根據不同類型的產品，該模型還會有其他功能的擴展。

例如，B/G端產品往往都具有長流程、多角色、多模塊的特點，當正態分布模型在B/G端產品上應用時，還可以清晰凸顯角色、權限的結構，有利于對用戶權限和角色的定義與管理。

3 案例分析

在本人所從事的安防行業中，實時報警的處理是較為高頻、且重要的業務功能。本文僅對功能型模型進行案例分析，希望該方法（思維）的表達更加清晰明確，也能夠幫到大家。

3.1 業務概述：

實時報警的業務流程大致是這樣的：在監控中心或崗亭，保安人員對園區的安防狀態進行警戒時，如果有異常狀況觸發了報警，系統會反饋推送給安保人員，安保人員通過錄像抓圖等信息判斷報警的緊急程度以及處理方式。

3.2 業務定性

該功能是典型的“海島事件”，具有偶然性和急迫性的特點。所謂海島事件，是本人對具有偶然性與急迫性特點業務的概括統稱，后續可以寫文章專門探討該問題。

3.3  場景推演

安保人員每時每刻都全神貫注監管整個區域的安全狀態，是不可能的，更何況這類海島事件呢？所以，在發生報警時安保人員大概率處在“摸魚”狀態。

當有報警進入時，安保人員第一時間需要確認的是報警的類型以及位置，從而快速判斷如何處理。只有當報警信息不明確時，安保人員才會進一步通過錄像、抓圖、關聯的監控來進一步判斷報警信息。

實時報警場景推演

3.4  報警業務處理的正態模型分析

在整個場景推演過程中，用戶的關注重點是報警詳情以及報警信息的確認過程，會有較少的概率查看輔助信息，因此需要保留輔助信息的入口。

如圖：

3.5  方案展示

方案采用瀑布流式，高權重的關鍵信息擁有更高的頁面權重，用戶可以快速獲取信息，以判斷處理方式。同時，漸進式展示確認信、輔助信息，如抓圖、錄像、關聯視頻等，一方面可以減少對用戶決策的干擾，同時能夠快速獲取這些信息，輔助用戶做出判斷。

由于方案涉及到公司項目，所以方案不方便直接展示，這里只展示頁面信息布局。

我們都知道，在頁面縱向布局上，隨著視覺流的下移，用戶的關注度會逐步降低，因此，在實時報警處理頁面布局上，將從上到下信息的重要性逐級降低。

首先是實時報警處理的核心區，分為兩個部分基本信息區與視頻輔助區，這兩部分信息是判斷實時報警性質以及處理方式的主要依據。其中，基本信息區是最重要的，用戶可以根據報警的基本信息，來確定如何處理報警。對于大部分的報警信息，用戶可直接判斷報警是否需要處理，或是進一步的確認及驗證，盡可能的減少用戶的操作；因此，報警的處理入口，緊隨基本信息。

而視頻輔助區是對部分報警的回放確認，是在查看基本信息后的進一步操作，頻率相對較低，因此雖然屬于核心區，但是層級卻低于基本信息的展示。

輔助驗證區放置的報警期間的連續抓圖，可以滿足用戶的放大查看，進行報警輔助確認，隨著用戶視覺流下移，其重要程度迅速降低，相應的操作的步驟也較為復雜，頁面視覺權重也有較大的壓縮。

最后，對于極少的報警信息，用戶需要通過關聯視頻的信息進行驗證，可通過頁面底部的關聯視頻入口，點擊展開關聯視頻浮層，進行報警信息驗證。這是整個實時報警的最后一個層級信息展示。

4 寫在最后

正態分布模型不僅僅是一個工具、方法，同時，也是一種設計思維。

在設計之初，充分理解功能的定位，完善功能入口，讓用戶更容易觸達產品的核心功能。然后通過核心功能向業務兩側進行延伸，進而覆蓋整個業務，完成產品的框架與流程的構建。

在設計之中，關注高頻的核心步驟，讓用戶的高頻操作具有更簡便的操作空間，把用戶更想知道、更想操作的內容推送到用戶面前，讓用戶在整個操作流程中的操作頻率與頁面布局的權重分布相匹配，而不是想當然。

只有這樣，設計才更具價值，才能培養更忠誠的用戶。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

工作生活中，決策是我們不可避免的難題。如何做出明智的選擇，在分析過程中保持“理中客”，抓住用戶的核心訴求，提升產品的用戶體驗，是用戶研究持續關注的議題。

傳統分析方法，存在的弊端

當我們調研用戶需求的重要性時，通常采取兩種方法：單刀直入的問 & 委婉含蓄的算。例如，為了提升產品的滿意度，我們調研用戶對于產品各項因素的重視程度，以便優先迭代用戶的核心訴求。

1. 單刀直入的問

問題：您剛剛為產品的滿意度進行評分時，請問您最看重的產品因素是哪個（或哪 1-3 個）？「多選」

處理方式：統計本題各個選項的頻數，由高到低順序排列，從而決定優先順序。

這種方法的缺陷顯而易見，一方面直接詢問會顯得有些突兀，眾多選項的展示極大可能會擾亂用戶腦中原本的想法，導致真實答案被選項的羅列順序影響，另一方面這種方法只能得到各個因素重要性的排序，無法得到他們各自的權重（影響程度）。

2. 委婉含蓄的算

問題：

Q1：請問您對產品滿意度的評分是多少？

Q2：請問您對產品各個因素的滿意度評分分別是多少？

處理方式：采取總——分的評分模式，對產品整體滿意度得分、各因素滿意度得分進行因子分析或者回歸分析，根據分析得到的結果計算出每個因素對整體滿意度的貢獻度，找到貢獻度最高的因素。

這種方法是一種“馬后炮式”的分析，根據當前用戶的評分去“科學的猜測”，因為分析結果有很強的時效性。比如當期調研中，產品由于在功能 X 方面出現了問題，給用戶的體驗造成了傷害，那么分析的結果勢必會呈現“功能 X 的重要度極高”的結論，但真實的情況可能是，用戶長期不怎么關注功能 X，只是最近產品的問題造成用戶短期內關注 X 功能。

那么，有沒有其他方法來分析“用戶最看重的因素/哪個因素最影響用戶評分”，決策“哪個方案對用戶評價/項目目標的推動力最大”呢？這次向大家隆重介紹層次分析法。

什么是層次分析法

層次分析法（The Analytic Hierarchy Process，簡稱 AHP），是美國運籌學家匹茨堡大學教授薩蒂于 20 世紀 70 年代初，在為美國國防部研究“根據各個工業部門對國家福利的貢獻大小而進行電力分配”課題時，應用網絡系統理論和多目標綜合評價方法，提出的一種層次權重決策分析方法。

該方法根據問題的性質和要達到的總目標，將問題分解為不同的組成因素，并按照因素間的相互關聯影響以及隸屬關系將因素按不同層次聚集組合，形成一個多層次的分析結構模型，從而最終使問題歸結為最低層(供決策的方案、措施等)相對于最高層(總目標)的相對重要權值的確定或相對優劣次序的排定。

層次分析法分兩步走：建立層次結構 & 一致性檢驗，接下來我們一起看看這種方法如何應用：

在 M 項目中，“店東對 M 小組產生的整體價值的滿意度”是一個重點跟蹤的結果指標，項目組希望了解提升滿意度各項抓手的過程表現及各自的重要度（對整體滿意度的影響程度）。在綜合考慮問卷篇幅、樣本質量、重要度分析嚴謹性等方面，最終選擇了層次分析法。

第一步、建立層次結構，形成問卷框架。首先明確四個主要抓手是通過怎樣的路徑來影響店東滿意度的，產出多層級的結構，一般情況會采用“結果目標-抓手”兩層 或“結果目標-分類-抓手”三層（本次示例中，店東對 M 小組價值提升的滿意度是結果目標層，帶團隊的動力和帶團隊的能力是分類層）。

圖 1 “店東對 M 小組價值提升滿意度”的層次結構

然后在問卷中對各項抓手捉對，采用 9 分量表對比重要性（如果是三層結構，可以先對比分類層，再對比分類層下面各自的抓手。本次項目由于抓手數量較少，所以跳過分類層，直接將四個抓手兩兩對比）。本次案例中抓手數量是 4，根據排列組合的結果詢問次數為 6 次。

圖 2 重要度比較問卷

第二步、回收樣本，做一致性檢驗。由于被訪者在回答問卷時，可能對重要性的排序沒有形成清晰穩定的認知，也可能沒有仔細閱讀或回答問卷，導致樣本中有大量臟數據，比如會出現“A 比 B 重要、B 比 C 重要、C 比 A 重要”的邏輯矛盾，一致性檢驗可以通過矩陣分析有效的排除這類無效樣本（分析過程此處省略一千字）。最終我們保留有效樣本再次進行矩陣分析，可以得到各項抓手的重要度。

以虛擬的結果數據（非真實項目結果）為例，四個抓手對店東滿意度的重要度如圖 3 所示，其中，“平臺資源傾斜”的重要度最高。

圖 3 各項抓手重要度

三種方法利弊比較

圖 4 三種方法的比較

延伸應用

層次分析法除了上述應用之外，還適用于業務方案決策、日常個人決策等多領域。

業務方案決策方面，仍然以“店東對 M 小組產生的整體價值的滿意度”為例。我們在前文已經分析出了四個抓手的重要度，假設目前我們有 3 套方案可以提升店東滿意度，需要從中選擇一個進行落地。我們要做的仍然是兩步：建立層次結構 & 一致性檢驗

邀請 3—8名項目專家（可以是項目評委、項目負責人、該項目相關領域的資深人士等）預估各方案在抓手層面的表現。

圖 5 建立滿意度層次結構

圖 6 優勢對比問卷

對數據進行一致性檢驗，并產出每個方案對各個抓手的推動力指數，這樣我們就可以一目了然的看到，哪個方案對結果指標的推動力最強了。

圖 7 方案比較結果

個人日常決策方面也是同樣的道理，比如我們在糾結去哪個城市旅游、購買哪只基金的時候，都可以搭建相應的層次結構，把自己（或者最了解自己的人）作為調研樣本進行層次分析，用科學的方法幫助自己找到內心的答案。

圖 8 旅游目的地選擇

圖 9 購買基金選擇

結語

決策不是拍腦袋賭運氣的玄學事件，科學的方法能幫助我們理性地分析現狀，作出明智的選擇。相信掌握了層次分析法的你，不僅能在工作中鎖定用戶的核心訴求，也能在生活中擺脫選擇恐懼的糾結，成為運籌帷幄的“小諸葛”。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

企業增長周期和用戶生命周期這兩個周期理論市面上皆有一些增長理論的定義。

從一般企業增長周期來看，會經歷以下 5 個階段：

• 階段①：問題/解決方案匹配期 → 主要是調研客戶的需求；
• 階段②：最小可行性產品時期（MVP） → 尋求若干種最小化產品的建立方法；
• 階段③：產品和市場匹配期 → 提升用戶的黏度和體驗；
• 階段④：渠道和產品匹配時期 → 對高優先級的渠道進行大規模的投入；
• 階段⑤：成熟期 → 并購，國際化和本地化

運營常用的用戶生命周期理論 AARRR 對用戶在產品中各個層級的狀態也有所定義：

Acquisition→Activation→Retention→Revenue→Referral

每個公司的拳頭產品或產品矩陣中的各個子產品可能處在不同的生命周期，在做用研探索時需要具體分析。以酷家樂在近兩年的情況為例，其主打產品早已走過 0-1 的階段，但在大的框架下會不間斷的迭代，如工具功能、生態服務功能。

在這種情況下，用研和業務密集合作的增長類用研項目主要集中在企業增長周期的“階段③：產品和市場匹配期”之后的階段，目的是提升用戶的粘度和體驗，隨著產品的螺旋上升，也會對階段①-③做階段性小循環；反映在AARRR模型上則是以「用戶留存+用戶推薦」為重點。

如何在業務中挑選高杠桿監測點

那么問題來了，如何從不同的生命周期進行用研重點拆解？除市場上比較通用的生命周期拆解外，不少公司內部會有一套更加適配業務的體現生命周期的分層。

以酷家樂的業務為例，根據兩種主流用戶分層定義，即工具用戶分層（工具行為是核心行為）和全站用戶分層來拆解，我們圈定出了增長和體驗中的重點觀測用戶階段（橙色標注）：

• 工具用戶分層中，重點關注“沉默/流失用戶”
• 全站用戶分層中，重點關注“由注冊用戶和體驗用戶組成的純新用戶”

這些會被重點關注的邏輯為：

• 用戶沉默或流失若是由產品客觀原因造成，往往是遇到一些比較嚴重的問題，其有效反饋應該被當做高優先級去處理；
• 新用戶的認知是潛在用戶階段接收市場培育的重要反應，也是其進入并使用產品、接受培育、融合進產品的黃金時期；
• 活躍/準深度/深度用戶這些在目前的追蹤體系中是被剔除的，暫時不關注在平臺蜜月期的用戶，但對全站用戶的總體衡量還是有必要的。

常用用研目標和維度拆分

用戶需求可以成為產品設計的導向、市場推廣的方向，用戶增長類型的需求轉換成用研目標，一般是：

更具體一些，我們常用的問題維度：

常見思維誤區：一定要頻繁做沉默/流失用戶分析么

這里有一個大家通常會陷入的思維誤區：一定要從沉默/流失用戶著手調研–他們后來為什么不太用我們的產品了。

通常，大家普遍認為只要可以分析出沉默/流失的原因，按照 list 上條目進行改進就能降低流失率。但可以換個思維，產品的價值更多的是由認可該產品的用戶群體創造的，沉默/流失用戶一定程度上屬于對該類產品為非剛需狀態/需求匹配失敗而自然流失掉的人群（非目標用戶）。

單純從調研手段上來講，沉默/流失用戶的調研難度也是很大，定量方法在這里失去了作用，基本只能預先定義好調研圈選人群時“沉默/流失用戶”的定義（這里要在平臺定義的基礎上進一步縮小范圍），通過 cold call 的方式做調研，參與過此類項目執行的同學會發現幾個點，尤其是對專業垂直產品（非 C 端產品）而言：

1. 原因中太多無效信息，如公司倒閉、轉型，自己轉行；
2. 獲取的有效信息大概率和留存用戶群體的調研較為一致。

總結一下，沉默/流失用戶的調研可做，但在產品無重大變化的前提下，建議長周期循環，如 1 年做一次足夠。服務好留存用戶，了解產品何種原因打動用戶、如何做會更好，從留存用戶中探索各種場景比去硬啃沉默/流失用戶更有意義。

當然，也會有一些例外的情況，如公司的一款子產品自推出以來，長期留存非常低，這種處于探索期的產品可能是由于與目標市場匹配不當或當前產品功能做的太差，這種情況會建議關注全生命周期的用戶反饋，包括沉默、流失用戶；若是因為與目標市場匹配不當，調整目標市場和人群為當務之急，若市場匹配程度尚可，但當前產品功能做的太差，則需重點關注產品概念與體驗鏈路等問題。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

模式一：模糊輸入 Forgiving Format

簡介：模糊輸入是一種用于文本輸入的模式，使用這種模式后，可以讓用戶輸入文本內容時不用關心格式或語法，從而輕松達到預期目標。

例子： Google 搜索輸入框

模糊輸入詳情

模式二：結構化格式 Structured Format

簡介： 結構化格式是指用戶在輸入時，不僅僅使用純文本輸入，而是使用一組反映數據結構的字段，引導用戶進行輸入。

例子： Apple 雙重驗證碼輸入界面：

結構化格式詳情 

模式三：語句填空 Fill in the Blanks

簡介：「語句填空」使用一組短語字段將用戶需要錄入的信息，如文本、數字等串聯為一句有指示意義的溝通語句。

例子： Visualeyes Design 網站的用戶信息錄入:

語句填空詳情 

模式四：輸入說明 Input Prompt

簡介：「輸入說明」是指在空白文本字段的旁邊或下方，放置一個短語或示例，以解釋此處需要輸入的內容或提供關于此內容的詳細要求及信息。

例子：  使用 Ant Design 組件-表單 搭建的創建小程序頁面中的輸入說明：

輸入說明詳情 

模式五：輸入線索 Input Hints

簡介：「輸入線索」是指用示例輸入或說明文本以占位符（Placeholder）的形式顯示在輸入框中，以幫助用戶理解需要輸入的內容，或給出相關線索的一種設計方式。

例子：  在 Ant Design 輸入框組件 的示例中（如下圖），我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內容或解釋輸入字段的功能。

輸入線索詳情 

模式六：密碼強度計 assword Strength Meter

簡介：「密碼強度計」即在輸入新密碼時，立即向用戶反饋密碼的有效性和強度。

例子：  百度網盤的用戶注冊頁面，紅色文字代表不合格，白色文字代表已合格。

密碼強度計詳情

模式七：自動完成 Autocompletion

簡介：「自動完成」即在輸入內容過程中，向用戶推薦與已輸入內容相關的信息，把輸入行為變為選擇行為。

例子：   Ant Design 官網的全局搜索功能，用戶只需要輸入部分內容，下拉列表展示可能的結果，把錄入行為變為更便捷的選擇行為。

自動完成詳情 

模式八：下拉選擇 Drop-down Chooser

簡介：「下拉選擇」即通過使用下拉菜單或彈出式面板，來擴展菜單，使得菜單中可以包含更復雜的選擇功能。

例子： Ant Design 官網的下拉菜單：

下拉選擇詳情 

模式九：列表構建器 List Builder

簡介： 列表構建器是從較大的數據集中創建較小的數據集的一種模式。列表生成器的「數據源」和「結果」在同一個組件中可見。這允許用戶通過按鈕或拖放在它們之間移動項目。這種模式也常常稱為兩列多選擇器。

例子： Ant Design 的 Transfer 穿梭框 組件就是基于這一模式的設計組件。

列表構建器詳情 

模式十：合理預設 Good Defaults and Smart Prefills

簡介：「合理預設」是指系統提供默認選項，這些默認選項不需要用戶做任何操作，可以節省用戶完成表單的時間和精力。

這些默認選項來的數據源包括: 先前輸入的會話數據、來自用戶帳戶的信息、當前位置、當前數據和時間等等。

案例 ：釘釘的“代辦事項”設置功能，可以自動抓取到語句中的時間信息，自動幫助用戶默認填寫時間，減少用戶的操作時長：

合理預設詳情 

模式十一：錯誤提示 Error Messages

簡介： 「錯誤提示」是表單出現輸入錯誤時，為用戶展示的一條引人注目的解釋性消息，該消息可能描述用戶如何修復錯誤。

案例： Ant Design 提供了多種表單錯誤校驗樣式：

錯誤提示詳情 

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

眾所周知，B端產品中的頁面以列表居多，列表的優勢在于能多維度地呈現/沉淀數據項，且可結合常用操作進行管理。之前我們有對通用型的列表做過設計總結“橫向看信息，縱向做類比”，當需要用“復雜”列表承載業務時，B端產品的視覺設計師可以有怎樣的設計思路，以避免遇到以下場景呢？

Step01 

了解產品目標與“復雜”的原因

當接到B端產品中的簡單列表要升級為“復雜”列表的需求時，作為B端視覺設計師首先需要了解背后的原因與目標，便于拓展不同維度的思考以提升產品體驗。通過了解業務目標，明晰對業務流程的影響，以及如何與現有業務模塊的連接；通過了解用戶目標，明確業務參與者中用戶層是否變化等。

Step02

理解業務功能組合及使用場景

將基于產品目標拆解的需求，具象成功能組合后，B端視覺設計師需要結合業務與場景，理解其中的“復雜”點，以及發現設計難點。如：業務的流程變化，對應是否有分支增加/順序調換等，功能又是如何體現的；不同的用戶層，關注重點是什么、對應的數據項是哪些，使用方式是否有變化等。

Step03

思考與設計“復雜”列表的界面表達

結合場景理解業務功能后，B端視覺設計師便可開始思考如何設計“復雜”列表，以表現業務的進化，同時讓用戶能輕松地感知到。

1.先構建列表框架，以體現業務的層級

因為框架的確定，有利于構建整個內容的大關系。而框架構建離不開對列表承載的信息層級進行分析，即對數據行之間的關系分析，其中數據行之間的關系大致可分為三種：并列關系、包含關系、父子關系，如下圖所示。

不同的列表框架，其優勢各不相同：

并列關系的列表 - 適合承載類似數據行的集合，是目前B端系統中最常見的通用型列表；

包含關系的列表 - 適合行的數據行差異性較大的組合，弱對比強呈現，如電商網站中的訂單與商品詳情；

父子關系的列表 - 適合數據行相同且層級有區分的樹狀結構列表，對比、呈現層級關系等的拓展性高。

2.分析數據行，提升可讀性

以某家族列表為例，當框架確定之后，通用型的列表即可轉換為可呈現父子關系的列表。

從管理層（大B）的角度，希望通過層級了解到分布與整體情況；普通管理層（中B/小B），希望通過層級和不同維度的數據項，加深對“人”了解；小B/執行人員，通過便捷的操作增加/刪除/查找/修改內容。因此當一個列表要滿足不同用戶層的目標時，

合理刪除 - 增加不同維度的信息后，確認并刪除含義重復/沒有價值的信息，如：刪除含義重復的子女數量列，增加其他維度更重要的信息。

分層組織 - 不同層級，數據組合可有差異，可從統計數據與詳細數據、列的信息相關性組合等角度入手。如：增加統計的家庭成員數據，對其余列進行相關性分組。

適時隱藏 - 附加功能、增加選擇難度等的功能/隱私信息，在用戶需要時出現。如：聯系方式是較為隱私信息，需要時通過hover查看/編輯。

巧妙轉移 - 結合PC端的交互操作，打破靜態頁面呈現，增加“動態”的空間。如下圖：增加橫向空間寬度，以呈現更多信息。

3.用視覺手法優化各元素間的呈現

期望用視覺手法，帶給不同用戶“感官”層面的積極感受。同時減少視覺噪音帶來的影響，讓用戶清晰地了解關注重點。

其中父子關系的列表注意與斑馬紋的搭配使用，因為易削弱層級關系，斑馬紋更適合通用型的列表。

之前有總結視覺細節的設計方法，這里不再贅述，點擊下方圖片即可查看。

Step04

設計回溯，是否達成目標

設計完成后，帶著最初的產品目標再來看設計，是否有達成目標，在信息呈現方面是否更合理，用戶獲取信息是否更便捷等，退一步更能有全局思維。而對內是否可以沉淀設計資產，優化現有的結構或擴充設計規范。

小結：

B端產品中列表是最普遍存在的，而如何將不斷變化 / 復雜的列表設計得更有用，T型思考法（升級版）探索了其中一種，若有其他思路/場景值得思考，歡迎留言討論～

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

我們每天都會收到很多應用軟件推送的短信或者push消息，它們總會推送各種消息吸引我們打開APP。鑒于我每天都要手動清除這些通知消息，并且有時候打擾到了我的生活（午休的時候被推送消息吵醒），除了微信和工作軟件外我基本關閉了APP消息通知，下載新的app也會選擇不開啟消息通知。

消息通知能提升用戶活躍度，但是推送過多的消息對用戶來說是一種信息負擔，也打擾了用戶的生活，用戶輕則關閉消息通知，重則卸載應用。每天接觸這么多消息通知，大家有沒有想過他們是怎么推送這些消息的？

不管是to c 產品還是 to B 產品，消息推送是運營必不可少的一部分。to C產品在產品運營環節通過消息推送，能提升用戶活躍率、留存率，提升業務轉化率，to B產品通過消息推送能提高工作效率，及時知曉業務問題（畢竟用戶只會在工作需要的時候使用系統）。

近期我在做crm系統移動端的版本時，銷售反饋系統推送的消息太多，打擾了正常工作，他們覺得很煩，表示都不相干收到這么多消息通知。接到反饋后，我盤點了系統推送的所有消息，發現消息類型多達20幾種，并且集中在周一上午10點推送，導致銷售短時間內會收到十幾條消息。對此，我把盤點出來的消息進行篩選，精簡了通知數量，優化了推送策略，優化后銷售的滿意度和消息觸達率都高了許多。

我們不能把消息推送看做是一個簡單的功能，要有一個系統性的思維，從盤點消息項、制定推送策略、設計消息文案/內容、建立推送任務、選擇推送渠道、篩查有效用戶、消息存儲等各個階段流程，都包含了很多因素需要我們仔細考慮的。

本文將以系統通知消息為例來介紹消息推送功能。

一、簡述消息推送

1、通知來源

告訴用戶消息來自哪里，誰發送的，讓用戶對消息內容快速建立認知，同時增強用戶信任度，避免認為是垃圾消息；

2、觸發條件

什么情況下會推送這條消息，如任務到期沒有完成。

3、推送時間/頻率

什么時候推送給用戶，多久推送一次

4、通知對象

消息應該推送給誰，誰會受到消息，可能是系統中的全部成員，也可能是某個部門，或者某個人。

5、推送渠道

怎么樣可以把消息發送到用戶的設備上，如短信，app通知。

6、消息文案

用戶收到這條消息可以干什么，如處理待辦任務。

7、操作反饋

用戶需要做什么，可以得到什么結果，如收到線索分配通知，需要跟進線索。

二、消息推送策略

推送的消息既不會打擾到用戶，又能達到運營目的，我們需要在合理的時間選擇合適的渠道推送合適的消息給合適的用戶，這句話有點繞但是就是這個意思。

1、列出消息清單

建立推送任務之前，我們要盤點系統中所有的通知消息，列出消息清單。根據上述消息推送描述的幾大要素，以下是我在優化crm系統通知消息列舉的消息項，

以銷售訂單和開票明細兩個業務對象為例：

可以從以下三個角度來盤點消息項：

1、按通知來源：業務消息（線索、商機、回款、訂單、任務等）、系統消息、用戶信息等；

2、按觸發條件：運營消息（回款預警、商機跟進等）、用戶發起、待辦消息、系統反饋等；

3、按通知對象：所有成員、部門、個人

我們要列出所有可能用到的消息項，不怕多，就怕遺漏。盤點完所有的消息后，可以按照上述表格列出消息清單，再根據業務目標、運營需求、用戶需求、對消息去重、精簡消息項，只留下必需推送的消息類型。

2、確定通知對象

列出消息清單后，要明確什么類型的消息應該推送給什么人，即通知消息要匹配正確的通知對象。

系統給用戶推送了消息，用戶對消息內容感興趣，點開了消息查看詳情并進入目標頁面或者處理通知消息，才能實現推送消息的目的。

to c產品需要對用戶信息、用戶行為等構建用戶畫像，用于精準推送或者個性化推送。to b產品的用戶結構相對簡單一些，一般是企業人員（員工、部門負責人、管理層等），根據業務使用場景

對用戶劃分角色，再以角色為基礎匹配功能權限，進行權限控制，如銷售、研發、財務、運營等對應不同的業務場景，推送消息側重點也不同。

3、確定推送時間/頻率

確定好了通知對象，我們需要思考以下問題：

    1、什么時候推送消息既不會打擾到用戶，又能引起用戶的注意？

    2、是主動推送還是由用戶觸發后被動推送？

    3、多久推送一次合適，推送是一次性的還是持久性的？

    4、這個消息推送觸發后要立即處理嗎？

    3、用戶怎么樣能收到消息？收到消息后要做什么？

以下這個金字塔圖可以解決上述的問題：

消息清單上的消息項，我們不能一股腦全部推送，要根據信息的提醒強度平衡通知量、推送時間、推送頻率，避免對用戶造成干擾而影響推送效果。

3.1、強提醒

消息類型：對于需要用戶立即處理，或者用戶確認才能繼續進行的操作，如預警、異常、錯誤、驗證碼、重要消息等，讓用戶及時發現并采取措施。以飛書為例，飛書上要是有人給你發了緊急消息，會以短信的形式提醒你。

推送渠道：電話、短信，但是一般不會用電話，一是成本高，二是對于用戶來說是強打擾，而且陌生電話用戶一般不太會理。

3.2、中提醒

消息類型：無需用戶立即處理，但是需要引起用戶注意的操作，如運營消息、待辦提醒、審批通知、系統公告等。對用戶會產生一定的干擾性，此時要給用戶一定的控制權，可以通過設置通知方式或者關閉通知提醒，減少消息打擾。

推送渠道：系統推送、應用內提醒，郵件。

3.3、弱提醒

消息類型：無需用戶立即處理，僅提醒用戶有新的狀態，或者對用戶操作后的反饋，如應用更新提醒、狀態變更通知、操作成功提示等，對用戶幾乎不產生干擾。

推送渠道：一般只在應用內提醒或者系統內提醒。

提醒強度越強，通知數量越少，呈金字塔形狀，強提醒通知數量要比弱提醒少很多。通知消息數量較多時，要權衡推送數量，推要克制，對于推送頻率比較高且用戶不需及時處理的消息，可以通過合并通知的方式減少消息推送的數量，減少對用戶的打擾。

4、推送渠道

根據提醒強度選擇推送渠道，多渠道組合協同推送，能夠提高推送效率，但要保證多渠道消息內容一致。一般來說to b產品通知消息是以系統內提醒和辦公協作應用（第三方工具，如飛書、企業微信等）內提醒的形式通知用戶。

對于系統內的通知消息，不同強度的提醒消息會對應不同的消息通知組件。

4.1、強提醒消息組件類型

強提醒的內容對用戶來說是高關注度的，要求及時、主動的把消息推送到用戶面前，用戶要立即采取措施，對用戶當前操作具有強干預性。

4.2、中強提醒消息組件類型

中提醒的內容對用戶來說是中關注度的，要在合適的時間推送，可以是系統主動推送也可以用戶發起的，用戶可以延后處理，對用戶當前操作的干預性為中等。

4.3、弱強提醒消息組件類型

弱提醒的內容對用戶來說是低關注的，可以是用戶操作后的及時反饋，短暫的出現后就消失，或者可以延后處理的消息，對用戶當前的操作幾乎無干擾。

用戶正在使用crm系統辦公，同時飛書也在線，我們該如何推送消息？

用戶可能已經在系統內查看了消息，再把消息推送到飛書上對用戶來說就是重復提醒了。如果飛書上已經讀了消息，那么系統內該條消息就要標記為已讀。

5、消息文案

用戶收到推送消息后，要能快速抓到重點內容，知道這條消息表達了什么，是否需要進行處理。

一般我寫消息內容時是會遵循3w1h原則：what（發生了什么），why（什么原因），when（消息觸發時間）、how（我該怎么做），再根據實際情況進行適當調整。在設計消息文案時要考慮用戶的預期，不要標題和消息內容不一致，或者消息內容和詳情頁不一致，可以通過推送點擊率輔助判斷推送是否達到預期效果。

上述原則并不是固定死的，需要根據實際推送目的進行調整，如運營信息可以通過標題、摘要或圖片吸引用戶，可以直接附帶鏈接跳轉到詳細信息。

設計消息文案/內容的要點：

    1、消息文案要簡明易懂；

    2、重要的信息要放在前面；

    3、不同推送渠道的消息內容要保持一致；

    4、通過短信或者郵件推送的消息要說明信息來源平臺，避免用戶認為是垃圾信息，如【騰訊】【網易】等。

三、消息中心設計

消息推送給用戶后，用戶看完不一定會立即處理，延后處理的時要能夠找到相應的消息，此時需要消息中心呈現所有的push消息。

消息中心受產品定位、系統框架等因素影響呈現形式會有所不同。消息中心的入口主要有頂部圖標（懸浮通知）、左側tab等形式。

    1、頂部圖標：適用于消息數量較少，或者消息不是產品核心業務場景的情況。一般會在頂部導航右邊，或者左側導航下方，以 badge 的形式在圖標上提示新消息的數量；

    2、左側 tab：適用于消息以用戶間通訊為核心場景的情況?？筛鶕㈩愋瓦M行分類，以 badge 的形式提示未讀消息或未處理消息的數量。

消息列表按時間維度排序，可以對信息進行分類展示，如全部，未讀、稍后處理的tab分類形式展示，消息類型比較多的情況下通過選擇消息類型快速找到相應消息。

四、總結

消息推送并不是簡單的把需要提醒用戶注意的事項全部推送出去，合理的推送策略才能到達推送目的。

消息推送前的思考：

    1、應該推送什么消息，推送給誰？

    2、什么時間適合推送，為什么要推送這條消息？

    3、怎么推送？

    4、推送的這條消息是否能引起用戶興趣？

    4、用戶查閱了這條消息知道要干什么嗎？

思考完以上問題基本上能確定一份消息清單 ，要保證推送效果還要注意以下推送的要點：

    1、權衡消息推送數量，只推送必需的消息；

    2、選擇合適的推送時間、推送頻率，避免對用戶產生打擾；

    3、消息文案簡明易懂；

    4、多渠道推送保持消息文案一致，不要重復推送；

    5、需要用戶采取措施的消息提醒，在用戶解決問題之前，要持續提醒；

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

前言

對于設計師來說，在日常的互聯網設計工作中面對的主要是兩類產品設計類型，一類是C端(Consumer)指的是消費者、個人用戶；顧名思義就是面向個人用戶提供服務的產品，是直接服務于用戶的。另一類是B端（Business）指的是企業或商家；顧名思義就是面向商家、企業級、業務部門提供的服務產品，是間接服務于用戶的。現在互聯網進入下半場，C端產品逐漸靠近天花板，紅利逐漸消退，大部分的企業開始轉向B端。

對于設計師來說我們也要對自己有一個清晰的定位和轉換，如何才能在業務的轉換下，跟上企業的步伐，做好角色的轉變和切入。

當然，從C端快速切換到B端設計或者從B端快速切換到C端都不是一件容易的事情，因為B端和C端存在比較大的一些差異。其商業屬性，目標用戶，使用場景，設計表達，產品訴求，用戶體驗，設備載體等都是不同的。B端現對于C端的業務而言更為復雜，那么這次就聊一聊B端設計師從哪些方面發掘自身設計價值，更好的為產品服務，提升產品價值。

B端產品是什么

在我們開始接觸B端產品時，先要對B端產品有一個基本的概念，什么是B端產品？

常見的有OA系統，ERP，CRM，SAAS等（這里就不一一贅述，大家可以自行百度查看一下基本概念）

B端產品是幫助企業或者部門協同辦公，解決一條業務鏈問題，將線下操作通過系統化，流程化轉移到線上，提高辦公效率，節約成本，高效完成任務從而提高企業的效率，減低內部不必要的消耗。

B端產品行業與行業之間的跨越度很大，因為不同的業務屬性所要的產品訴求是不同的。但我們作為一個設計師，可能會遇到各種復雜的業務場景，復雜枯燥的行業術語也可能都不精通，就算學習了也不一定能非常懂，而且行業屬性較重，我們大概率不是用戶，業務場景還原成本高，甚至沒有條件還原。所以在做設計的時候還是會懵。往往我們需要深入用戶調研，盡可能地接近真實業務場景，與用戶共同創造，基于業務底層邏輯提煉出強整合性、高兼容性、高拓展性的系統規范。B端的產品設計也是一個不小的挑戰，那我們如何打破這個挑戰更快速的接觸，適應B端設計呢？

困難會有，辦法也會有的

B 端產品相對而言，場景、功能、業務流程、信息架構要比 C 端更復雜，面對的異常情況也比較多，所以 B 端在設計風格上盡量做到簡潔。B 端產品實用性大于美觀性，在每一個功能的設計都需要你去思考很多方面：用戶易用、信息層級、未來擴展，你都要做出取舍，而對于每個模塊都需要你思考、結合用戶場景。

面對B端產品我們應該如何分析和處理呢？

1.了解業務和產品

B 端的業務邏輯復雜，子業務多樣化，產品的規則，流程，訴求可能隨時就會調整，設計師應當基于B端的產品業務特性，市場與用戶的需求，在看似雜亂無章的業務中尋找共性，梳理模塊進行合理的整理和設計。

在做B端業務前，我們要對我們即將要處理的業務有一個基本的理解和認知，不同的部門員工因為職業屬性，使用產品的訴求也是不同的，所以相對應的設計方案流程也是不同的，這就需要我們充分理解業務流程，有針對性的梳理。

例如：我們要做一個考勤系統，我們需要清楚公司的考勤制度，事假/病假/年假/調休等如何處理，如何提交，如何審批，月底匯算，季度匯算等問題，前期了解的流程越多越清晰，就可以幫助我們規避很多不必要的問題。

要將功能流程歸類梳理整合，把雜亂的功能整理清楚，提高用戶效能。

2.提高效率

用戶的時間就是金錢，這對于 B 端商家角色中尤為重要，大量訂單的處理、表格化的導入和導出、批量管理和網站運營等方面，對于效率有著極高的要求，商家通過可視化界面來完成某項任務。

在這其中，影響最大的莫過于交互方式了，相信各位一定用過各大銀行的網站，頁面的導航關聯性弱、結構不合理、提示不明確、交互流程過長，甚至有的網站光是登錄，就得大費周章。

如何提高效率，我認為主要從以下幾個方面著手：

1. 提高易用性

如果你的產品，讓人看一眼就能上手，那么說明是非常友好的設計。易用性不一定意味著簡單和低智，依據復雜守恒定理（泰勒斯定理），每個應用程序都有自己內在的、無法簡化的復雜度。

所以，提高易用性意味著要設計合理的交互，易用性分為對新手（小白用戶）友好和對老用戶（專家用戶）友好，包括數量最大的中間用戶。

如果你的界面是僅僅對于新手友好，那么可能完成的任務都是簡單而輕松的。但是對于老用戶，他需要更復雜的功能來處理大量龐雜的任務；因此在設計的時候，既要提供傻瓜式的操作方式，也要對專家用戶提供提高效率的工具。

1. 智能化

此處的智能化既包括通過大數據或者人工智能自動將操作步驟變得簡潔高效，也包括諸如一些字段輸入、自動定位、圖片識別、OCR 等方式來使用戶的效率得以提升的功能。

以前的用戶要摳圖可能會在 ps 中操作好幾個步驟才能完成，但是隨著機器學習技術的發展，ps 已經可以更加智能的摳圖。當然，還包括其他功能的智能化。

在 B 端 SaaS 領域，智能化也是一個重要的趨勢，針對不同的商家所面臨的不同的行業領域，我們或許可以提供更加全面且友好的服務。

3.提高通用性

提高系統內的一致性，減少用戶認知成本。在同一平臺內的頁面，樣式和交互上要盡量保持一致性，不要有的地方是總金額，有的地方是總價格，這會讓用戶犯迷糊。提高通用性，也意味著你需要關注并熟悉系統內不同功能之間的關聯性，盡量做到統一處理。

提高B端品質的設計方法

B端產品多在工作中需要長時間沉浸式使用，為幫助用戶集中注意力、高效完成任務，設計風格多為冷靜、克制、干凈、簡潔，相較于視覺，更多的是注重如何讓用戶理解產品邏輯。如何通過設計的處理更好的提升產品的效率，留住用戶，讓用戶有更流程的產品體驗。

1.內容豐富網站，提高搜索能力

在我們進入一個產品內容比較多的網站下，如何才可以讓用戶快速在網站中匹配到自己需求，解決自己的問題呢？最快速，便捷的處理方式就是搜索框輸入關鍵字，通過用戶的關鍵詞在系統中為用戶提供最匹配，最合適的內容，縮短用戶尋找產品的時間，提升用戶的使用效率，讓用戶有更流暢的體驗。

設計要點：

提高搜索框在網站中的曝光率

提升模糊搜索的正確率

盡量不要出現搜索結果為空

2.提示信息保持簡短直白

文案提醒要簡練，讓用戶掃一眼就知道要表達什么意思，不要讓用戶停下時間去思考，琢磨文字提示的信息，減少干擾信息，比如在處理input時加入默認提示，讓表單更清晰，表意更明確；有字數限制時，要明確可輸入字數和已輸入字數，這樣讓用戶有一個預期，不會出現輸著輸著沒法輸入新的內容。

設計要點：

文字簡短，清晰，通俗易懂

文案風格統一

3.及時糾正用戶錯誤，不要僅靠色彩提示

用戶使用產品時，用戶與產品之間形成一種“溝通”，良好的反饋機制能夠大大提升這種“溝通”體驗。用戶的每一步操作都應當得到相應的反饋，尤其是在錯誤時要及時糾正，以便用戶更準確的操作下一步。但是這種操作不應該只是錯誤色彩提示。比如當我們在輸入表單時，輸入錯誤系統并沒有給我們任何提示，只是將輸入框變為錯誤操作的顏色，這樣會讓用戶無法流暢完成操作內容。

設計要點：

及時糾正用戶錯誤，減少用戶焦慮

將用戶的錯誤操作清晰明了的表述出來

4.空頁面狀態給用戶提示操作

空狀態作用和文章中“承上啟下”的文字作用是一樣的，空頁面可以幫助我們理解上下文，讓用戶知道即將要發生什么，才會覺得舒服。最好的方式就是“展示和引導”：通過清晰的文字告知用戶發生了什么，并且通過按鈕/快速鏈接有效的引導用戶行為，避免用戶陷入死胡同，不知如何操作下一步。

設計要點：

空界面可以增加一些趣味性，個性化或者打造品牌感（IP形象/品牌logo衍生）

空界面狀態保持簡潔，直觀易懂

引導用戶操作

5.使用用戶熟悉的icon便于識別

當icon被用于設計時，最好使用用戶熟悉和容易識別的icon，以使用戶能夠迅速地了解其用途。如果icon無法傳達正確的意思，就會變成視覺噪音，讓使用者迷惑，成為使用者的認知障礙。

設計要點：

icon要易識別，正確傳達表示含義

同一層級的icon，要統一標準，設計一致

6.內容真實性

B端的設計往往會有很多種情況，我們在做名稱/數據的設計時盡量模擬真實的上線數據，如果涉及敏感數據可以自己改一下，但是盡量要采用字段長度，這樣可以在設計中無限接近上線后的產品，減少后期因為數據展示出現的UI調整。

設計要點：

在設計階段無限接近真實上線環境

將上線后可能出現的展示樣式都要制作出來，避免后期的返工

7.確保最重要的功能優先靠前

確定功能操作的優先級，將一些用戶關心的數據統計/報表展示一級頁面，使用頻率高的功能優先靠前展現出來，輕量級操作的信息入口盡量收起，不要展示給用戶，以免造成不必要的困擾，增加用戶學習成本。

設計要點：

確定功能優先級

高頻次入口優先展示，低頻次折疊隱藏

8.告訴用戶某個操作可能會帶來什么結果

B端產品邏輯嚴密和專業性較高，用戶在使用時經常不可避免的操作失誤，尤其是涉及到刪除數據或者金額方面的操作，我們需要格外的謹慎處理。在用戶犯錯時，我們要及時的提示用戶，這樣的操作會帶來什么樣的后果，提示的文案要注意語氣，不要將責任全部推在用戶身上，禮貌對待用戶。

設計要點：

要及時反饋用戶后果，避免因為不當操作造成傷害

頁面刪除盡量給二次確定，避免用戶誤點，做個人保護

盡量有垃圾箱回收，方便用戶后悔

9.提升加載過程中體驗

避免加載中用戶等待焦慮，我們可以使用分布式的加載方式預先加載頁面框架然后加載內容，在內容未出現前通過占位符的方式展示，優先加載占用網絡資源較少的元素，減少用戶的等待心理，占位符的方式可以讓用戶提前了解到頁面整體的展示樣式效果，給用戶加載好的錯覺。

在加載過程中我們可以通過這幾個視覺表達方式來加載，通過顯示品牌元素加載；色塊加載；界面布局；灰色圖顯示等。

設計要點：

避免空白頁加載等待，增加用戶焦慮

選擇最符合產品調性的加載

10.可讀性優化，簡化界面

我們要做到減輕界面視覺呈現，但這并不是意味著減少頁面功能。我們要幫助用戶簡化認知負擔，增加界面可讀性，降低用戶閱讀瀏覽復雜的大塊內容時的心理壓力和抵觸感。將一些復雜的表單內容通過數據可視化的方式讓用戶更快，更便捷的查看數據，從而對業務有更直觀的理解。

設計要點：

數據可視化是一個不錯的選擇

避免不必要的元素信息

保證可讀性

11.進度條增加清晰信息引導

一個優秀的進度條可以讓用戶減少很多的焦慮，并且讓過程和結果步驟清晰可見，進度條的目的在于通過向用戶反饋當前響應進度來讓用戶在等待中放松下來，在用戶等待程序處理事情時，不應該把用戶仍在一旁傻傻的猜想程序什么時候結束，這個步驟還有多長時間。正是這樣的情景下，進度條剛好可以構建用戶與系統之間溝通的橋梁。面對長時間的幾十秒的操作的進度條不應該只是一個進度模糊顯示，更好的處理是應該加入進步完成的百分比，清晰明了告訴用戶系統完成了多少工作量還剩多少。

設計要點：

進度條可以打消用戶對程序等待響應的疑惑

針對響應時間稍長的進度加入顯示百分比

12.設計驗收

開發完成后設計師要開始設計走查，因為開發不可能百分之一百的還原設計圖，所以最后的設計把控是非常重要的，即使是開發按照設計圖還原界面但是可能代碼實現后還是有些問題，或者是不同尺寸的屏幕適配，或者是加入真實數據后一些展示問題，又或者是頁面的跳轉/返回以及一些彈窗提示等都需要最后的走查確定；不僅僅是視覺頁面驗收，交互方面還要考慮去驗證思考最符合用戶操作體驗的流程。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一個優秀的設計不僅要解決正確的問題，同時也是給用戶創造積極的情感。在過去，實體產品可以通過人類的五感來創造情感體驗，但對于如今的數字化產品來說，這似乎很難達到，因為只是在屏幕上進行枯燥的交互來獲取服務。

所以，數字化產品設計師們需要更深入的理解每種類型的情感，以及創造它們的心理學原則。

根據唐.諾曼（Don Norman）的研究，人們對一個物體產生情感有三個層次：本能、行為和反思。

• 本能層: “用戶想要的感覺是什么”

• 行為層: “用戶想要做什么”

• 反思層: “用戶想成為什么樣的人”

在第一層，用戶將通過視覺和與產品的交互設計中產生情緒。因此，這是UI設計師擅長發揮的地方。除了美學和基本的平面設計原則外，下面是我在工作中經常應用到設計中的心理學原則。

格式塔原理

相似律

人類的眼睛傾向于將相似的元素連接成一個組，而大腦會認為這些元素都有相同的目的。 

因此，在設計具有相同功能和內容的界面元素時，就應該要保持一致性。（彩云注：這也是為什么要保持一致性的理論解釋）

應用場景: 導航、控件、卡片、banner、內容、分頁

連續律

人眼會將連續的元素視為一組。這一定律與對稱性和相似性非常相關，通過在一個序列上設計相似和重復的元素，我們可以將用戶的視線引導到我們想要的方向，它能使得閱讀信息更加連貫和清晰。

一點點的切割是在暗示用戶，這里還有更多的內容等待你去查看。

應用場景: 菜單、列表、排序、輪播、服務進度

封閉律

當看到一幅不完整的圖像時，大腦會依賴之前的經驗進行填充。 

這是圖形和logo設計中常用的規則，但是在產品設計中，我們也經常把它用在圖標和Loading設計中。

應用: 圖標、loading、數據可視化

相近律

這是UI設計中的一個基本規則，因為人眼會將任何相鄰元素視為一個組。 

在設計的時候，我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內容組，然后使用小空間來分隔大內容組中的小內容組。

應用場景: 導航、控件、卡片、banner、內容、分頁

對稱律

我們的大腦喜歡看到對稱和平衡的東西。它是所有設計領域中使用最頻繁、最安全的法則。它幫助我們創造一種穩定和秩序的感覺。 

當設計需要簡單和諧可視化的產品時，我經常使用對稱律。當用戶需要關注重要的事情時，它也能讓他們感到更舒服。缺點是，如果過度使用，產品會變得乏味和單調。通常，我用標題或CTA按鈕來更好地強調和號召行動，打破畫面的單調格局。（彩云注：CTA是call to action的縮寫，中文通常翻譯為行為號召。可以理解為引導用戶點擊的行為都算是行為號召）

應用場景:控件，banner，強調內容，產品顯示，清單，導航。

背景分割

這個定律是關于人眼傾向于注意脫離背景或組合的事物。 

我使用這個規則引導用戶的眼睛看到重要信息。它通常是一個卡片設計與一個輕投影在背景之上的層。此外，構建整體也是應用這一規則的一種方式。

應用場景：卡片、內容、列表、服務、摘要

共同命運法則

在同一方向上移動的元素被認為比固定的元素或在另一個方向上移動的元素更相關。這個規則應用幫助我們建立組和狀態之間的關系。 

在制作動畫時，我經常更明確地使用這個規則。然而，我們仍然可以適用于許多不同的因素。

應用場景：導航/下拉菜單，折疊，手風琴，工具提示，產品滑塊，視差滾動和指示器。

2. 焦點原則

當我們看東西時，我們的眼睛傾向于首先關注最突出的元素。理解這種行為將幫助我們在設計中創建一個“錨點”，從而推動用戶查看我們的場景之后的內容。

應用場景:內容、落地頁、價格、產品頁、banner 

3. 雷斯多夫效應

（彩云注：維基百科解釋為指個人對學習材料或所見所聞的資訊，容易記住最特殊的部分的現象。例如：有一些參考書將重要的資料，以不同顏色或特殊的字體標示出來，就是利用雷斯多夫效應來加深讀者的印象。）

這也被稱為隔離效應，它表明人們傾向于注意并記住與其他部分不同的部分。這條規則很容易與焦點定律混淆。不同的是，應用此規則的元素通常是獨立的，沒有為用戶導航更多信息的額外功能。 

應用場景：定價表、促銷banner、不同會員介紹 

4. 本能反應

基于現實世界打造的視覺體驗。比如，當我們看一個視頻，每個高潮笑話時都有旁白跟著一起笑時，我們會更容易發笑（彩云注：想想《快樂大本營》）。用戶會喜歡我們的設計，如果它讓他們感覺良好和舒適。

（彩云注：這個理論的意思是說盡可能讓用戶產生沉浸感，把產品用到真實的環境上，比如大家平時使用的手機樣機，把設計的界面放到這些樣機中就能夠給人直觀的感受到應用后的效果，也是這個理論的運用）。 

應用場景：產品配圖、插圖、攝影 

5. 色彩心理學

有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學海報就足夠了（彩云注：感興趣的可以自行翻譯研究下）。

此外，我們不要忘記從早期到現在一直在廣泛使用的顏色，這些顏色的使用更符合用戶習慣：

紅色：錯誤

綠色：成功

藍色：進行中

黃色：警告

6. 形狀心理學

就像顏色一樣，人類的潛意識對不同的形狀也有不同的反應。例如:

圓形、橢圓形：傳遞積極的信息，通常與社區或關系有關。

方形和三角形：帶有強烈的信息，通常與力量和穩定聯系在一起。

豎線：代表強度、力量或攻擊性。

橫線：表示平靜、相等、安靜。

7. 雙碼理論

這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外，人類是視覺動物，我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設計的有效性，我們不應該去掉解釋性的文字。

（彩云注：根據這個理論，在做作品集時，就應該盡可能的多用視覺化語言，文字作為輔助，對于視覺設計師來說，能用圖表達的就盡量減少文字的比重。） 

 一個很明顯的例子就是導航欄。大多數新的應用或具有復雜功能的應用都同時設計了圖標和文字標簽。 

8. 并行設計

人類的眼睛傾向于看到平行因素比其他因素更相關。我經常使用這一原則對同一屏幕內的兩組不同內容進行分類。最容易看到的例子可能是Facebook messenger界面，當帖子并排排列時，消息是平行的。 

9. 共同區域

這一原則類似于格式塔原則中的相似定律，但它并不是完全相似。共同區域原則是通過我們使用分隔線、形狀或顏色的方式創建的。 

如果一個界面需要用戶滾動更多來查看內容，我們應該有一些方法來更清楚地劃分它，而不僅僅是使用間距。

應用場景：列表清單、信息流

10.掃描圖形

根據NNGroup UXPin等組織或團體的各種研究，兩種最常用的掃描模式是“F”和“Z”。

• F的使用最為廣泛，尤其是對于內容量大的網站。

• Z用于不太注重文本的網站，通常強調在最后的號召行動。

一旦我們理解了如何使用這些模式，我們就可以選擇布局并有效地安排元素來實現我們的設計目標。 

總結

第一印象是最令人難忘的，積極的體驗可以在用戶和產品之間創造持久的關系。如果能讓用戶在一開始就喜歡上我們的設計，就能為我們的產品創造了一個很好的優勢。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

什么是視覺層次

視覺層次不僅僅包含文字有關，它還包含我們的圖片，視頻按鈕以及文字以外的視覺元素。所以當你設計一個網頁時候，除了網站整體的顏色，排版，圖片也能夠影響視覺層次。那么如何讓設計的層次更清晰，常用方法有哪些，今天我們一起來聊聊關于設計層次，希望可以幫助到你。

運用尺寸大小建立層次

▲如上圖插畫的比重很大，在設計這種大的元素時，你的每個元素比例和細節處理都被同時放大了，我們可以看見這副插畫四周還運用了很多元素，讓頁面達到平衡，同時這個畫面和旁邊的文字場景也很好融合在一起。一個好的設計一定是通過視覺手段讓用戶理解信息更加準確，在看完頁面文字和圖片后，很自然的引導到底部的按鈕，這才能算是一個很引人注目的設計。

運用色彩建立層次

運用文字大小字重建立層次

運用視覺重量建立層次

▲設計師熟悉的medium官方App設計，在正文閱讀時，同樣采用不同的視覺重點來突出重要信息，比如左邊通過字重以及文字背景綠色底色和正文對比，非常醒目。右側通過淺綠色作為背景強調突出。

▲同樣在一些重要位置，Medium也是運用視覺重量處理，如左圖通過頂部提示條提示可以通過語音播放，在右側付費文章通過行動按鈕引導用戶升級付費。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務