雖然直覺認為按鈕是一種很簡單的控件，但在梳理按鈕相關知識點的過程中，發現小小控件其中包含了很多容易被忽略的細節。

按鈕幾乎是每一個頁面不可或缺的元素，對于按鈕的認識基本停留在視覺層面，一個圓角矩形搭配一句文案就能拼湊成一個最基礎的按鈕。視覺是一個觀察的切入點，但僅停留在視覺層面還是不夠的，比設計表現更重要的往往是背后支持設計的理由。本文中的所有案例均來自線上產品，觀點僅是個人粗淺的理解，有疑問的地方歡迎大家討論指正。

按鈕的定義

1. 按鈕的來源

數字世界是現實世界的一種映射，許多數字概念，都可以在現實世界中找到原型。按鈕就是很生動的一個案例。在視覺表現上貼近現實生活中真實物體的外觀，擬合用戶心智模型，降低用戶的認知和理解成本。

2. 按鈕的定義

如果從視覺形式上看，按鈕的組成很簡單，一個矩形容器加上文字或圖標即可組合成一個常見的按鈕，但是僅僅從視覺層面定義按鈕是不嚴謹的。按鈕是一種重要的控件類型，而控件是圖形用戶界面（GUI）的主要構成模塊。想要深入理解按鈕，就必須要求我們首先理解什么是控件以及控件的分類。

3. 控件分類和介紹

定義：控件是用戶和產品間進行交流的屏幕對象，是圖形用戶界面（GUI）的主要構成模塊。

分類：根據用戶目標，可將控件分為 4 大類。

每一類控件下又有更多具體細分。所有界面中常見的具體控件都可以根據其功能找到所屬的類別。

4. 按鈕的分類

在以上各個細分控件中，我將部分控件歸入按鈕類別：

命令控件下的：傳統按鈕、圖標按鈕、文字按鈕

選擇控件下的：開關按鈕、單選按鈕、組合圖標按鈕、狀態切換按鈕（開關和復選框樣式比較固定，為了方便討論，姑且不算在按鈕范疇之內）

因此如果以按鈕為主體，以功能屬性為分類條件，可將按鈕分為：命令型按鈕和選擇型按鈕

命令型按鈕與選擇型按鈕的區別

不論從功能維度、交互維度、視覺維度上看，這兩類按鈕各自都有不同的特點。

選擇型按鈕非瞬時狀態有：“選中”和“未選中”兩種互斥狀態。可以把選擇型按鈕理解為某種狀態的確認和展示。

命令型按鈕的非瞬時狀態只有一種：正常狀態，當用戶點擊命令型按鈕后，命令即可下達。可以把命令型按鈕理解為一個動作，點擊按鈕代表著立即執行這個動作。

常見按鈕的拆解

介紹完了命令型按鈕和選擇型按鈕在功能、交互、視覺層面的區別點后，我們再來看看實際工作中常見和常用的按鈕類型。

1. 傳統按鈕（有容器兜底的按鈕）的來源：

GUI 中“按鈕”的概念來源于真實世界中的按鈕。真實的按鈕具有一個非常顯而易見的特點：擁有一個適合點擊按壓的受力面，這個受力面就是可點擊感的來源。試想一下，假設一個按鈕只有針尖般大小，且不說你是否能認出這是按鈕，即便你知道這是按鈕，你會有按下的欲望嗎？真實情況下，擺在人們面前的按鈕面積越大，想按壓的欲望就越強。因此傳統按鈕的最顯著特點就是擁有一個承載內容的“受力面”，也就是承載文字或者圖標的“容器”。受限于早期的顯像技術，以及與真實世界的對照，這種“容器”通常一般都是矩形，后期漸漸衍生出更加柔和的圓角。

風格發展：

在相當長的一段時間里按鈕都有三維凸起的特征，進一步鞏固了按鈕的可點擊感。不過進入移動時代后，這種流行趨勢發生了改變，按鈕的三維印記被不斷移除。用戶已經建立起了成熟的心智模型，即便按鈕在視覺上越來越“平”，也不妨礙點擊行為的發生。結合多年的使用經驗，用戶已經將矩形形狀這一特征和按鈕牢固地聯系了起來。即便現在的按鈕大多都是扁平化，用戶也能一眼就辨認出按鈕屬性。

2. 傳統按鈕的拆解：

常見按鈕一般是由容器和內容組成。

容器層面

• 容器形狀：

移動端比較主流的按鈕形狀有：矩形、圓角矩形、膠囊形和圓形 4 種。一般，在人們的認知里，圓角越大傳遞的感覺越圓潤親切。其實形狀本身并沒有好壞區別，與單純視覺偏好相比，元素的統一性更加重要。一旦選定了某一種按鈕形狀，就需要保證所有場景中出現的按鈕都盡量看上去整體統一。

• 容器尺寸：

視覺上，按鈕越大，越吸引用戶注意，決定按鈕大小的主要依據是按鈕在頁面中的優先級。而一個產品涉及到頁面眾多，如果不同的頁面元素之間缺乏統一的調度規則，就會出現按鈕尺寸過多，沒有規律，細節混亂，效率低下的情況。為了既能適應不同的場景，又能保持產品級的控件統一，一般要給按鈕尺寸設定幾個檔位以適配不同頁面需求。排除個別特殊頁面，一般把按鈕設置為 5 個優先級梯度檔位就足以滿足設計需求。

我們可以從優先級從高到低的順序，將按鈕分為：特大、大、正常、小、特小 5 個尺寸檔位。

下面展示最常使用的三個檔位，大、正常、小檔位。

• 容器顏色：

按鈕的大小、形狀、顏色三個維度中，人眼是對顏色信息最為敏感的。在一個頁面中，突出一個元素的方式有多種，其中最簡潔有效的方式就是用顏色進行突出。顏色包含了色相、飽和度和明度三種屬性，改變顏色的不同屬性，都會對按鈕的表意產生影響。同時，不同的顏色代表著不同的含義，配色時需要加以注意。

• 容器樣式：

容器除了基本的尺寸、形狀、顏色之外，還有多種樣式。

上文介紹的容器是強面性的，此外，容器還有弱面性、線性等樣式。

• 容器細節：

雖然現階段的按鈕越來越扁平，但在扁平的趨勢下，依舊有發揮設計創意的空間。

顏色漸變、投影、動效都是常用的設計手法。

內容層面

聊完了“容器”部分，再來看看容器承載的“內容”又有哪些細節點。

3. 圖標按鈕的介紹

并非所有按鈕都需要容器，尤其當按鈕密度較大時，去掉容器只保留內容，可以更好地提高空間利用率，簡約視覺。

4. 文字按鈕的介紹

比圖標按鈕更輕量的按鈕類型是文字按鈕，以文字的形式展示，和界面融合度更高，當用戶有需要時才會注意到文字按鈕的可點擊性。

5. 傳統按鈕與圖標按鈕的組合

這種組合形式相當常見，將多個功能整合在一個區域內，如底部工具欄（ToolBar）或者頂部導航欄（Navigation Bar）。不同按鈕承載著不同功能，側重越明顯，越利于用戶快速識別并決策。

特殊按鈕類型

上面介紹的是常見的按鈕形式，除了以上按鈕，有一些按鈕形式專門適用于某些特殊場景。

如懸浮按鈕、膠囊按鈕等。

按鈕的優先級

一個頁面往往有多個按鈕，不同按鈕承載不同功能，功能之間有相同或者不同的優先級，因此按鈕之間也存在這相同或者不同的視覺優先級。

我們分兩類情況來討論：相同優先級的按鈕和不同優先級的按鈕組合。

按鈕樣式小結

上文羅列了實際工作中常用到的一些按鈕樣式，最重要的步驟是分清按鈕主次，使用不同的樣式進行搭配。

優先級強到弱：

強面性按鈕、弱面性按鈕/線性按鈕、圖標按鈕、文字按鈕

碎碎念：

本文中出現的部分名詞，比如“弱面性”、“容器”等，只是為了便于交流和統一指向，并沒有具體權威出處。文中提及的按鈕類型均來源于線上產品，樣本有限，適用場景相對固定，還有很多樣式沒有一一遍歷。但掌握了如何選擇樣式的原理，就可以根據日后具體需求做出合理方案。文中出現的數據都是經驗型數據，如按鈕按下狀態是在正常狀態下添加 10%純黑的遮罩，文字字號大小等，這些都是建議型數據，可以根據具體情況靈活調整。

文章來源：站酷   作者：設計師doo


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

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

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

文章來源：站酷   作者：船長的成長日記

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

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

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

設計趨勢可以塑造一切，從設計師的創作方式到用戶界面設計，再到從網站到包裝設計的未來迭代。

讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021年末開始出現的趨勢，這些趨勢是為來年奠定基礎的，以及一些即將流行的趨勢設計。

有趣、樂觀的設計

時尚的形狀、顏色，甚至是面孔都可以帶來很多樂趣。設計師正在使用網頁設計趨勢，為從網站的所有內容提供有趣、樂觀的設計。這些設計的共同點是它們為世界注入了一點額外的快樂。

充滿樂趣和樂觀的圖像具有面孔、較輕的字體，以及散發出積極情緒的顏色。為了充分利用這一趨勢，請考慮更輕的元素，并避免選擇較重的字體或顏色。

黑白配色方案

黑白配色方案是今年最鮮明、最美麗的設計趨勢。沒有顏色，你可以在限制范圍內思考和設計。

大膽和實驗性的排版

在2022年，沒有錯誤的排版方式。大粗體字體——甚至襯線字體——無處不在。在玩這種網站設計趨勢時，請考慮字體將如何響應以及如何最大限度地對訪問者產生影響。

三維設計元素

雖然2020年和2021年有很多設計師網站處理完整的3D 設計，但新興趨勢是將3D元素與更扁平的整體美感結合起來。

具有3D風格的元素可能包括陰影、動畫或圖層效果，以創建深度和維度。

三維設計也延伸到視覺敘事?？紤]如何以突出景深和陰影的方式捕捉您的故事或產品。

近乎野獸派

野蠻主義是人們想要加入的網站設計趨勢，但對于大多數項目來說，它過于苛刻和尖銳。

這些設計使用了許多相同的鮮明效果。不是單色字體，更容易看到襯線是常態。即使有一些明顯的邊界和線條，元素之間也有足夠的空間。沒有太多的裝飾或其他視覺效果，只留下顏色和文字來真正承載這些項目。

滾動文本元素

雖然總是希望文本元素可讀，但它們也可以是動態的。滾動文本元素——通常使用超大字體、幾個詞、在一個位置——可以增加對關鍵詞的強調并激發用戶的興趣。

輪廓字體是一種流行的選擇，保持可讀性的關鍵是使用簡短、常用的單詞或短語。

玻璃態

玻璃態的第一個展示于2020年末和2021年初的新態，并演變成現在流行的更完整的玻璃效應。

正是您可能想的那樣：設計元素的外觀讓人聯想到玻璃?？赡苡型该鞫取⒗涞蚬鉂傻脑?。

設計師們一直在Dirbbble上以一種主要方式使用這種風格，并找到了網站設計的方法。

更多漸變

漸變是不斷出現的設計趨勢。2021年，設計中的大部分漸變出現在背景中。

到 2022 年，漸變將采用兩種新形式：

1) 用于文本顏色填充（例如上面的示例）以提供最大的影響和強調

2) 作為用其他線條填充插圖或圖標以創建紋理深度效果

沒有圖像的主頁

無需圖像即可設計，您將在 2022 年緊跟潮流。

使用不同類型的用戶界面或設計技巧來充分利用沒有圖像的主頁。在此處的示例中，Kirifuda 使用了漂亮的黑白配色方案，在文本元素之間具有疊印效果。超大的排版和手寫風格的字體有助于將它們融合在一起。

分屏美學

分屏美學重新奏效。幾年前的趨勢當時出于可用性和響應的原因而起作用，現在它更像是一種新設計。

這些視覺效果可以包括水平或垂直分割的屏幕，每一切面有不同的功能。

交互式字體

在屏幕上與您一起移動的文本是交互式字體背后的支柱。在大多數情況下，這可以使用懸停狀態，盡管您可以嘗試一些其他更復雜的效果。

在考慮交互式文本元素時，請考慮可讀性和理解力。文本效果只有在其中的文字仍然可讀和可理解的情況下才有效。

包容性設計

設計師正在努力打造一個更具包容性的網絡，它幾乎在所有發布的內容中都有體現。從圖像到語言再到替代文本，沒有理由不嘗試讓您的項目更加包容所有人。

包容性延伸到種族、性別中立、文化、可及性和能力。共同的主題是您的網站應該以這樣的方式組合在一起，以便任何想要訪問內容的人都可以訪問內容，并且人們也可以在屏幕上看到他們可以與之相關的其他人。

結論

就網站設計趨勢而言，新的一年已經開始以非凡的方式爆發。如何將這些元素合并到現有項目中是作為設計師該考慮的問題。

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

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

在大型B端產品中，不可避免的出現各種配置，配置如同一個個控制閥，決定著業務的走向，并實現saas產品的千人千面，以滿足不同客戶的訴求，適應不同行業的業務場景。但在隨著產品的發展，配置項也越來越多，逐漸變的不可設計與維護。給什么做的配置？配置是如何生效的？好的配置具有什么特點？如何確定配置的維度？針對這些問題，筆者就以自身的工作經驗，來給大家說一下如何進行復雜B端系統的配置功能設計。

一、給什么在做配置？

在開始配置之前，我們要想清楚，我們到底在為什么在做配置。

軟件系統是現實世界的抽象，在《THINK IN UML》一書中，表述了現實運行的機制：人驅動系統、事體現過程、物記錄結果、規則控制運行。由于我們不可能利用一套固定的規則滿足所有客戶的業務場景，故我們需要支持規則可調整，調整規則的功能，就是配置功能。

我們習慣用用例（use case）的方法來抽象現實世界的需求，一個完整的用例定義由參與者、前置條件、場景、后置條件構成，其中：

• 參與者通過系統輸入物與系統交互，可以是輸入的一段指令，一筆訂單，一個商品信息等；
• 前置條件：發生這個用例的前提條件，即輸入物滿足什么條件才可以發生這個用例
• 后置條件：發生這個用例之后的結果，會產生哪些影響

那么當我們翻譯成UML的語言時，配置就是定義前置條件和后置條件的系統功能。

那么當我們判斷輸入物滿足什么條件時，還是分兩類：

• 當輸入物存在時，即滿足條件。如：當OMS系統發出打印指令時，即調用配置中指定的打印機進行打印；
• 當輸入物的屬性和預設規則滿足時，即滿足條件。如：當ERP推送商品價格數據到OMS中，由于商品價格數據這一個輸入物的所屬類別分類屬性，滿足預設規則1，則自動加價5%；

當我們分析會產生哪些影響時，我們可以分三類：

• 邊界類：影響操作界面是否可查看可操作，或者接口是否可用。權限控制RBAC設計模型和接口的訂閱配置，就是典型的對邊界類造成影響的配置設計；
• 實體類：影響數據庫表，文檔或其他具有持久化特征的數據的格式、內容；如OMS系統設計中的審單功能中，會根據配置在訂單上加上贈品商品行；
• 控制類：影響控制程序，工作流，算法體是否起作用；如OMS系統中，訂單會根據配置來決定是否直接跳轉到某個狀態，如退單長時間未審核，則自動同意的配置

在復雜的B端系統中，我們往往發現一個業務無法用一個用例就描述清楚，導致配置設計還是無法進行，如這個業務場景：

ERP將商品資料同步到OMS，OMS加工后，同步至各商城。

由于用例體現了參與者的愿望，用例的執行結果應對參與者來說是可觀測和有意義的，那么顯然，同步商品資料到各商城，對于業務的起點ERP來說，并不是其愿望，也不可觀測，但是不存在沒有參與者的用例，用例不應該自動啟動。由于參與者可以是非人的，換句話說，參與者可以是用戶的一個指令，或者是上游系統的通知，故我們往往將用例根據參與者的不同進行拆分。以筆者參與的OMS產品為例，我們根據長期的實踐，習慣根據參與者的不同，劃分為三種不同的用例。不同種類的用例，配置一般影響的類別也不一樣：

• 輸入用例：比如上游訂單系統同步訂單至OMS、ERP系統同步商品資料至OMS。配置一般影響邊界類；
• 處理用例：比如訂單打印、訂單拆單合單、訂單履約、商品價格加價處理。配置一般影響控制類；
• 輸出用例：比如OMS輸出訂單發貨清單至ERP、OMS系統同步商品價格至上游平臺。配置一般影響實體類；

我們可以整理出下圖：

二、配置設計要求

上文我們了解了在給什么在做配置，那么一個好的配置應該滿足什么條件呢？

第一：配置邏輯自洽

1、根據輸入物屬性識配自己的規則時，規則之間不能相互沖突；

我們拿商品價格策略配置舉例：

當我們識別商品的價格屬性去適配規則時，我們應使用MECE分析法，按照完全窮盡，相互獨立的原則，將屬性的枚舉值整理出來，當無法完全窮盡時，應設置默認規則；

2、配置與配置之間不能互相沖突；

我們仍拿商品價格策略配置舉例：通過識別商品的價格、所屬平臺、所屬門店等屬性去適配規則時，可能會出現同一個商品同時滿足多個配置的情況；

這種情況下，我們需要先判斷多個配置是否可以疊加：

可以疊加：當對實體類進行配置設計時，一般策略是可以疊加的。在這種情況下，可以增加配置疊加規則，如設置上限\下限：加價策略都是以輸入的原價為基準進行加價，累次加價不能超過原價的8%

不可以疊加：需要增加策略沖突時的應用規則

• 應用最新的配置：適用最后更新的配置；
• 指定策略優先級：為配置分配優先級，在配置不可疊加時，選擇優先級最高的生效；

第二：配置變更有跡可循：重要的業務配置，需要提供配置變更日志查詢，記錄配置修改人與修改時間

第三：配置影響的前后數據對應：如果配置影響的是實體類的修改，則應在數據庫中記錄時，需記錄數據原值和配置影響后的數據，不應在同一個字段，用配置影響后的數據直接覆蓋原數據。實體類的新增則不需要；

第四：高拓展性：系統的能力建設是持續的，配置的設計可以延續標準的工作流程不斷拓展新增；

第五：配置規則可理解：需要提供必要的功能指引，配置規則的入口和操作方式需要符合用戶的認知；

第六：不同維度的繼承關系清晰：在不同維度設計同一個配置時，需要理清楚是否要繼承父輩維度的配置，一般要支持可配置是否要繼承繼承父輩維度的配置，以免造成修改此維度的配置后， 又因為繼承了父輩維度的配置，導致修改配置不生效；

三、確定配置管理的維度

我們發現，存在配置需要對輸入物的多個屬性進行識別以決定應用哪個規則的情況，那么我們配置的維度如何設計呢？

當我們只有一項配置時，我們當然可以如下設計：

但是如果我們每次新增一個配置，就長出一個新頁面，很快就會發現：

用戶操作成本高，需要從大量的配置中，找到對應的配置進行操作；

配置設計拓展困難，每次新增配置，就要做一個新的頁面；

這時，我們可以查看一下系統的領域模型，找到輸入物的共同屬性，來組織配置功能的架構：

這時我們發現，雖然輸入物繁多，業務場景各不相同，但是他們都有一個共同的父類：渠道店鋪。如果此時，渠道店鋪作為輸入物的一個屬性，參與配置規則生效的匹配，則可以將渠道店鋪這個屬性抽離出來，作為配置管理的維度，如：

這樣做的好處是，用戶可以在一個頁面，完成多個配置，而不用不停的切換頁面。

我們也可以看到，渠道店鋪可以繼承渠道、渠道商家、商家、店鋪的配置，我們可以根據真實的業務訴求，以盡量減輕用戶配置負擔為目標，靈活的選擇配置的對象。

當某個用戶在配置時，一個屬性不同的枚舉值對應的規則一樣，例如期望所有美團渠道的店鋪都適用自動打印配置時，我們到最小的配置維度【渠道店鋪】去一個一個配置，無疑還是增加了用戶的操作成本。這時我們就可以考慮將其父類作為配置的維度，子類繼承父類的配置規則。

四、配置的入口怎么設置

確認配置的入口，我們一般這么做：

STEP1: 根據配置操作人確認在哪個系統上做配置；

STEP2: 根據業務用例上的參與者劃分不同的配置模塊；

STEP3: 根據配置維度，聚合配置功能；

STEP4: 易用性改造

以下為筆者負責的OMS系統中配置功能的統計（數據已脫敏）：

關于易用性改造，我們一般做以下事情：

在業務或數據相關頁展示配置入口；

利用接近原則，在業務或數據相關頁展示配置入口。利用接近原則是一個心理學名詞，指對于彼此接近的事物，人們總會下意識地將他們建立某種關聯性，并視為一個整體去看待。這么設計可以減輕用戶的認知成本。例如：

將業務流程中配置形成SOP；

如一個商家的系統進行初始化時，需要進行履約相關配置、庫存價格策略配置、前臺作業系統配置等，如果一個一個去找相關的配置，則學習成本較高，容易出現配置遺漏等情況，那么我們一般將業務流程抽象為一個SOP，在SOP中，展示對應配置的入口。例如：

3、支持查詢配置

提供全局性的查詢功能，支持查詢對應的配置。例如：

五、示例：配置設計的流程

這天，運營給我反饋了一個問題，希望可以新增訂單自動打印的功能，以支持OMS系統在多個業務節點下，可自動打印小票，而不用店員再去手動點擊，而且要可以控制預約單在預約送達時間前1小時打印，由于門店使用的打印機型號不同，還要支持為不同的打印機配置不同的打印模板。

我識別到此需求后，我按照以下工作流程，進行了配置的梳理：

STEP1: 識別參與者，抽象用例：抽象出用例，才能拆分配置功能。強行在一個配置里，將所有業務規則都體現，是不現實的；

STEP2: 確定要配置的內容，確定配置的維度；

STEP3：根據配置的操作人和配置的維度，確認配置的入口；

最終可以整理出這個表格，接下來我們就可以根據這個表格、進一步梳理業務流程圖、整理原型、撰寫PRD了。

六、結語

配置設計紛繁復雜，今天我以實際的工作經驗，給大家介紹了我對B端配置設計的一些思考，希望可以給大家一些思路，并且引導大家思考功能設計背后的邏輯，權當拋磚引玉吧，畢竟抄競品簡單，但是競品因何發展成這個樣子，其中的邏輯判斷，與設計權衡，才是我們應該了解的。

文章來源：人人都是產品經理   作者：kathic

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

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

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

文章來源：站酷   作者：CE青年

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

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

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

文章來源：站酷   作者：CE青年

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

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

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

文章來源：站酷   作者：進擊的M

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

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

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

接下來這部分就主要梳理一下關于表單中常用的組件的解析，包括多個組件組合成高級組件應該具體應該怎么應用，或者說我們在修改表單的時候應該注意哪幾個基本原則，全篇干貨，結合案例全面深度解析表單、表格、圖表、儀表盤的設計應用，以下內容較多，大家可以根據上述目錄來選擇性閱讀。

1.1 表單的概念及作用

表單的概念: 登陸注冊就是平時最常見最簡單的表單，表單包括數據的輸入和提交的一些操作。

表單的作用：01、數據過濾（過濾信息）：如果把ERP、CRM這些系統比作一個數據，用戶來這個系統進行獲取數據，這些數據對用用戶的價值比較大，用戶并不是來獲取所有數據的，有一些數據對他有用，有一些數據目前來講是沒有價值的，或者用戶不想獲取到的，這時用戶其實需要對數據進行處理，查找想要的數據，去掉沒用的，而表單起的就是這樣的作用，用戶通過表單進行數據的過濾，數據的定位，找到想要的數據。

02、數據定位（通過過濾漏斗，精確的定位到信息）：比如我們要在系統里查詢搜索一個商品，搜索一個快遞等等，這個搜索的過程，就是通過表單對數據進行過濾的過程，通過對數據的過濾，精確得定位數據，最后得到想要的數據，這也是數據減少的一個過程，一開始很多條數據，通過表單搜索查詢找到想要的，比如可能就10多條數據是和自己有關的。這個過程也是數據減少的一個過程。

03、數據輸入（將新的信息輸入到系統中）：用戶還可以通過搜索使數據減少，同時還可以通過表格操作，數據的添加操作，表單數據輸入的操作，讓數據增多，這時表單起的作用就是數據輸入的作用，將新的數據輸入到系統中。

1.2 表單常用組件

1.2.1  輸入類組件

1.2.1.1  輸入類組件分類

單行文本：只輸入一行，不存在回車和換行，比如輸入手機號碼，30個字符以內的文字，都是單行文本可以解決。

多行文本：多行比單行默認高了點，它可以換行，輸入框變高了。通常用在發表心情狀態，個人簡介等。

富文本：指豐富的文本，不只能輸入長文本，還可以把文本加上樣式，可以定義文本的字符大小，定義樣式，定義下劃線加鏈接等等，通過副文本編輯器實現的，比如站酷編輯文章的輸出文本就是富文本。

Tag標簽：是一個文本標簽，比如發一個商品時候，告訴商品有哪些屬性，通常加入在搜索引擎中。

1.2.1.2  輸入類組件布局展示方式

01、文本標簽的對齊方式：以輸入框輸出用戶名為例，列舉三種不同的文本標簽對齊方式?？煞譃槿N：01.文本標簽右對齊，也稱之為冒號對齊；02.文本標簽左對齊；03.文本標簽上對齊。那么這三種對齊方式具體應該在什么情況下去用呢？根據“眼動儀實驗數據”來看，也叫做古騰堡視覺動線，人們看一個頁面的視覺動線的順序，通常是從左到右，從上到下去瀏覽閱讀。

文本標簽左對齊應用：因此根據古騰堡視覺動線原理，在用戶填寫信息的時，想讓用戶填寫的時候，填寫速度慢下來，我們設計的時候就用左對齊。

文本標簽右對齊應用：當我們在設計頁面對齊方式時，不知道該選擇哪種對齊方式的時候，就用右對齊，起碼不會出錯。

文本標簽頂對齊應用：頂對齊方式橫軸不占用空間，用戶填寫完成速度較快，但缺點是上下布局展示滾屏時Y軸的可擴展空間很少，因此除了系統中登錄注冊會用到文本標簽頂對齊之外，其他地方都用的很少。

占位符對齊：在手機端基本都使用占位符對齊，因為用文本標簽對齊太占用手機Y軸的距離了，但缺點是輸入時出錯率相對要高。

02、文本標簽的樣式：文本標簽的樣式分為兩種，左右布局時：用線或者框，左右布局在B端系統里常用框來展示，而線，在C端經常用到，因為線很簡潔，如果手機端設計有外框的話會顯的沒那么開放，而在成熟的B端產品里基本不會用到線，注冊登錄的設計除外，因為在B端中一旦出現很多線的控件，會導致它的辨識度很低，也很難去檢索控制它，同時視覺動線也顯很亂。上下布局時：它的文字標簽一種在外部，另一種是在內部。當表單少的時候，可以用上下布局，但是一般用的也很少，在B端系統，輸入類組件大部分還是左右布局用戶框來展示。

1.2.1.3  多樣式輸入類組件案例解析

除了上述提到的輸入組件之外，還有很多種不同的展示樣式，但本質上還是這四類輸入類組件，可以靈活使用，而不是一直使用單行文本來解決問題，大多數情況終極目的就是為了，減少用戶使用出錯率，進而提升產品使用效率。以下案例請結合下圖閱讀。

案例1: 選擇合適的大小：

圖1:比如一個手機號碼輸入框，再國際環境可以采用上面圖文的輸入方式，國內環境產品就用下面得輸入框方式。這么設計的原因是因為，固定的寬度向用戶暗示所需輸入內容的長度來減輕判斷負擔。例如我們在輸入手機驗證碼的時候通常是六位驗證碼，以前的設計是給我們一條線來進行輸入，現在都是給我們六個空格去輸入，這時按格填空對用戶的判斷負擔一定是最小的，用戶容易去做準確的判斷。同時寬度得限制也是一樣的，給用戶一個寬度的范圍，用戶做判斷會很輕松且準確。

案例2: 格式與情景狀態：

圖2:比如銀行卡的格式，一串數字都是四位進行間隔區分，間隔成四位應用交互設計七大定律中的7土2法則，間隔成四個，容易讓人們記憶，在用戶輸入的時候，可以減少錯誤，減少錯的同時也就是在提升產品的使用效率。同時考慮多情景狀態，比如銀行卡號、手機號碼、包括身份證號的一些輸入設計，這些都是相對比較隱私，容易出現安全隱患的一些信息，這些信息在設計的時候要注意可能出現的問題，因此需要做一個隱藏的處理，比如添加小眼睛icon來隱藏關鍵幾位數字，來減少一些安全隱患問題。

案例3：自動匹配與識別：

圖3:比如當輸入公司地址時，這個地址信息可能是第一次輸入，也可能這個信息在我們的數據庫中已經存在了，當這個信息已經存在的時候，在輸入的過程中，系統應該在數據庫中檢索出已經輸出的信息匹配給用戶，我們就可以在里面直接選擇來進行輸入。這么做的原因就是，當用戶在輸入特別長的信息時候，用戶經常會出錯，從數據庫的方式去做匹配信息，錯誤率會降低，輸入效率會提升。另外是識別，比如在我們在寄快遞的時候，通常會把姓名電話地址，一連串的信息發給快遞員，這時候快遞員會復制粘貼放入聯系人，聯系電話，聯系地址這三個字段，現在的設計方式就是做智能識別匹配，快遞員只要有粘貼的動作，信息就會自動做好分類把一連串數字分別粘貼入不同的字段里，這樣做也是為了提升效率。

案例4：實時預警與提示：

圖4:比如這個多行文本輸入框，一般都會有字數限制，比如不超過150個字，如果不做這樣的限制，我們洋洋灑灑寫了一萬字，但是發不出去只能復制多出的文字然后再粘貼，很可能會誤刪掉內容影響操作體驗，這種文本的上限預警的解決方式是給內容做實時校驗，比如上限是58個字，打到60字的時候，也允許你輸入但是文本中多出的字會標紅進行提示去刪除多出的內容。

案例5：占位符不能替代文字標簽：

圖5:比如輸入手機號碼，占位符也是輸入手機號碼，看似是重復了一遍，但仍然是有價值的，可以變成文本標簽里提不到得信息，比如請輸入一位11位的國內的手機號碼?？梢灾皇褂梦谋緲撕灥姆绞?，也可以使用文本標簽加占位符的方式，但不能只使用占位符的方式。因為只有占位符，可能會讓用戶出錯，影響使用效率。

案例6：使用內聯校驗：

圖6:當輸入錯誤信息的時候使用校驗，左邊的提示錯誤的方式是不對的，在校驗信息的時候最好不要出現在列表的最下部或最頂部或提交的時候，因為它是實時校驗的，最好實時提示出現定位到當前的邊框，當前的字段中的下邊，來告訴我們是當前字段出現了錯誤，這樣精確定位錯誤點，才能提升效率，同時也為設計節省了空間。

案例7：減少字段量：

圖7：左邊信息包含了姓名，生日，密碼但包含了8個字段量，我們可以把字段量減少，比如姓名組合成一個字段，生日組合成一個字段，密碼和重復密碼也可以組合成一個字段，重復密碼的作用其實就是怕輸入錯誤來加強記憶，但是另一種方法是在輸入密碼的時候讓我們看到輸入密碼就可以做到不出錯并且加強記憶，那么就可以用添加小眼睛來做替代，進而也可以組合成一個字段。這個前提是不是銀行類那樣由業務決定強制去重復，其他系統完全不用進行重復密碼輸入操作。所以減少字段量，可以消除視覺和認知負擔，這樣看起來更簡單。

1.2.2  選擇類組件

選擇類組件可以分為，多選、單選、時間日期、下拉選擇、Tabs標簽和地理位置組件，常用的是下拉選擇，重點介紹一下下拉選擇組件。

下拉選擇組件有幾個注意點：

01.避免使用默認值：比如國家和地區，往往默認值都是安哥拉，字母A開頭，如果用默認值，再B端系統里很多用戶會忘記修改默認值，就提交上去，所以我們需要去把這個默認值變成空值提示信息：請選擇國家和地區，在沒有選擇之前，這條信息是空值，點之后再去選擇國家和地區。

02.采用輸出檢索：如果國家和地區很多，下拉信息條目很多時候，可以采用輸入類得檢索來設計，比如輸入中國，就會出現中國大陸，中國香港，中國臺灣之類的字段。

03.默認值得表述要盡量準確：用詞文案需要簡潔，即使沒有文本標簽也能夠清晰表達，比如就需要寫明請選擇國家和地區。

04.對新增加得字段要提供注釋：比如系統前后先增加的一些字段或者有爭議的字段要提供注釋，身份編碼和身份證號碼有歧義，就需要給一個注釋，交互上鼠標移入幫助點icon就會顯示注釋，同時注意視覺上要弱化它，小圖標盡量用面性圖標會更能表達清晰。

1.2.3  導航類組件

選擇類組件可以分為，導航菜單、面包屑、分頁，其中分頁里的設計注意點容易忽略，接下來重點梳理介紹分頁組件。

分頁作用：減輕服務器的負載，有成千上萬的負載，不分頁的話，會造成巨大的下載量，相應的用戶等待時間更長。同時內網也同樣，如果有四五百人同時做一樣的事情，服務器負載能力很弱，一定要做成分頁，分頁每次loading10個20個，每次翻到5六頁的時頁的時候加載一下，其實形成了是預加載，不只加載十條數據，其實加載了五六頁的數據，只是呈現了一頁的數據，到了第五頁慢了的原因是，需要重新加載一次數據。稱之為惰性加載，懶加載。B端一般會減少加載的存在，預加載是看不到loading的，第一頁加載1到5頁，第二頁加載5-10頁等等，點快的話是可以看到的，所以用預加載的方式加快速度，減少服務器的負載。前端工程師可以用組件庫翻頁可以直接loading出來。

翻頁操作：一般很難看到數據庫數據的總量，一般不會看到三位數的頁碼，一般來講會讓數據翻到前20頁、10頁之內，就讓用戶找到這個數據，不會讓用戶不斷的往后翻，對負載時比較大的。

1.2.4 提交類組件

選擇類組件主要介紹按鈕的設計注意事項。按鈕常見的狀態有三種，通常狀態、懸停/點擊、禁用。其中B端組件庫里按鈕常見的類型有：

次要按鈕：一般用白色或者淺色，頁面中次要按鈕多一點，比如一個頁面一個次要按鈕都沒有就是錯的，比如查詢和重置一個是主要按鈕，一個是次要按鈕。

主要按鈕：一般用主色調的顏色，用在完成、推薦、提交的操作，顯示會比較明顯。

文字按鈕：沒有背景的按鈕，弱化的按鈕。

帶圖標按鈕：帶有補充含義，比如搜索按鈕加個搜索圖標。

圖標按鈕：純圖標按鈕，只有前進后退用的多，其他用的少。用圖標按鈕節省它的空間。比如上一頁、下一頁可以用圖標很明白的代表它的含義。

虛線按鈕：上傳之類的，添加內容之類的。

當了解了按鈕的類型，那么如何確定按鈕的擺放順序呢？這取決于平時用戶對電腦操作的習慣，同時結合業務邏輯的關系，來排列展示按鈕順序。

1.3 表單綜合案例解析

1.3.1  表單綜合案例一：修改表單的三個原則

01、視覺簡單點：

B端系統不用視覺做特別多的修飾，不像C端，在買商品時看不到商品看到的卻是滿屏的banner，在B端中表單不用設計的那么花里胡哨，Antdesign提供了很多組件示范，我們應該了解Antdesign為什么這么設計，比如輸入框為什么采用上下布局不采用左右布局的輸入框呢？因為容器上下布局是視覺動線最快的輸入布局方式；為什么使用框類不使用線性的呢？因為框類在B端系統中是最快分辨它的輸入域輸入區的地方，只要知道這些視覺的原理，就知道怎么合理的使用組件了。

02、文字簡單點：

文字描述的簡單點，第一種方式是通過左側的文字標簽來做；第二種方式是通過占位符標簽來做，國外的一些文章強調，不要用占位符提示做任何事情，因為占位符特別影響視覺動線，但國內已經習慣了占位符來表示。

03、字段簡單點：

1. 減少字段的方式，首先要知道這些字段的目標是什么（字段的方式去做減法）

例如下圖這個電商類產品，目的是讓用戶可以收到商品，那么刪減以上哪些字段不受影響也可以將商品準確的送到用戶手里呢? 這個需要我們通過和產品經一起商量，在滿足功能需要的同時，其實以上字段可以至少優化50%字段。首先姓名：姓氏和名字可以合二為一，直接輸入一個字段就可以。郵箱：輸入郵箱可能是為了得到賬單，現在手機里就可以得到賬單，所以郵箱基本用不到。電話：電話很關鍵，不能刪掉。家庭地址：我們在做電商時，我們通常會把郵件郵寄到家庭，大部分情況家庭為第一地址，第二地址公司地址也有這種情況，但沒必要從這里輸入，可以從一些內容帶出來，所以公司地址不用當前填寫，可以把它刪除掉。省份、城市、郵編：這三部分完全可以在輸入地址的時候從地址帶出來，沒必要再輸入一遍。特別是郵編，目前在我國發快遞時郵編已經基本用不到了，我國大數據已經做了到了不用郵編來分辨地址，數據量已經足夠大了，只填手機號和地址就可以。優惠券碼、信用卡號、安全碼：這三個不能刪掉。密碼、重復密碼：重復密碼是為了輸入密碼時加強記憶，可以采用小眼睛來替代重復密碼。所以我們可以看到在減少了50%的字段后并不影響用戶收到商品，那這個改動就是成功的。這個就是我們設計師應該做的事情，當然在刪減之前，應該和產品經理商有理有據的去溝通是否按這種方式去這樣設計。

2. 把相關的字段進行可視化分組（表單的方式去做分步）

刪減完字段后，最終得到七個有用的字段，將這些數據進行分組優化，也就是歸類整理，我們常用的排版方式是卡片化設計，卡片化設計是一個特別好的信息分類的設計方式，即時不用添加基本信息，優惠信息，支付信息之類的名稱在卡片之上，通過卡片的方式，從上到下布局，用戶可以看的更加的準確。

除了對它信息進行分類，我們也可以對它的過程進行分類。比如左邊這個頁面，雖然是從上到下，但感覺輸入的信息太多了，我們可以對這個過程分步優化，分布后把它列成基本信息和支付信息兩個層級，基本信息包括姓名、電話、地址和優惠碼，其中優惠碼為選填，當頁面里所有信息都需要必填的時候，有部分選填得信息標注選填就可以，當所有都需要選填的時候，有一個必填，那需要標注必填就可以，具體標注方法，這里使用的是占位符標注方法，還有星號的標注方法，用星號標注是已經用戶形成認知習慣，但看視覺哪個好看就用哪個，比如在蘋果的設計中就很少用星號來設計，是為了擔心影響用戶的視覺，同時星號一般放在前面，并且不一定非得用到紅色。支付信息就包括必須要用到的信用卡號、安全碼和密碼。類似這樣將過程進行分步優化也能用戶對表單的填寫，加快用戶的錄入速度，更快的在體驗上去得到提升。

3. 使用邏輯順序

還以這個案例來看，我們分成三個邏輯順序，個人信息相關、商品相關、支付相關。在B端中需求和場景是環環相扣的，我們需要場景化的解決方案。這個場景化的解決方案和這個表單的關聯，對應的就是用戶完整的購買流程，這個表單的三個場景，第一個場景是收貨信息，第二場景是優惠的信息，買商品有什么優惠，第三個場景是支付場景，這個流程完成支付就完成了購買，所以樣的順序就是一個正確的邏輯順序，通過先確定流程再確定字段展示順序。

1.3.1  表單綜合案例二：表單設計具體流程

第一步：做信息分類。當我們了解這個產品，熟悉這個業務的時候，可以根據信息的含義，把這些雜亂無章的字段分成幾個部分，可以和產品和開發進行討論也可以加深對業務的理解。由于B端信息的維度特別多，具體的信息分類方法可以借用五帽架信息分類法 。可以根據可根據類別進行分類：即根據信息的相關性來進行分類。也可以根據時間進行分類，比如時間正序，距離時間最近的來進行分類。同樣可根據地理位置的遠近，字母的排序和認知規律從大到小從胖到矮的連貫性來分類。一旦分類好后，用戶在填寫的時候也不會覺得奇怪，填寫的邏輯性和順序感也會體現出來。

第二步：做排序分類（按業務邏輯順序）。當得到了信息的分類，比如一個汽車CRM系統，基本信息、車輛信息和故障信息，它具體要解決什么樣的問題，這三部分誰應該放在第一位，誰應該放在第二位，第三位，可以根據prd需求文檔來了解做這個功能具體要解決什么樣的目標，具體是什么過程在prd里應該說的非常詳細明確，這個過程就是它的業務邏輯，所以我們可以通過prd中的描述來得出業務邏輯。

第三步：明確字段類型。當得到了信息分類，得到了信息邏輯順序之后，接下來需要明確字段類型。比如100個或200個字符，單行文本輸入是可以支持的，超過255個字符，我們就需要多行文本輸入框來解決這個問題。

第四步：明確產品的原型。可以自己搭原型，和產品進行討論，也可以直接和產品要原型，最終目的是這個原型一定要確定下來。

第五步：確定界面設計框架。確定柵格化設計框架，選擇多大的設計尺寸，進行頁面柵格化設計。

第六步：對應組件設計。根據原型去對應我們的組件，是用下拉框組件還是文本輸入框組件，去找對應組件設計。這樣我們得到了字段、原型、框架和對應的組件化，下一步就要做視覺的方案設計。

第七步：視覺設計方案。根據表單的內容來決定視覺設計方案，如果它的內容信息量比較多，比如它的數據量很多，字段很多時，用彈窗就不太合適，彈窗屬于字段量不是特別多，和后面主要彈出得頁面是有關系的，需要重開一個新的單頁面，單頁面是大容量，分類單頁面屬于更多內容容量。第二可以根據數據層級的操作關系來決定，如果從一個頁面中打開了另外的一條數據進行修改，比如從表格中打開表格中的一個詳情來進行修改，就需要彈窗來設計，這也取決于彈窗內容的多少，如果彈窗內容確實很多，彈窗就要大一點甚至使用全屏彈窗。

通過下圖可以看出，表格通常由標題、工具欄（對整體批量的操作）、表格頭、表格行、分頁區、批量操作區、表格列、單行操作區（是對單行數據的操作）、數據呈現表格區、數據查詢表單區組成。

以下內容是表格的規范和注意點，其實我們在設計的時候，很少自己去畫一個表格，一般都是從組件庫里選一個表格，然后分離組件去進行再次的自動布局得到新的表格。

2.1 表格頭

表格頭要做到簡練準確，不受內容影響。表格頭中的文字和正文字一樣也可以，加粗也可以，但一般都會做一個顏色來做區分。

2.2 操作區域統一劃分

圖2表格頭工具欄包括條件過濾，右上是表格內容工具，如自定義列，全屏等。

2.3 表格間隔

表格間隔可以讓表格的內容看起來更加的可視化，也叫內容降噪，可以分成線與間隔色兩種方式，通常交互hover狀態下，間隔色變成更深得顏色也可以。

2.4 內容降噪

操作區域色彩元素應盡量簡單，原則上不超過3個。

2.5 表格行高

表格需要一個頁面呈現出10條，其次需要單元格高度=文字行高+上間距+下間距，其中上下間距為8的相關數即可。

2.6 單元列空間

表格首先應保持100%把所有字段顯示全，字段多的情況可以橫滾列寬可調節，但是需要保證間隔不變，類似于柵格的溝槽原理。如果內容顯示不下可以做橫滾，如果內容顯示的下，還想要保證整個表格有設計感呼吸感，需要保證n為左右的間距，可以是8或者8的倍數，每個列之間的間距要做成2n，這樣它們之間的間距就會有那種層疊得呼吸感就會比較好看，有規則性。

3.1 認識圖表

在做數據圖表時我們設計師需要關注的是，我們的數據需要用什么圖表來做，而不是主要關注圖表長什么樣，或者說圖表有多好看，我們應該關注的是這些B端的數據怎么用正確的圖表去表達。數據圖表也不是千篇一律數據大屏那種感覺，雖然數據大屏是信息圖表主要應用的一個方面，但在B端系統的信息圖表中，主要是將一些表單的數據轉化成圖形的方式來進行顯示，這點和數據大屏其實并沒有什么關系，所以B端系統中主要以數據為主，而信息圖表作為輔助，這是一個需要了解的前提。

但從視覺提升角度去考慮，數據圖表在B端中是最容易表達視覺的，我們之前兩篇提到的表單設計占了B端設計80%的工作量，就會發現這80%的工作量幾乎沒有表達出特別好有沖擊力的視覺，因為表單只是一些數據和文字的排版，并且還有規范的限制，在統攬整個B端作品中，容易突出視覺設計感的一定是數據表圖設計。還有一個大家比較關心的問題，這些圖表前端工程師能不能實現，是可以的，前端在實現圖表都會用一些常規性的圖表的組件，這些組件通常都是已經代碼化的組件，一些圖表公司做好了的可以復用的，有前端代碼也有后端數據調用的接口，它只要對應這些接口寫一些代碼就可以實現了。作為設計師在設計圖表的時候，還有一些地方需要我們去設定，接下來就和大家一起梳理怎么正確的表達數據圖表，我們一起來進入數據圖表的知識體系吧。

3.2 常見圖表類型

常用的數據圖表可以分成趨勢類、比較類、占比類、分布類四種類別 。

趨勢類圖表：代表了數據增長的趨勢，它可以對比出數據增長的一個趨勢。主要有面積圖、折線圖、堆積面積圖和漏斗圖。重點了解面積圖、折線圖、漏斗圖。

比較類：比較類圖表是B端系統中用的最多的圖表，有柱狀圖、條狀圖、玉玨圖、堆疊柱狀圖、堆疊面積圖、雷達圖等，常用的我們重點介紹，柱狀圖、條狀圖。

占比類：和比較類圖表有些重疊的地方，有餅形圖、環形圖、堆疊面積圖、儀表圖、矩形樹圖、堆疊柱狀圖、條狀圖、百分比堆疊柱狀圖，重點了解餅形圖和儀表圖。

分布類：有箱形圖、直方圖、熱力區圖、地圖、氣泡圖、散點圖、色塊兒圖、等高線圖，重點了解地圖和氣泡圖。

面積圖：可以理解成填充之后得折線圖，不同于折線圖是，因為填充可以更好地反映出信息得趨勢，用戶可以根據面積得多少，反映出數量得多少，還代表連貫得數量級，信息數量級是一直存在的，不會消失。

折線圖：折線用的最多，是條線代表趨勢得變化。折線和柱形再某些層面是一樣的，在一定的點表現它得趨勢變化，每個月，每天，每個小時。通常用在公司得年銷售額，價格得趨勢，用戶量得增長，折現一般不超過5條。Y軸為數量，X軸為時間。

漏斗圖：屬于面積圖，適合排名，銷售業績，再CRM中用的最多，通過銷售線索最終達成成交量，它不斷通過漏斗得方式最終達成成交，每一個漏斗代表一個環節，有一個顧客進入商店，進入商店購買商品，留下信息，訂購，整個流程走的就是用戶旅程得過程。越往后越精準。

柱狀圖：柱狀圖是面，代表面積，更直觀得是包含數據，這些數據能更能直觀體現它得擁有量是多少，一般用在銷售額，產品類別，分類數據得比較，如果可以看到最高和最低得差量。

條狀圖：類別在Y軸上，X軸地表數據，Y軸上能更多顯示數據，它可以顯示負數。

餅形圖：餅形圖表示人口，人女比例；預算得分配；在線流量得來源等等，反應得是多與少之間的對比。他們是在同一維度下的比較，比如當年得，已經再設定好時間段得顯示情況。

地圖：分布點，流量，數據量，用地圖不要隨隨便便搜一張用到界面里，地圖要到國家地理官方網站用，否則有問題，設計背鍋。

4.1  認識儀表盤

用于B端首頁的系統狀態的展示，一般包含系統的關鍵數據信息和信息列表，一般會有各種數據圖表展示。為用戶提供全局概覽，讓用戶快速掌握工作進展及進入工作狀態，并且可以訪問最重要的數據，功能和控件。

4.2 儀表盤界面分類

分析類：分析類儀表盤給了我們很多分析類的信息，這些信息包括銷售額、訂單量、包括銷售額的趨勢圖、排行榜等，目的是可以在B端系統中看到目前收集到的這些數據，讓我們來進行分析。雖然計算機會給我們一定的結果，但更重要的是我們需要根據這些數據得出什么樣的結論。

監控類：比如股票的變化趨勢很快，需要實時監控到這些數據的變化。

控制類：比如阿里云系統中有很多的控制臺/儀表盤，里面有很多的入口，有常見的快速入口，和推薦信息的一些入口，這就是控制類，通過用儀表盤來得到控制。

綜合類：綜合類系統是我們B端系統中見到最多的，比如CRM和ERP基本上是綜合類的，因為他要顯示數據的統計，也要顯示一些快捷的入口。

4.3 儀表盤的設計過程

首先儀表盤要有功能，讓用戶看到數據，讓看到數據我們需要做以下事情：

第一步：分析用戶的權限：儀表盤在B端很重要的一點是我們要分析用戶的權限，因為不同的人看到儀表盤數據緯度的信息是不一樣的。權限比較高的比如有管理員/普通管理員/操作員，超級管理員等等，所以要根據不同的權限展開不同的信息。

第二步：分析業務的場景：比如銷售人員看到內容的都是和銷售有關的內容，權限是第一次篩選，把什么樣的信息展示給他，然后經過第二次篩選，第二次篩選包括是由產品經理，BA這樣的角色幫我們來篩選這樣的信息，不是完全由設計師來決定，這兩步過程是不可忽略的。

第三步：確定儀表盤展示的內容：到底展示什么內容，剛開始沒有那么清晰，可能就是思維導圖或者幾行字，根據這些來進行視覺展示。

第四步：視覺設計：根據展示內容進行視覺設計。首先基本構思和畫原型圖；其次確定字體，顏色，樣式和圖形設計。其中需要注意的是，視覺整體要有統一的標準規范去表達，同時空間留白要合理，靈活的運用柵格化，界面要有呼吸感。最后信息傳達要準確，比如圖形和色彩，每一種顏色都有特殊的含義，不要應用錯誤，比如紅色要特別小心的應用。

一、前言

場景化設計一詞第一次看到還是在前年設計分享大會上，當時懵懵懂懂的我第一次看到這么刁鉆的角度，甚是驚訝，后來我也是在不斷的研究這個內容，上一篇文章《【干貨】設計師的發力點》中，也稍微的提了一些關于場景化設計的內容。

本文章的出發點是因為我在學習的過程中，但很難找到全面分析的文章，因此我打算寫一篇更加深入的分析,一方面是對自己學習的總結，另一方面是分享給大家我的心得。

接下來會通過三個維度深入研究場景化體驗設計，幫助您快速提升場景設計思維，中間也會并通過大量案例，帶你真實感受場景化設計思維在產品設計中的實際運用。

二、場景與體驗

我們看到各種形形色色的產品功能，但不能單一的去看待問題，也無法直接的去評判這個功能是否合理，所有的設計都是圍繞著某種指定的場景下去完成它的使命，拋開場景談設計，就是耍流氓。例如疫情期間的健康碼，這也是為了響應防控疫情的號召，需要對每個人的行程路徑進行把控，而這種產品就是為了滿足某種場景下的需求設計。

而在面對產品設計有具體場景的情況下，可以根據場景分析用戶的需求，進一步制定設計目標，通過合理的設計方法，提升用戶的產品體驗。

三、 遇到的問題

在早期的互聯網產品設計中，大多數體驗優化的設計流程只是對需求進行單一的分析，并且相同的內容采用同一解決方案，整個設計看似基本沒有問題，但隨著互聯網的高速發展與完善，用戶群體越來越多，產品功能越來越復雜等一系列的因素，導致出現了一些問題。

2.1   產品復雜化

隨著產品功能的完善，功能復雜化，單一的解決方案無法滿足多種場景下的使用，需要合理規劃，根據不同的場景進行體驗設計，才能更好的發揮價值。

2.2   同質化嚴重

大多數流程可以滿足各種不同分類的產品使用，例如傳統的購物流程從詳情頁出發到訂單頁流程，雖然能滿足所有的支付流程，但是缺乏行業設計特性，長期以來也會缺乏競爭力。

2.3   場景體驗欠佳

一套設計解決方案、交互流程滿足所有的使用情況，雖然在產品中實現了一致性，但面臨復雜的場景很難滿足，并且用戶群體越來越復雜的情況下，每個用戶的訴求也會存在偏差，因此我們需要根據不同的場景，制定不同的方案。

四、場景精細化設計

為了更好的理解場景化設計，我們可以通過哲學上著名的三大問題，“你是誰？”“你從哪里來？”“你要到哪里去？”，例如唐僧從東土大唐而來，要到西天取經，從中我們可以發現三個關鍵的內容，就是人、地、事，這也是場景化設計中必不可少的三個內容。

在互聯網產品設計過程中，為了進一步強化體驗，我們可以從場景化設計中三個關鍵內容，人、地、事，這三個角度進行更加深入的精細化設計，區分不同的場景采用不同的設計方法，從而滿足更多特點場景下的需求。

五、用戶分層設計

場景化設計中，用戶是最關鍵的內容之一，正所謂以用戶為中心的設計思維能更好的服務用戶。當用戶量越來越龐大后，可以對用戶進行分層處理，這也是用戶運營中常見的一個概念，簡單理解就是指將用戶分為不同類型。

用戶分層是根據不同用戶的行為特征劃分成不同的用戶群，進而制定不同的產品策略來滿足其差異化需求，從而充分發揮每個層級用戶的價值，達成產品目標，通過用戶分層的思維方式結合場景化設計，可以更好的滿足不同類型的用戶訴求，還能根據不同用戶的類型提供差異化的內容和服務。

用戶分層的方式是通過標簽的形式快速給用戶進行分層，在實際的運用中，主要分為基礎屬性和行為屬性。

5.1  基礎屬性

基礎屬性包含用戶的年齡、性別、身高等，這種用戶分類的方式，是最直觀簡單的。

5.1.1 年齡

大多數產品中會通過年齡來進行用戶分層，這種形式可以快速區分用戶的基本屬性，因為用戶的年齡狀態對待事物也會存在很大的差異。

例如支付寶的電子社?？ǚ眨鶕脩舨煌哪挲g階段，展示不同的領卡信息，進一步讓用戶更快的獲取到符合不同年齡段所關注的合適信息，可以直接提升開卡率。

5.1.2 老齡化設計

隨著我國即將進入中度老齡化社會，也正是因為老年人的生理和認知障礙的限制，他們使用APP的體驗并不是很順暢，所以大多數互聯網產品逐漸向中老年群體滲透，更多的關注起老齡化設計。

在適老化設計中，在不影響老年用戶對功能使用的情況下，一般都會采用通過設計降噪的方式，去除所有復雜的次要信息，保留核心內容，并且通過放大來強化關鍵信息，文案的處理上也會進行內容簡化處理，減少老年人的閱讀成本。

適老化設計除了視覺上放大和簡潔的感知體驗外，在交互體驗上也會有很多人性化的設計，例如在容器內容上加入行為按鈕并描述去向，幫助老年人順利完成目標行為。

甚至在部分產品中，會強化聽覺上的功能體驗，例如語音播報、語音提問、電話叫車等功能，既能通過語音的形式彌補老年人視覺能力上的不足，還能減少操作成本。

5.1.3無障礙設計

隨著互聯網的發展，用戶群體逐漸龐大，其中也有部分身體有局限的用戶，對于他們來說更加迫切通過互聯網獲取信息，因此越來越多大公司注重到這一方向，而這也是我們作為一名設計師，更應該去優化的方向。

可以采用無障礙色系，以及顏色的色差處理，針對性的服務于色盲和色弱群體，使得他們可以在信息閱讀上更符合他們的習慣，從而進一步打造更人性化的產品體驗。

5.1.4 用戶身份

而關于用戶分層的場景設計中，我們還可以區分用戶不同的狀態、身份來對界面進行差異化布局，最典型的代表就是用戶的會員身份。

會員它分為很多不同的階段，從開通到到期，用戶在不同階段對于內容的關注上也存在很大的差異的，例如未開通展示更多的價格、權益信息，吸引消費決策。我們可以從這個角度出發，區分用戶的會員狀態，進一步來進行差異化設計。從而有效的提高不同階段用戶的行為決策。

5.2  行為屬性

每一個用戶在產品體驗過程中，都會有著各式各樣的行為操作，例如瀏覽記錄、關注、喜好等，我們也可以通過這種方式來進行分類，可以更加直接的聚焦到關鍵信息上，既可給予用戶驚喜感，也可以達成業務目標。

5.2.1 興趣標簽

標簽和上面描述的基礎信息還是存在一定差異的，標簽相當于是產品根據用戶的行為等去定義的不同類型的標簽，這種方式可以快速給用戶進行分類，常應用于內容型產品以及電商平臺，給用戶貼上各式各樣的標簽，其次再根據他們的具體需求進行個性化的內容設計，可以更快的實現千人千面的智能推送。

不同興趣標簽的用戶對待內容的訴求也會不同，因此在頁面結構設計時，我們需要考慮頁面信息的優先級、瀏覽動線、信息內容的呈現，例如重度用戶和路人用戶的區別，一個注重商品展現的效率，一個注重氛圍和吸引。

除了整體的頁面結構內容外，用戶對內容訴求也不同，例如優惠型的用戶更關注活動和折扣信息，通過用戶標簽進行分層設計，能更快的達到刺激用戶消費的目的。

5.2.2 消費模型 （RFM模型）

• R：最近一次的消費時間（Recency）

• F：一段時間內的消費頻次（Frequency）

• M：一段時間內的消費金額（Monetary）

RFM模型是根據用戶的消費行為、頻率、金額3項指標對用戶的價值狀況進行級別劃分，一共可以分為8種基礎用戶類型，然后再根據用戶的消費金額進行從上往下排序，最后區分不同類型的用戶，進行精細化運營。

這也是很多企業都在使用的模型，價值級別較高的用戶可以調整資源傾斜力度、定制服務，甚至針對普通用戶也可以進行激活消費、挽留措施。

在電商產品中這種方式最為常見，通過模型分類可以快速了解用戶消費情況，一般會區分新老用戶，活躍用戶與沉寂用戶，例如創建新人導購，刺激用戶的首單轉化，而長時間未進行復購的沉寂用戶，也會采取一系列的措施吸引用戶再次消費，提升用戶的復購率。

5.2.3 AIPL模型

• A：認知 - 新客或不了解產品的用戶（Awareness）

• I： 興趣 - 對產品有興趣且關注過的用戶（Interest）

• P：購買 - 刺激用戶產生購買行為（Purchase）

• L：忠誠 - 有過較高復購行為的用戶（Loyalty）

這個模型對應的也是用戶的成長路徑，每個用戶都是從認知開始，才慢慢變成購買或者忠誠，所以需要做的，就是引導用戶不斷往更上一層發展，當然，我們也可以對四種不同類型的用戶同時進行，將這四種類型分發到產品中的各個鏈路中，以下案例來自于淘寶。

通過種草的形式給用戶建立認知，培養用戶興趣，而面臨消費顧慮并遲遲未下單的用戶，可以利用入手分享的方式克服轉化阻礙。而對于購買型和忠誠型用戶，可以通過優惠、活動等方式，刺激下單并建立長期關系。

5.2.4  行為路徑

不同行為表現的用戶所觸發的關鍵行為不同，所以在設計路徑時，要先對用戶有分層，有定義，再針對性的實施，對路徑進行合適的分層布局，確保用戶去完成某件事的各種行為路徑，都能被滿足。

下面的案例從上倒下依次為，想快速申請貸款或者快速完成任務獲取現金的用戶，我們提供了直接操作區域，并且置于頭部進行業務屬性強化，中間融入了更多的分類與內容引導，進一步激發用戶的興趣，最后可以再通過不同的形式適當的減少用戶顧慮，例如優惠券的福利（強化申請貸款），為新用戶提供發帖示例（確保社區的內容品質）。

雖然兩個界面的內容差異較大，但是結構拆分的方式以及行為路徑的規劃都是大同小異的，主要還是為了滿足不同行為的用戶，進一步輔助他們快速完成功能服務。

六、區域化設計

根據不同的地點、位置、空間進行區域化設計，為不同的地域、情景進行差異化設計。在空間設計、園林設計中，我們會常?？吹竭@種設計方式，規劃整個區域，進行合理的場景化設計，而在互聯網產品設計，主要體現在產品的戰略層面，面向不同的區域市場。接下來通過以下三個角度進一步分析。

6.1  下沉市場

下沉市場是前幾年比較流行的概念，是新鮮流量的代名詞，特別是拼多多的崛起，引起了許多行業關注流量的新區域。簡單理解就是產品的戰略市場主要面向于3-6線的城市。

下沉市場的用戶特征：

1、簡單直接，所見即所得；所以在設計的時候應該避免操作路徑過深，展現內容太隱晦。

2、對價格和收益比較敏感，愿意花費時間獲得金錢上的獎勵，例如拼多多其實是個游戲電商。

3、愿意下載一些現金獎勵的產品，通過任務或者閱讀來獲得獎勵，例如趣頭條。

4、熟人社交影響力較大，可以通過微信生態，快速形成裂變。

6.2  全球化設計

隨著本地化市場的成熟，越來越多產品開始面向海外市場，而海外市場與本地相比也會有著很多的差異，例如語言、宗教、審美、文化等等都有著諸多差異，所以這也是無形之中給設計帶來了很多的挑戰。

6.2.1 本土化策略

一個產品無法滿足全球市場的使用，因此全球化設計最好的方法就是本土化策略，深入挖掘當地市場的文化、用戶喜好，地域特色等內容，進一步對產品進行單獨設計，例如大家比較熟悉的Tiktok，與抖音分開運營，更具有針對性。

大部分產品在進行海外市場的運營設計中，都會充分融合當地市場的喜好或元素，進一步發揮當地特色，激發用戶的情感共鳴。

6.2.2 出海規則

由于不同國家的文化差異、行為習慣、認知能力都會存在一定的偏差，因此在產品設計的過程中，我們也有很多規則需要去注意，例如、地區禁忌、語言處理等。接下來我大概列舉幾個我平時記錄的注意事項。

單位規則

度量衡需要滿足不同國家的要求，例如公斤/磅、英尺/厘米、公里/英里，而在一些運動產品中如果要表現卡路里，不建議使用一碗米飯作為單位來描述。

形象禁忌

在一些全球化設計中，如果涉及到插畫以及人物，需要注意一些姿勢和特征，盡可能避免不必要的麻煩。例如人物的手勢、 兩手交叉、十字交叉、使用左手等等，甚至在中東地區女性暴露都要注意避免。

圖形禁忌

圖形的表意也需要契合當地文化特點，一些比較含蓄的內容盡可能避免，例如使用話筒代表娛樂，藥丸代表健康，雖然在國內市場比較常見，但針對于全球化的設計可能就不是很適合了。

而對于這一點每個國家的宗教文化也會有所不同，例如阿拉伯地區，避免使用星星圖標，科威特、埃及、阿拉伯聯合酋長國、阿富汗等因宗教原因禁酒，中東地區禁忌女性圖像，甚至我們經?？吹降膐k都是不好的詞語，在個別國家里有罵人的意思。

除了圖形外，顏色也需要注意，在一些非洲地區盡可能避免顏色鮮艷或者紅色。

語言顯示

在界面設計過程中，設計師常常會關注字符串的顯示寬度，以及換行規則等，而面臨全球化設計時，文字需要適配多種語言，而外語的顯示長度明顯和中文有著很大的區別。為了能更好的進行極限范圍的確定，我一般會選用德語進行排版，因為德語是大部分語言中，長度最長的內容了。

除此之外，我們還應該更加關注阿拉伯地區的語言顯示，他與我們傳統的閱讀方式截然不同，用戶的閱讀順序是從右往左，甚至交互方式也是如此，所以在設計的過程中，需要對阿拉伯地區的界面設計，進行鏡像處理。

鏡像處理

除了文本內容的顯示順序改為從右往左之外，界面中的圖像、圖形、圖標也需要進行鏡像處理，但需要注意的是，含有明確指示性或方向性的圖標需要鏡像，例如返回、查看更多。而像刷新、歷史、鬧鐘等統一標準的圖標不需要鏡像。

6.3  空間設計

聽到空間設計這個詞，我首先聯想到的就是超市，設計師在設計的過程中，會充分考慮人群的動線設計，商品的分布也會大有講究，入口一般是單價較高的電子產品，手扶梯邊和收銀臺都會放一些零碎小單品，既要考慮短頭商品的展示，也要考慮長尾商品的曝光。

6.3.1 線下鏈接

而這一個特征，在互聯網產品設計中，也是可以借鑒的，例如支付寶的電子社?？?，為了能更好的推廣電子服務，設計師將線下社保局進行空間設計，用戶在不同位置所看到的海報均不同，針對用戶不同階段對需求的不同，進行場景差異化設計，可以更好的傳播有價值的信息。

6.3.2 到店體驗

到店服務，即用線上互聯網服務線下業務，其出現是為了解決傳統線下消費固有的問題，為了更好的形成線上和線下的鏈接，我們也可以采用上述的方法，對整個線下店面進行空間設計。

例如店外主要起到引流的效果，可以讓用戶掃碼進入店鋪首頁了解店鋪具體的信息，而在店門口可以讓用戶進行掃碼排隊預約等，當食客就坐后根據桌上的二維碼可以進入到店鋪的下單頁，最后在收銀臺布置掃碼買單，整個流程符合線下體驗，并可以將不同的頁面準確的傳遞給用戶，促進用戶快速完成線下消費。

七、服務差異化設計

場景化設計中第三個關鍵內容就是事，而在互聯網產品設計中，所有的事都是為了能更好的服務用戶，但隨著互聯網成熟，功能越來越豐富化，我們需要更加精細的場景劃分，明確用戶對于整個服務的操作流程，結合前后場景預判用戶目標，通過設計提高用戶效率，給予用戶驚喜與感動。接下來主要通過目的、行業、內容三個角度深入分析。

7.1 交互流程 - 服務目的

如今隨著互聯網不斷發展，用戶的時間被各種產品分割，而面臨著用戶在產品中的所有體驗，做的每一件事情，都是有目的性的，例如打開淘寶的目的是想購物，打開抖音的目的是想放松娛樂，因此只有挖掘出用戶的目的，才能更好利用服務完成用戶行為。

為了讓用戶更好的完成任務，可以將操作流程拆分為三步，從開始到結束，結合前后場景預判用戶目標，提升交互體驗，而關于這個內容，我之前在《交互流程中的三大重點》一文中有詳細講解，感興趣的可以自行查看。

7.1.1  操作前 - 行為目的

像我們常見的一些產品結構布局中，其實有也著簡單的分層布局，我們可以根據用戶不同的行為目的結合頁面板塊的內容呈現來進行結構分層布局。

下面的案例從上到下依次為，目的明確的搜索用戶、分類明確的用戶以及只想隨便看看的用戶，這樣的話，可以有效的服務與不同用戶的目的，也能快速實現流量分發的作用。

7.1.2  操作中 - 操作目的

根據不同的服務以及用戶操作目的，判斷內容的合適性，例如輸入內容時，結合前后場景預判用戶目標，針對不同的內容呈現相對應的鍵盤樣式，通過設計提高用戶效率，滿足用戶的操作目的。

操作減負

面對各式各樣的數據錄入，表單填寫是移動端設計中最復雜的一項操作，在設計過程中可以根據用戶目的進行場景區分。例如下圖的案例，通過自定義的形式為用戶提供了兼容不同層級的聯動鍵盤，整個過程都在鍵盤輸入組件中完成，保證了錄入的沉浸和任務的聚焦。

場景匹配

在操作過程中，可以針對內容呈現對應的鍵盤樣式，例如系統自帶鍵盤的樣式多達8種，我們可以制定各種場景下的使用，從而進行匹配，讓用戶在輸入的過程中更高效。

7.1.3  操作后 - 結果呈現

當體驗流程中用戶操作后，需進行合理的內容反饋，可以通過場景化設計思維，結合用戶目標，呈現合理的內容，提升設計效率。而在結果呈現上，主要可以分為兩個方向，結構與內容。

在內容建設方面，主要通過信息架構來構建用戶體驗，確定各個將要呈現給用戶的元素的模式和順序，例如淘寶搜索結果頁，采用了兩種不同的局部方式，根據搜索內容來進行區分，例如電器類的產品外觀大差不差，因此結構上采用小圖模式，主要突出產品信息和賣點，而服裝類的商品則采用瀑布流的形式，強化圖片的視覺表現。

內容主要是借助價值去找用戶，找到用戶建立鏈接，從而產生價值，簡單理解互聯網產品就是一個鏈接工具，但為了能更好的讓內容和用戶進行鏈接，我們可以將內容進行前置處理，根據服務目的結合內容的呈現，快速建立業務鏈接。

下圖案例來自于百度搜索，用戶在搜索時，不同的關鍵詞呈現對應的服務內容，合理運用場景化設計中的服務差異化設計，為不同的事進行設計，既能快速匹配相應的用戶，還能縮短用戶尋找服務的操作路徑。

7.2  框架層 - 行業細分

隨著互聯網成熟，產品業務形態逐漸完善化，例如餐飲產品，里面會涉及到多種餐飲業態，例如早餐、茶飲、快餐、燒烤等等，而所有銷售類的內容都會涉及到人、貨、場。人在上面也大致講過了，這里就不繼續贅述，而面臨這種行業較多的情況時，我們可以采用場景化設計思維中的分層思維，將行業進行細分，進一步讓貨物可以對應到符合的場景中。

接下來也會繼續使用餐飲產品作為例子，進一步講解行業細分后的設計細節。

7.2.1 行業特征

餐飲業態較為復雜，但行業之間的差異還是比較明顯的，可以將行業特色進行提煉，針對不同的特點進行框架設計。

例如年輕群體較多的甜品茶飲，功能上除了基礎點餐也有外賣服務，甚至也會有周邊商城，這種類型的商戶比較注重服務的呈現。但一些傳統的餐飲行業，由于菜品體量較大，頁面呈現上可以更偏向于菜品展示。除此之外，還有很多餐飲商戶比較注重用戶身份以及會員管理，而框架設計上也可以將資產內容前置化，滿足商業目的。

7.2.2 導航設計

產品框架中最關鍵的一個內容自然離不開導航設計，它是專門用于呈現信息的一種界面形式，用戶可以在內容結構中自由穿行。在頁面設計的過程中，也可以通過不同的導航形式滿足需求，例如在在菜品的展現形式上，菜品體量較大的快餐便當，可以采用側導航形式快速進行內容篩選，而甜品茶飲類的菜品較少，可以利用雙行瀑布流的形式強化商品圖片的呈現效果。

7.2.3 菜品布局

框架層的關注點幾乎全部在組件及相互關系上?？蚣艽_定用什么樣的功能和形式來實現。作為餐飲類的產品，菜品呈現屬于比較關鍵的內容，而面臨不同類型的菜品，也能做出場景差異化的表現，這一點比較像上面案例中提到的搜索后的商品結構呈現。

在上面行業特征分析時，會發現如果從餐飲菜品數量上進行區分的話，布局上可以使用單行列表或雙行瀑布流的形式，來區分菜品分發的權重。而像一些套餐的菜品，布局上可以將菜品組合擺放，方便用戶對套餐內的單品進行對比與調整。

7.2.4 分層營銷

在營銷設計中，可以通過各種營銷資源位進行宣傳展示，為了讓營銷滿足不同商戶的使用，可以利用場景分層的形式，將營銷表現力分為強、中、弱，三種形式，并根據不同的頁面框架布局去進行表現。

7.3  內容形式

內容型產品比較注重用戶消費與互動，平臺也會對內容、流量、用戶進行分析，確保合理的消費場景。隨著產品逐漸豐富化，內容分為多種形式，例如視頻、音頻、直播、資訊，而內容形式也分為娛樂型、工具型、知識型和社交型，為了能更好的匹配消費場景，可以將內容形式進行分層處理，區分不同的事物，采用合適框架形式，滿足用戶的消費場景。

下圖案例來自于淘寶內容優化設計方案，通過場景細分，主要分為三個場景，一是以瀏覽圖片視頻為主的富媒體消費場景；二是社交關系為主的消費場景；三是以文字消費為主的閱讀場景。三種場景的每一種都對應了多個內容框架以及框架之間的流轉鏈路，按下圖從上往下逐漸從重分發到強沉浸的瀏覽體感。

富媒體消費場景內容的復雜度和數量較大，一般常見的方式是采用分發為主的雙列流，滿足多種類型的內容合理展示，如果以圖片為主要消費內容的情況下，可以采用大卡流，突出圖片的展現。甚至也可以利用全屏的形式，強化用戶的沉浸體驗，這種方式更適合視頻內容。

以社交關系為主的內容，可以采用傳統的動態流布局，更適合用戶的習慣，同時也可以滿足多種信息的呈現。文字閱讀為主的內容，更加注重信息的閱讀，可以使用文本流的形式，通過簡單的對比和結構層級簡化處理來幫助用戶閱讀信息。

為了讓用戶更好的消費內容，整個優化項目的過程，首先通過用戶消費內容的梳理，然后結合內容的特點進行核心框架的鏈路整理、提取抽象化的共性框架，讓各個具有相似性的場景進行拉通，最終確認框架形式。

八、總結

場景化分析可以讓設計師以用戶的角度解決用戶痛點，發現問題解決問題，從而更好地服務于用戶，不管面臨多復雜的產品，都可以通過場景化設計方法，將關鍵的三大內容進行提煉，進一步分析，確保每個內容點都符合具體的場景。

文章來源：站酷   作者：三石設計丶 

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

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

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

做一個完整B端系統項目前，從交互設計的七大定律，B端產品業務調研，用戶訪談研究方法，精準推導B端用戶畫像，到B端產品主風格的設計定調，深度理解B端主流組件庫的視覺規范，進而為B端產品設計做充分的準備工作，以下內容較多，大家可以根據上述目錄來進行選擇性閱讀。

1.1 B端組件庫的概念及作用

概念：組件庫的底層邏輯就是原子理論，類似于我們在拼樂高積木的時候，根據說明書一個模塊一個模塊來拼湊，先找零件，再拼成部件，然后是成品，這個過程和UI中的組件化是一模一樣的，組件化就是原子理論集中得表現，原子（圖標、按鈕、字體樣式等）——分子（標簽欄、導航欄、搜索框等）——有機體（圖文列表、內容卡片、布局模塊、瀑布流圖等）——模板（原子、分子組合排列組成了模板，也就是原型圖）——界面（最后根據原型圖形成視覺設計稿）

作用：一致性：比如在不同得界面中，如果用樣的按鈕，他的按鈕的展現形式，要保持一致性。

高效性：比如所有的按鈕不用單獨去設計了，從組件庫里調用就可以，這樣對于設計師來說就是高效的。對用戶來說，也會讓用戶的使用效率提升，比如當用戶看到藍色的按鈕就是可以提交的按鈕，看到白色得按鈕就是次要得按鈕，看到不帶邊框的按鈕就是一個危險按鈕等等。

組合性：通過調用不同的組件來進行組合可以形成不同的頁面。

1.2 如何正確使用組件庫

1.2.1 組件庫的使用前提

一些主流的組件庫，比如AntDesign、Element Design、ZanDesign組件庫等，這些框架機構本質都差不太多， 但他們有自己的特點，具體用哪個組件庫，通常由公司的架構師來進行架構選型，比如VUE（Element Design）和REACT（Ant Design），這是兩種不同的技術選型，（VUE和REACT是一種前端框架的技術架構版本，可幫助前端工程師快速進行開發的前端框架）。從技術角度講，大部分公司會首選AntDesign（React），因為有很多案例提供，VUE和有贊也可以但用的少。從設計角度，Ant Design得設計組件形式案例很完善。Element Design做起來視覺單一得樣式白白得感覺，沒有設計層次化，Ant Design更好看一點。所以先選擇底層的前端框架，再根據這個選擇前端的機構布局。

1.2.2 組件庫的使用過程

設計師和前端最終目標是一樣的，都是快完成保證設計質量的，原生組件不能達到要求的時候，設計師可以根據原生組件庫修改樣式來表達到自己的想法。但對前端來說最好什么都別改，就用原生組件庫前端工程師直接復制就行，這也是因為我們設計師的要求和前端的要求是不一樣的。但修改后樣式的組件，底層邏輯還是原來的組件。從Antdesign等組件庫里復制出來，經過figma里的各種功能操作后，比如分離組件、改變組件得形狀、替換內容等，但這個組件仍然是Antdesign里的組件，組件是否改變取決于，這個圖形，這個組件是不是已經代碼化，我們設計師設計的組件，只是樣式，需要經過前端來形成代碼，只有代碼化的組件，才是組件，如果沒有代碼化，那只是一個樣式而已。所以，我們用Antdesign里是已經實現代碼化了得組件，組件庫里有的組件前端一定是可以代碼實現的。

1.3 如何設計組件庫

1.3.1 每個項目都會分這四個周期

項目初期：在一個B端項目得初期，大家都會有疑問，B端組件庫應該什么時候開始建立？是不是先建組件庫再開始設計？答案是，如果不是從0開始的項目，組件庫在設計之初就應該建立起來，如果項目是從0開始，由于沒有業務的案例，組件庫組件庫也無法建立，但可以建立一些最小元素：原子。比如字體（應該用什么樣的字體，在正標題，副標題，大標題，正常情況下應該怎么樣使用字體的得明度）、色彩（色彩規范是什么，比如醫療行業，航空行業，交通行業應該用什么色彩，決定主色不是好不好看，而是由企業來決定得，首先了解企業的VI色，通過結合VI色和產品分析出的用戶畫像特征，來確定主色，輔主色，確定主色后，相應的背景色、深色背景、淺色背景、灰度背景、卡片背景等，也就都可以做出來了）、按鈕（通常狀態，點擊狀態，當前焦點狀態，不可點狀態）、基本控件、布局柵格、圖表（圖標icon、文本標簽、按鈕、圖表）、圖標；通過建立原子組件，完成一些基本典型的頁面設計。

項目中期：繼續完善基本組件庫，應用案例的完善，迭代組件庫、樣例庫、最佳實踐案例。然后再次迭代進入基本組件庫。

項目后期：形成最終組件庫與設計系統的規范建立，根據項目不一樣詳細程度也可以不一樣。

延展期：為項目2.0升級準備根據使用反饋、迭代之前得組件庫與規范，預計未來版本中出現的典型案例，并針對性的設計應用組件。通常很少有公司進行到這一步。

1.3.2 組件庫的開發流程

1.3.3 B端組件庫存在的價值

B端組件庫的存在是不是意味著不需要設計師了？其實并不是，組件庫可以幫助設計師增進設計效率和溝通效率，和前端溝通告知按照對應的選型組件庫規范使用就可以了，同時組件庫得一致性、準確性、協同性它的質量有保證。但設計師做完組件庫后，繼續需要關注的點是：

01、根據業務場景來優化設計組件庫：因為組件庫是一定會去更新的，如有必要再去更新，那一定會是很復雜得業務場景下去做更新的，這個業務場景是程序員或者以前的組件不能實現的，需要很強的設計技能去做迭代，所以需要設計師繼續去做一些結合業務場景的組件來放到組件庫里。

02、需要設計師把更多時間精力投入更多設計體驗中，而非搬磚：組件庫的建立同時解放了設計師的精力，設計師可以把時間投入到設計體驗中去，而不是做一些搬磚得工作，比如按鈕怎么畫，用圓角還是用什么顏色，這些沒有技術含量的工作，這樣一來，可以投入更多時間來賦能業務更好體驗設計工作。

1.3.4 B端主流組件庫有哪些

2.1 B端產品的設計過程

2.1.1 用戶體驗五要素

戰略層（屬于產品愿景，滿足用戶的需求，產品的愿景和目標）

由于用戶有不同的需求進而產生了不同的產品，戰略層決定了用戶用干什么樣的產品，比如，用戶需有很多銷售客戶的線索需要進行管理，用戶需要管理客戶，那就做一個CRM系統。比如，用戶想寫日報，想要一個打卡的OA系統，那么產品目標就是要做一個OA系統。比如，電商里面很多商品，牽扯到很多進銷存，那就做一個ERP系統。這部分跟設計師相關度沒有那么高。

范圍層（指功能規劃，功能的規格、包括內容的需求）

功能規劃：比如要做一個OA系統，其中就包含了打卡、日報、項目管理、報銷、人事流轉等等都是跟辦公相關聯的，需要把規格和功能畫出來，畫成簡單的表格并且將它們分類，這里所有的功能都不是詳細的，就是簡單的分類，將功能簡單描述一下，同時做一個簡單的用戶畫像。這部分設計師只需要閱讀產品經理給到得PRD需求文檔即可，整體看還是偏愿景，沒有形成具體的產出。比如OA系統中就總結出重點做一個審批得功能，并不知道什么樣的界面，只知道一個大概的范圍。

結構層（指原型設計）

這部分，設計師通常就需要參與進來，如果設計師只按產品給的設計好的原型來設計，就顯得很被動，這樣只能叫做視覺美化，被稱之為美工，設計師應該從沒有形成原型的時候，可能只是一個簡單的PRD需求文檔或者草圖，設計師就應該參與進去。

設計師對原型進行優化設計，優化的不是業務，因為很多業務內容肯定沒有產品經理了解得深刻入，這時，設計師需要優化的其實是它的交互邏輯、交互內容，一旦原型里里產生點擊，一旦產生多種狀態，那就要去了解它，每種狀態產生不一樣的界面結果，其實對標的就是設計師設計的界面將產生什么樣的變化，換句話說，如果有界面的變化，內容得變化，設計師就需要參與到其中。目前來看，很少公司有專門的交互設計師，要么這部分工作由UI設計師來完成，要么由產品經理來完成，很多企業已經把設計進行前置化，由UI設計師來完成交互的工作。

其中交互設計+信息架構設計是設計原型圖的關鍵，這兩個是密不可分的，如何制作原型圖，如何在原型圖里設置一些交互事件，給大家推薦《信息架構設計》這本書里有專門講到。再了解原型設計之前，不得不提到一個通用知識點，交互設計的七大定律。（后文有介紹）

框架層（指界面設計、組件設計）

框架層這部分有一些爭議，有的設計師認為就直接做界面設計了，其實框架層還不能把它理解成是界面設計，它僅僅是做了一些業務的模塊兒的框架而已，更多的其實是將它組件化: 將原型組件化、模塊兒化，類似我們直接從Antdesign組件庫復制來內容簡單改改之類得操作，完成的是組件和界面的設計，這些界面并不是最終完整的交付樣式。

表現層（可視化呈現，UI視覺呈現）

這部分和設計師關聯度最大的一部分，就是界面中的配色、配色、圖標、樣式、結構、布局、排版等設計，但是我們設計師需要從范圍層了解業務熟悉最初PRD產品需求文檔去一點點做起，其中設計師在戰略層參與度可能只有2%左右，范圍層參與度5%左右，從結構層開始逐步往上參與度越來越高，至少結構層，框架層和表現層的參與度是很深得。

2.1.2 B端產品的設計過程是什么

所以，通過梳理用戶體驗五要素，不難看出B端UI設計師的工作流程就是，01. 接到項目后，設計師主要閱讀產品經理給到的PRD需求文檔，同時去參與原型設計，根據最初版PRD輸出一份低保真原型圖，和其他部門進行初次評審；02. 經過初次評審討論過后，完善后的功能和頁面文案，產品經理補全和輸出完善后的產品PRD需求文檔，由設計師根據完善后得PRD需求文檔經過規范設計輸出高保真原型圖 ，與其他部門帶著初次評審討論后的問題，進行二次評審。03. 最終再由設計師經過組件化形成視覺圖。04. 同時設計師提供切圖，與前端緊密溝通，上線前制作設計走查表，進行設計走查。05、最后上線后根據數據、用戶反饋等提出交互和視覺可優化得方案建議，進行版本迭代。

2.2 交互設計七大定律

01. 菲茨定律：當設計師需要讓用戶重點去看到頁面中某一個突出點，點擊到一個區域時，設計師就需要做到適合的大小，適合的區域，適合的位置，適合的形狀，適合的顏色。也就是你想讓用戶點擊的時候就突出重點想顯示的，不想讓用戶點擊退出的，就把它設計的的足夠小。比如按鈕得退出和付款，實心付款按鈕為主要按鈕，虛線置灰退出按鈕為次要按鈕，比如常說的海報中字要大，logo要大，這些都屬于菲茨定律。

02. 席克定律：用戶面對的刺激（或選擇）越多，他們做出決定的時間就越長，由于用戶的時間很寶貴 ，用戶沒有義務花更多留在我們的網站上，所以我們需要有選擇的地方對選擇進行分類。

03. 7土2法則（米勒定律）：比如圓周率3.1415926，一般都能記住，而如果再往后加幾個數字，大家往往很難記住，原因就是經過大量測試，人腦容易記憶7位數字前后得數字，比如設計銀行輸入密碼的時候就用到了7土2 法則，設置密碼過多人腦不易記憶。

04. 接近法則：格式塔接近定律指出“彼此靠近的物體或形狀似乎形成了組”。

05. 防錯原則：當用戶在使用產品中，預判用戶本身或產品一定會出錯時候，可以告訴用戶怎么可以不犯錯，或者將風險降低。比如電腦的關閉電源鍵，就允許電腦司機時允許系統犯錯，讓用戶使用關閉電腦電源鍵進行重啟。比如銀行取出錢后，銀行卡有忘拔現象，銀行完全可以做到像光大銀行那樣去再取錢流程中改成先拔卡再出鈔得交互流程，就可以避免忘記拔卡，但其他銀行都沒有這么改進，仍然是先出鈔后拔卡得原因是允許用戶犯錯。

06. 奧卡姆剃刀原理：化繁為簡，如無必要，勿增實體。比如小米電視遙控器的設計，由原來傳統的很多遙控器按鍵只優化成了保留上下左右為數不多的幾個重要按鍵，原來的遙控器數字按鈕如果真正要輸入數字的時候通過功能性，調出數字來，這樣在遙控器得設計中基本只保留20%主要功能按鍵。這就是交互上的優化。比如在UI界面中，也會用到這個問題，簡化文字，把文字用圖標替換，還有各種流程得優化等等。

07. 雅克布定律：以用戶習慣的使用模式去設計產品，降低用戶學習成本，遵從用戶使用習慣。 利用現有的思維模型，用戶習慣，我們可以創建出色的用戶體驗，使用戶可以專注于自己的任務而不是學習新的模型習慣。

2.3 B端產品用戶畫像

2.3.1用戶畫像概念

用戶畫像又稱用戶角色，作為一種勾畫目標用戶、聯系用戶訴求與設計方向的有效工具，用戶畫像在各領域得到了廣泛應用。用戶畫像分為兩種，不論C端和B端都會做這樣的用戶畫像。總共可分為兩部分，基本信息數據和行為數據。

基本信息數據：當我們去了解用戶的基本信息的一些數據時，職業，收入，年齡等等，這些和功能有很多的關聯度，比如唯品會用戶畫像關鍵詞是：女性、折扣、白領 ，唯品會產品定位聚焦女性，這些基礎信息數據，就能給產品帶來很好的結果，當我們要做一個女性的購物平臺的時候，可以先把男性用戶拋除掉去考慮設計方向，再比如收入就知道了，大概產品面向的收入群體將是什么收入群體的人，那么我賣貨的價格區間、包括設計的風格就是一個什么樣群體的設計風格。那些賣奢侈品的不是黑色就是灰色，要不就是棕色，但未必是適合唯品會產品的風格，需要找出這些基本信息去和產品進行關聯度，把基本信息放到設計結果中去考慮。

行為數據：指用戶的愛好，這部分群體有哪些愛好，是喜歡購物，還是喜歡運動，他/她的消費情況是什么，喜歡旅游還是美食，他/她經常用哪些APP，他常用的設備，是蘋果手機呢還是安卓，小米還是華為，等等得到這些數據，也能得到一些用戶喜歡什么樣的競品，這些數據就能側面的在我們的產品中得到反饋，得到功能和設計上的指導和其他產品的區別。這些行為數據，不管我們做C端還是B端，都要獲取到，但C端和B端獲取到這些行為數據的結論是不一樣的。因為C端用戶研究方法不一定適用在B端用戶研究方法。C端最終抽象成一個人，給他帶來的很多屬性，這些等等都會成為他的用戶畫像。

進而找到這個人，將他的社會屬性，從抽象的角度慢慢變得具象，C端是他/她的社會屬性，把他做成一個普通的人，這個人有他的社會屬性，有他的社會價值，有他的社會行為。比如一個女性，一定喜歡美食，一定會買化妝品。

2.3.2 B端用戶畫像本質

比如做一個和電影相關的管理系統，電影行業包括很多人員管理，設備管理等，這里不能把用戶畫像抽象成一個男性或者女性了，而應該把它抽象成一個職業，比如抽象成一個導演，導演需要去管理什么東西，它需要哪些資源去整合。導演就又叫做行業屬性坐標。B端不以社會屬性去做用戶畫像，一定以行業坐標去做用戶畫像，我們在整理作品集的時候需注意不要與C端畫像整理混淆。

我們要做一個行業可以不用管他/她是誰，也可以不用管他/她有什么樣的社會屬性，比如做CRM最重要的在里面起到作用的是，客戶關系管理和銷售等; 比如做OA系統，就是一般的員工，等級，職能等等，可以看出行業屬性(職業屬性)決定了他的用戶畫像的精準度，一定把這個人拉到行業里去研究，研究社會屬性沒有價值。這是C端和B端做用戶研究最大的區別。

2.4 B端產品用戶調研

2.4.1用戶調研的作用/目的/重要性

01. 了解產品業務需求定位：可以幫助了解目標用戶的信息，從用戶的角度：未來使用你產品的用戶，他理不理解你的產品想要表達什么，你的產品講了哪些功能。因為很多好的產品我們打開它第一眼就知道要干什么，是給我們做什么的。同時站在設計者的角度：怎么可以把這個產品設計清楚，比如做一個CRM客戶關系管理系統，具體管理什么我們是不清晰的，想要清晰就需要通過用戶調研這個過程給它展開。

02.解決功能信息架構問題：可以幫助設計師更明確需求功能得合理性和優先級，比如頁面標題的使用、標題的層級、需要在信息層級清晰得情況下體現出來，而明確信息層級同樣需要通過用戶研究體現出來。

03.讓可用性測試更加準確：可以幫助鎖定合適的測試用戶，來測試我們的產品使用程度，使用體驗是不是好，這時需要要找目標用戶去測試，比如小米有品針對群體是米粉，唯品會針對的群體是職場女性，而不像C端找所有的人去測試。

04.解決團隊協作溝通問題：確定用研目標可以有理有據的把設計目標和產品經理的意見達成共識，因為未來一定會多次和產品進行PK，像諸如設計師組件化沒用好這些理由也不會是pk點，確定用研護鏢可以更好的深度去理解原型圖，可以把團隊協作溝通的問題解決好。

2.4.2 用戶調研的方法

01. 確定研究對象：首先拿到一個產品，拿到一個需求的時候，這個需求通常很模糊，比如只告訴做一款CRM客戶關系管理系統，但汽車行業，服裝電商行業，保險行業，銀行金融等等，都有CRM客戶管理系統，不同行業的CRM肯定是不一樣的，這時候，比如要做金融的CRM，那研究方向就已經確定了，金融CRM就可以確定去研究金融行業的業務鏈，業務流程，具體找哪些用戶群體，可以根據以往的驚經驗和產品的目標去確認。

02. 找研究方法 : 研究方法分主動和被動，我們通常用的方法是被動方法，比如自我報告法：當這個產品產生了一些數據，我們從后臺可以拉取這些數據的時候，通過這些數據去分析，這是被動的方法，這個被動的方法所有項目都可以用。而主動的方法，就是觀察和采訪，主動去找用戶去找關聯度。

03. 獲取到數據 : B端和C端區別之一是提高效率，它要產生的結果只有一個結果，就是減少成本，任何B端的系統都是為了實現這個目標，提高效率和減少成本。所以獲取數據，研究數據的方向不能偏離搞錯，用戶研究的方向不要搞錯。比如我們以用戶為中心來設計，就會認為用戶的操作體驗感是第一位的，其實不對，放在第一位去考慮的應該是以系統的最優化，提升效率為第一位，而用戶也可以為這件事情做一些改變而找到平衡點，數據導向得提高效率，減少成本有時會大于用戶的操作體驗。

04. 用研行為: 剛才前面提到的這些注意事項，到底應該找什么方法去得到這些數據呢？第一我們可以通過后臺數據比如通過百度統計等系統來獲得；第二通過問卷法發出一些問卷，用戶可能散落在全國不同位置；第三可以通過用戶定性訪談來獲得；第四可以通過用戶旅程圖來決定用研行為。

05. 分析調研結果: 研究結果不是為了放到我們的B端作品集里的，而研究結果一定是為了去定性、定量、讓數據回歸到產品功能本身。同時經常問自己這些問題，去根據研究結果和問題進行匹配思考，比如研究了那么多，用到了用戶畫像得出的結論了么，用到了哪里？在項目中能舉個例子嗎？采用什么樣的視覺去實現了用戶體驗要素？

2.4.3 B端用戶訪談模板

2.4.3.1 用戶訪談概念：

01.確定訪談目標：了解目標用戶群體，通過訪談信息來進一步構建所需要的用戶畫像，從而確定設計方案與功能優先級。02. 定性/定量訪談目標：將這些目標定量、定性，選擇不同的訪問對象，構建不同的角色畫像。比如問銷售的用戶畫像，要找不同的訪問對象，銷售總監，普通實習生等等，三到四個角色，樣本越多，用戶畫像越準確。03. 訪談過程：提前把問題寫出來，拿著問題去聊，用錄音設備，記錄表格，一個提問，一個記錄，分開后記錄比較準確。04.訪談結束：要做信息匯總，要做分析建模。分析建模就是將信息最終變得有意義。

B端用戶訪談模板有30個問題，這30個問題決定了我們的用戶畫像的精準度和產品的用戶畫像的價值。用戶訪談會問些什么問題呢？當我們調研的時候把問題寫出來的時候，就已經解決了一半的問題了。

2.4.3.2 B端用戶訪談30問

01、基礎特征

崗位：你是從事什么崗位的？是總監還是普通職員？目的是為了知道不同的權限的使用者，進而就可以在系統中設置這些權限。

職責：需要獲取到用戶不同的需求，因為每一個崗位有不同的職責，他們的需求點也是不一樣的。根據這些不同的需求，我們在界面中得動態儀表盤部分，就可以根據不同職責來顯示不同的內容。

姓名：可以讓訪談記錄得到更加真實的體現，目的是可以獲得產品的一些真實的基礎字段。

年齡：是用戶認知和經驗度的體現，用戶的年齡可以代表他們對行業的認知，和整個企業流程的認知程度，一般性理解，用戶的年齡越大，那么他的經驗越豐富。

教育：指用戶是什么學歷，目的是為了了解用戶的經歷與熟練程度，通常認為，用戶的教育越高的人，他們往往使用軟件操作的熟練度會越好。

位置：指用戶在什么地方來使用，目的是知道了場景與優先級，用戶是在寫字樓里還是精英場所來使用我們的產品。因此得出基礎特征是要得出這些結論，得出這些結論進而反饋到產品中去。

02、行為接觸點

使用頻次：不同的崗位用戶使用功能的優先級是不一樣的，用戶使用頻次越高的功能，這個功能的優先級就越高。了解之后，那在下次迭代的時候就需要把重要級別的功能放在易操作的區域去體現。比如這個重要功能就是一個icon，那么把它放一個快捷入口。

使用時長：也能代表功能的優先級，用戶使用時間最長的功能，代表可這個功能優先級很高。

時間段：用戶在什么時間段使用的是最多的，我們就知道了這個功能的活躍度，這個數據指標，主要和技術有關，我們可以從后臺數據去獲得。

使用設備：用戶使用設備兼容的優先級，平時用戶用什么設備，再訪談過程中，需要問具體使用電腦的分辨率，屏幕的尺寸，屏幕的比例，都可以去實際的調研一下。在我們做B端界面選擇屏幕尺寸的時候，可以采用結合實際情況用戶使用的屏幕分辨率尺寸來設計界面。

相關軟件：用戶平時的操作習慣和流程是什么，還會使用其他軟件嗎？比如他們還用什么其他的競品，可以繼續問用戶其他的競品哪里比較好，哪里是亮點，那最終得到的目標就是用戶的操作習慣和流程，這些也可都可以反饋在我們產品中。

03. 使用環境

碎片化時間：主要解決用戶場景的問題，比如汽車4S店銷售，當你去買車時，銷售人員會問，你會買什么樣的車，會記錄你的年齡，用車習慣，用車時間，姓名，預算，都會記錄，銷售通常會用一些碎片化的時間去記錄。此時就可以得出兩個結論：1.我們在設計的時候是否可以考慮讓銷售充分利用碎片化來進行這些信息的錄入，而且方便他的錄入，比如他本來只有電腦端，電腦端是一個完整版的功能，我們能不能給他設計出一個移動端來，讓銷售不用回到電腦屏幕中就可以去記錄這些內容。2. 記錄時也有兩種記錄方式，是客戶講話的時候銷售去記錄還是這些事情做完之后銷售再去記錄。通過這樣的行為會得到這樣不同的設計結果，比如有人問你們公司為什么要做B端的移動端設計？以上就可以有理有據去解決銷售的場景問題。

用戶的操作環境是什么：主要解決視覺體驗問題，用戶是白天操作還是晚上操作，是在強光環境操作還是弱光環境操作。這些都應該是考的點。比如B端使用的ATM機，應該設計成白色還是深色模式，我們知道一般都是深色模式，是因為通常是室內，它和光線有關系，如果是室外的取款機，四周又沒有遮擋，如果還設計成深色，肯定是看不清楚的。比如HMI車載系統，白天模式開了深色，一定會看不清楚。所以要提前判斷使用深色模式還是淺色模式，也需要考慮在設計的時候使用什么樣的色彩和色調，在室外使用還是室內使用，如果對色彩不怎么挑，那也可以使用VI色，這樣一來視覺的保障色就確定了。還可以確定在使用周期時間，要多長時間完成一個操作，應該使用什么樣的方法可以盡快完成一個操作。通過用戶的操作環境可以得到以上信息。

是否有平行事件：用戶在做這件事情的同時，他是不是需要做其他的事情，要得出至少兩種平行事件，得到的結論是，我們的界面是不是需要把某些功能整合在一起，因為用戶經常是需要同時做這兩種事情，同時去打開這兩個功能，通過這樣的反饋可以把同時使用的這兩個功能結合到一起，通過訪談可以得到這樣的依據，來進行功能的整合。

04. 主動詢問用戶觀點

用戶的驅動力: 去了解激勵因素，就知道了什么功能應該做完善，什么功能并沒有那么重要。比如汽車銷售為什么要錄入信息，因為可以增加汽車的銷量，錄入越準確的用戶信息，他的銷售量越高。也就是用戶做這件事情，他的原因是什么。

用戶遇到最難事件: 在工作中或者用戶使用過程中遇見了什么樣難的事情，這件難的事情，就是產品的痛點，就明白了當前產品迫切需要什么樣的功能去幫我們設計師來解決當前產品痛點的問題。

用戶遇到最颯事件:他在使用過程中最滿意的是什么事情，就是爽點是什么事情，那些產品中解決了用戶很好的問題的部分，去把產品更好的放大，讓用戶繼續使用。也就是通過訪談我們知道了產品的爽點是什么。

用戶擔心事件:在他們使用過程中擔心的是什么，我們也要要了解這些隱藏的問題.

用戶期望事件: 用戶希望得到什么樣的改善，最終的目標是想解決什么樣的問題，到這一步其實所有問題目前都沒有答案，我們可以繼續訪問，先做記錄，不做最終的答案.

問用戶目前狀態: 我們可以了解待解決的問題，通過產品想解決什么問題，進行收集需求；用戶對于產品升級有什么小期待，進行收集需求；通過用戶的反饋目前產品的哪些問題，收集到目前反饋的問題；以往問題是否有效解決；進行收集反饋。覺得不錯的同類型產品有哪些，通過了解競品情報，我們可以競量多問一些 覺得不錯的競品有哪些；目前產品有哪些地方很好，很好的地方要保持，有的產品升級后，以前特別好的功能突然消失了，改了沒必要，好的功能保持就可以；前產品有哪些地方不好，我們去優化不好的地方；以往問題是否有效解決，當有問題需要解決的時候，用戶的問題是否是通暢的。通過看用戶如何反饋，我們可以了解功能傾向，了解整個流程是否通暢

05. 聊生活

發覺人性閃光點，提升產品差異競爭力，1、問目前的生活狀態，婚姻狀態，有沒有孩子，接送孩子的時間，平時有什么愛好？什么愛好不錯？發覺人人性的閃光點，好的不好的產品都有共性，B端產品中視覺的傾向是什么？比如有插畫，溫馨的語言提示，通過什么樣的情感設計可以照顧到每個人的生活。

2.4.4 B端用戶訪談得出結論

如何判斷功能在用戶那里好還是不好？前面所有的都只是在記錄，現在才是在做判斷，判斷的第一件事，是做定量的整理，所有的問題都收集到了，也記錄到了，至少需要有兩個樣本，去做定量整理。

2.4.4.1定量整理：行為

第一步是行為的總結，量級的總結，把記錄的問題點、功能點和關鍵詞放到表格里面，經常出現，迫切需要解決的是什么問題，較少的問題是什么，偶爾的行為問題是什么，因此偶爾的優先級就不高了，主要關注經常遇到的問題點、功能點和關鍵詞。

2.4.4.2 定量整理：特征

把每個角色按照以下表格里的的特征進行定量的描述，這時候仍然不能找出它的共性點，但已經把用戶的特征進行分類整理了，定量之后再去定性。

2.4.4.3 定量整理：特征/角色/流程

這個角色名稱是一個具體的名字，比如王某某。以下這張表：可以看到在我們的系統中有哪些的權限，有哪些的角色，他們的需求是怎么樣的，這是一個完整的用戶畫像。用戶畫像是一個結果，是通過用戶訪談的形式完成了用戶畫像，并不是被動的接受數據信息得出的，所以通過用戶訪談的形式進行定量定性分析得到的結果是最準確的。

3.1 建立情緒版

3.1.1 情緒版的概念及作用

本質是將情緒視覺化，情緒版并不是玄學的東西，它確實可以通過圖片找到對應的圖形元素，因為圖形（照片）是可以表達情緒的，比如看到一張照片會感受什么什么情緒：熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關的關鍵詞。

情緒版是一個特別快速能和產品，我們的團隊包括設計團隊進行溝通的一種方式，比如要設計一個界面，需要幾天才能設計出來，但我想提前知道一下未來界面設計成什么樣子，那就先做一個情緒版，讓大家知道，找的方向是什么，這樣適合與大家及時的溝通，大家也會明白產品將會做成什么樣子，達成產品的最終設計定調。

3.1.2 怎么建立情緒版

01. 提煉關鍵詞：獲取本次產品設計中所要實現的產品3-5個必要的關鍵字詞組，其中包括交互或視覺目標，通常由一些比較抽象的形容詞組成。比如：在做的產品是醫療行業，那么醫療相關關鍵字詞組是：生命/健康/安全等。

02.關鍵詞發散：通過獲取到的關鍵詞的基礎上，發散出來一些新的詞語，這種發散詞匯，不是簡單頭腦風暴產生的，而是要有目的性的進行提取，要更加的具體。比如剛才舉例醫療行業，生命可以繼續發散出血液、器官等衍生關鍵詞。

03. 搜索圖形: 對之前總結出的幾個關鍵詞在圖庫中進行查找，也可以在直接在behance里找別人收藏好的情緒版圖片直接用，效率可能更高一點。

04. 制作情緒版: 搜索大量圖片后，挑出我們需要的進行整理，采用一種拼貼方式進行設計排版，拼貼出來需要得到需要得到的色彩，構圖，質感和字體。

05. 得出結論: 在圖形、色彩、字體、質感、構圖，以上五點，得到合適的設計方案，快速與團隊進行溝通，直觀表達產品清徐，達成產品的設計定調。產品調性（企業調性）其實就是用企業的方式把故事講述出來，是一種通過情緒版方法來講故事的方式。

3.2 品牌三元法

3.2.1 品牌三元法為什么逐漸替代情緒版

品牌三元法是通過品牌三板斧模型得出的一個確定設計主風格的一種新得方法，品牌三板斧模型可以總概為用戶調研關鍵的三個維度，一目標用戶是誰？二產品服務是什么？三對于目標用戶來說，你的產品服務有什么核心價值。當在回答完這三個問題以后，我們其實就已經清楚我們的品牌定位是什么了，因為它的核心優勢是比較明顯的，這樣我們就知道我們將來會面對什么樣的人群，去怎樣去宣傳它的賣點，同時做出產品的差異化。

通過這幾年得工作案例設計實踐，在確定設計主風格時，情緒版方法逐漸有被品牌三元法替代得趨勢，因為情緒版這種把抽象的詞不太好表現的詞，翻譯成圖片的方式，比如剛才提到醫療行業的關鍵詞是生命，健康，安全的，設計師找到很多這種相關的圖片，挑出來后從這些圖片里面找到一個共同的規律，最后去設計。這里面就有兩個問題，一個原因是關鍵詞非常的平，生面，安全，健康，很難更準確的表達衍生關鍵詞。另外一個問題是它非常局限設計師的創意，因為它是從一些現有的圖片里面然后去挑，所以很多設計師就反饋現有的方法不是很好用，比如當我們想到安全這個詞，可能所有人想到都是特別綠的感覺，或者干凈這個詞，就會統一聯想到白色這個畫面，大家從一開始想法就差不多，所以它很難體現出創意。所以由于情緒版嚴重限制了自己的想象力，沒辦法把產品核心的氣質表現出來，雖然情緒版正確但是是一個平庸的結果，大家沒辦法記住的結果。

3.2.2 如何應用品牌三元法

01. 理性層面（業務層面），傳遞產品理念：獲取本次產品設計中體現業務層面，可以傳達產品理念得5-10個關鍵詞，對應的放在左邊。

02. 感性層面（人文層面），營造產品氛圍：主要體現這個產品給用戶帶來什么好處，宣傳的角度是什么。獲取本次產品設計中體現人文層面，可以傳達產品氛圍的5-10個關鍵詞，對應的放在右邊。

03. 個性層面（氣質靈魂），創造獨特風格：結合理性的業務層面和感性的人文層面，來創作出什么樣的畫面，和獨特風格的感覺。同樣總結出5個左右的關鍵詞，放在下邊。

04. 結合以上三個維度，提煉主視覺畫面：當出現這三部分詞的時候，經過思考或者大家一起頭腦風暴，可能一開始想到的比較淺，但最終一定能想到一個最終關鍵詞或者特別符合我們這個產品氣質的畫面，因為以上三部分得出關鍵詞也都是經過品牌三板斧模型推演出有關聯的關鍵詞，想到一個符合產品氣質的畫面并不難，再得出這個主視覺畫面后，這就是最終產品調性的主視覺，既符合產品定位，又具有獨特的差異性。

05. 傳達產品，用視覺語言講故事：接下來，當這個主題、主視覺確定了以后，在看怎么樣用具體的視覺設計技能，去傳達我們的產品，也就是用視覺語言來講故事，具體注意三個方面，一是表像，元素要符合這個視覺主題，二是關聯，元素之間要具有關聯。三是隱喻，用視覺的手段含蓄的表達產品的一些特性。比如云計算的一些產品，做得比較復雜每一個圖標上都有一些曲線切割的畫面，這樣做的原因其實不是為了炫技，它是為了表達云計算彈性可擴展的特性，好比拍電影，中國人講究隱晦。

4.1 色彩規范

4.1.1 選色

在系統色彩中，以Antdedign為例，系統色彩里包含了很多不同的色調，但不可能用到這么多顏色，這時要應用選擇幾個顏色，選幾個我們應用的顏色。第一步要做的就是選色，選出應用色彩，這個應用色彩也就是我們建立得視覺規范中的基礎色板，在選色時候需注意，要有有明確的心理預期，比如醫療行業中常用藍色和綠色，就是符合預期的顏色。在基礎色板里選擇調色，應選擇兩個相同級別的藍色和綠色；基礎色板里選不同顏色時不要超過三個級別的跳躍；當選擇一個確定的顏色時，可以選擇草綠或者青綠色來作為輔助色；在基礎色板里，最頂部的顏色最適合做背景色，中間的顏色適合做按鈕色，底部的顏色適合做狀態色，或者小面積文字的填充色，其余就是搭配過度的作用。再比如零售、比如金融行業的產品，會選擇不同的顏色，那這些顏色代表了什么，是不是會和企業的VI色是有相符之處，這些都是我們去要考慮的。

4.1.2 注意色彩的兩個特性

01. 注意品牌性：體現特性和傳播理念、價值觀：比如宜家，我們立刻會想到的是黃色和藍色。比如京東，我們會想到紅色。如果是餓了么，我們會想到藍色。這些都是標識性的色彩，體現和傳遞的就是品牌理念和價值觀。這些顏色一定不是隨便選的，比如，宜家的黃色和藍色，其實是瑞典的國旗的顏色，代表著宜家的來源地來源于瑞典，因為瑞典是一個很強調簡約設計的國家，貫穿始終是在強調它的的價值觀。一些關鍵行動點：比如選中的狀態，按鈕的顏色，在很重要的地方用主色表達，這就是在體現B端的產品的色彩價值觀和企業價值觀的地方

02. 注意色彩的功能性：色彩需要體現功能有明確的信息以及狀態含義，色彩代表它獨特的含義，比如成功色，通常會選擇綠色，再系統色板里，青綠草綠都可以選。比如出錯/刪除/失敗用紅色，表示警告警示。比如鏈接要用藍色。

4.2 圖標規范

畫圖標要注意圖標的識別性、統一性和獨特性。圖標首先要一眼看出來表達的含義，其次是圖標設計圖標的大小，線寬粗細，圓角大小，圖標風格等這些都需要統一，最后最好可以體現出圖標的獨特性，獨特性就是差異化，這也是品牌三遠法得核心，塑造產品的差異化，具體分析方法也可應用在圖表設計當中，比如根據品牌基因進行延展，也可根據主風格主視覺設計定調，設計出獨特風格且符合產品定位得圖標應用在產品當中。

4.3 文字規范

4.3.1 字體家族

在B端頁面中字體的顯示順序，有固定的一套代碼模式，可以理解為，比如有的用戶電腦沒有平方字體，所以會顯示出冬青黑體，來替代平方字體的設計稿，如果沒有冬青黑體，就用微軟雅黑替代顯示，字體家族中，從左到右代表了字體顯示的有限順序，平方、冬青黑體、微軟雅黑、黑體、宋體，中英文都是。

4.3.2 主字體

在系統中有中文常用PingFangSC、微軟雅黑、思源黑體；英文常用San FranciscoUI（SF字體）、Helvetica Neue、Arial

4.3.3 大小與行高

方法一：在Antdesign中規定的，比如字體大小是14px，行高就是22px。規范里最小字體是14px，但可能有注釋字體，字號最小是12px。表格里的內容是按照表格里的行高來約定的，與字體行高無關，這個前提是，不在表格里內。當沒有出現文本字體，表格里的字體的時候就需要去設置字體的行高，Figma里默認行高是140%，比如14px字體，行高就設置成22。這是Antdesign里的規范，但不是唯一的規范。需要注意的是，如果使用一個標準就全部使用一個標準，這個需要把選中文字段落進行調整行高。

方法二：是當按倍率去算的行高規范，方法步驟是先調整好行高，去改變字體大小，比如無行高時，1/100%/1倍行高，注意加上%號；緊湊行高，1.3行高/130%；常規行高1.5行高/150%；寬松行高，1.7行高/170%。

4.3.4 文字的層級關系

輔助文字12px、正文（?。?3px、正文（常規）14px、小標題（16px，小標題是相對于14號字出現的）、標題18px、主標題20px

4.3.5 字重

比如常用的蘋方有6個字重，但在平時的設計中根本用不上。中文環境6個字重在實際顯示并沒那么好，常用兩個字體，萍方常規體400（常規），蘋方中黑體500（粗體）。而英文可以用粗體600。

4.3.6 字體顏色

在深色背景下、和淺色背景下不同內容的色彩透明度不同，具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下，字體應該使用白色還是黑色，應該按著規范嚴格使用，難點在顏色相近的時候選擇白色還是黑色，也需按照規范執行。

4.3.7 文字對齊關系

文案類對齊：頁面的字段、段落較短標題、需正文左對齊

表單類對齊：保證整齊適合閱讀，冒號對齊法找到中間的冒號，（左右對齊），如果全部使用左對齊或者右對齊會更亂。左邊一般最長字段六個字。前提是中文環境，不是國際化。冒號左右要留多少像素：8px的倍數相關值，4（窄點）、8（正常）、12、16（寬一點）都可以。

數字類對齊：日期，居中對齊；年齡，居中對齊/左對齊；非固定的數字：價格，采用右對齊，因為右對齊很容易看到價格的多少，哪個超出的更多，就越貴的，更容易區分數字的多少。

4.4 層級規范

層級規范得核心是對信息的間隔和區分，信息的區分間隔要用偶數8的倍數。具體可分為同層級的區分，用色塊（比如氣泡）、邊框（欄目之間抖索狂等）、線段來進行區分。錯層區分，用彈窗（背景變暗）、邊框陰影（陰影的出現是擬物化的出現，當物體離它的光源越近，比如高度越高，它的陰影就越大越寬。離它的底部越近，陰影就越小，比如下拉框、搜索框、日歷控件、彈出窗口來區分）。

這里需注意，關于投影，再前端角度考慮盡量不要用太多的特效濾鏡來設計，因為在B端網頁中，瀏覽器的兼容性不好，比如用ie瀏覽器就根本看不到這樣的效果，如果用谷歌瀏覽器能看到，用safri瀏覽器能看到，但在火狐下等又會看不到，想要都看到就需要兼容很多代碼，需要前端加很多代碼實現兼容性的效果，很增加前端的工作量，所以在B端很少用非標準型的濾鏡代碼使用，雖然可以實現，但一般不太用，一般就是變灰、變深、變透明度最簡單的方法實現。不同于移動端，因為IOS用的是原生的開發，所以不存在這個問題。

文章來源：站酷   作者：morning_c
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

相較于C端產品，B端產品的系統更復雜，用戶角色也更多樣，故而更強調針對角色的個性化服務。這篇文章分析了B端產品的用戶構成，提出通過他們關心的內容來對癥下藥的方法，詳述了接觸用戶合適的時機、渠道以及跟進和維護用戶的方法。一起來看看吧！

一、背景

面對B端產品，設計師該如何認知用戶以及做出相應策略？作者通過對自身一些做B端產品設計經驗、踩過的坑進行總結，期望能夠給感興趣的讀者帶來一些啟發。

二、B端用戶有哪些

不同于C端消費產品的用戶比較唯一，B端產品系統更為復雜所以用戶角色也更多。本篇將從商業銷售的角度來研究B端用戶。

1. 用戶構成

B端產品的售賣大多針對一個組織/一家企業，往往存在著產品價格高、產品體量大、適用范圍廣的情況，所以商家決定購買的決策成本更高，按照組織層級從上向下、可以歸納出「決策者」、「運維者」、「使用者」三個層級的角色。

1）使用者

一般是企業內的內部員工，在日常工作時需要一些支持性軟件來更好地辦公。比如公司內的員工進行上下班打卡，這時他們對于考勤系統就是使用者。

2）運維者

一般是企業管理內部的部門負責人或管理員，他們為企業提供支持性的服務，也是產品工具輔助完成工作的管理者。

3）決策者

一般是一個企業的CEO/負責人，他們來決定是否需要支付一筆不小的費用購入一款軟件，來更好地管理企業。比如某公司的CEO最終決定買企業微信還是釘釘，讓員工進行內部溝通。

2. 關于決策鏈

B端用戶的三個角色，通過相互影響形成了產品購買的「決策鏈」。

這個“決策鏈”的作用產生在「是否購買」、以及「是否續費」兩個核心問題上，通常我們簡稱為「新購」與「續購」。

在這里我還是重審下背景：出現的新購與續購概念，好像看起來已經脫離了本篇文章的主題，但這確實非常重要。對于B端產品，產研開發的核心目的還是將產品賣出，設計師作為產研的一員也需要背負這樣的任務。所以我們需要研究用戶，并且從商業的角度出發給出建議。

基于此，新購與續購的商業概念可以幫助大家更好地聚焦用戶場景與設計策略。

3. 關于新購

新購即指從未買過產品的商家、初次購買的過程。

1）對于新購，有的商家是自上而下決策

決策者主動有意愿有想法，從而購買產品。

這樣的方式在購買后對產品的推廣和使用更為容易，下面人員的配合度更高，產品取得的效果也就更好，更容易成為優秀的標桿案例。

2）有的商家是自下而上決策

從運維者主動有意愿有想法，并通過游說決策者、讓其理解當前企業存在的問題、通過什么樣的產品去解決，從而購買產品。

這樣的方式取決于決策者獲取到產品價值從而支持購入，如果沒獲取或不認同，則會導致產品售賣失敗。

沒獲取，卻因為其它因素（比如競品企業都在用了），也可能會進行購買。但這樣的方式因為不能獲得決策者最大限度的支持，在推行起來會存在一些障礙和困難，因為B端產品往往牽扯組織內多個部門或人員，所以往往啟動較慢，產品效果也不能保證。

所以在這個階段決策者的態度與意見是非常重要的，運維者提供一定的建議，使用者通常沒有話語權。

4. 關于續購

續購即指已經購買過的商家，續約產品的過程。

決定續購的核心標準：產品是否有效果，翻譯到產研側就是產品是否被用起來了。

在這個問題上，因為決策者幾乎不會參與過程，所以更考驗運維者本身的使用策略，同時也非常看重使用者的實際使用體驗。

在決策鏈上，核心角色的建議權，往往比決策權還重，是否被用起來以及用起來的效果是一個從下向上檢驗的結果。所以在這個階段，運維者和使用者的體驗非常重要。

5. 對癥下藥

在了解基礎的概念后，還要知道他們關心什么才能將設計對癥下藥。

對于決策者來說，擁有最終購買決定權，但因其并不是實際業務執行人，所以會考慮其他角色的建議與意見。他們關注營收增長、效率提高、減少成本等方面的問題。一般都是階段性的查看成果，權衡產品價值。

對于運維者來說，是提供重要意見的核心建議者，也是實際業務的執行人，會對產品有更多的要求和考慮。他們同樣關注營收增長、效率提高、減少成本等方面的問題，但更多地是實際執行時的種種細節問題，具體些就是管理方面的功能完不完備（比如社區中是否能精選評論、是否能自定給精選評論發獎勵）、數據能力完不完善等等。

對于使用者來說，前期幾乎只能被動接受，但承載著后期衡量產品實際使用效果的作用。他們關注產品便捷性、是否為自己解決問題。幫他們解決問題，他們才愿意用，產品才能用的起來、用的好。

三、如何尋找用戶

對B端用戶有一個大概了解后，我們再來了解下設計師如何介入用戶，了解用戶與用戶相處，讓我們的設計更打動人心。

不同于C端可以較為自由的選取用戶，B端產品對于用戶的選取與接觸較為受限。

產品供應企業針對所服務的商家會提供一套售前+售后的服務體系，并配備了不同的人員分管各個階段，例如有客戶銷售、客戶成功、專屬運營等。設立的目的是針對性的個性化服務，面對不同商家情況，所轉述的產品價值甚至價格都會有所區別，當然這些信息也都非常敏感和隱私。

所以當你想尋找用戶做調研時，一般要找到對應的商家運營，告知目的后幫你推薦合適的用戶與聯系方式。除此之外，在話術方面例如什么可以溝通、什么不可以溝通，如何回答敏感問題等更為嚴格（這個我們后文會再詳細描述）。

四、如何接觸用戶

在認知用戶基礎信息所處身份后，還需了解如何與用戶接觸，本文將從接觸時機與接觸渠道兩個方面闡述，內容來自實際經驗總結以供參考。

1. 接觸時機

1）功能類變動

• 在涉及操作的流程設計前后，需要跟進商家意見，看是否真正解決商家問題、減少成本或符合習慣。
• 在大模塊頁面優化前后，需要調研是否符合使用習慣或預期。

2）視覺類變動

在重要的視覺表現設計上（比如證書樣式、皮膚設置等），需要調研是否符合其審美。

2. 接觸渠道

除了尋求運營幫助推薦單個用戶，還有一些渠道方式可以幫助你接觸用戶。

1）日常溝通商家群

一般一個商家會建立一個包含該商家的運維者、B端的產品經理以及運營的群，用來解決對接問題以及日常咨詢，所以設計師可以通過加入這個群，了解商家如何使用產品，都在反饋些什么問題。一般商家反饋的最多的，是某某功能如何使用和bug類。

2）產研反饋優化群

不同于商家群的人少而精的特點，問題反饋群更多匯集了各類技術與全部運營銷售人員，用以處理運營在平時遇到的商家的各種問題，還有商家從故障平臺等多個方面回收的使用反饋。

這個群不僅可以幫你了解商家更關注哪些功能、還能通過技術對于問題的解答更加了解產品邏輯。

五、如何跟進用戶

一般B端產品的用戶數量有限，使用深度也更高，除了非常少頻的調研問卷，更多采用訪談的形式來進行問題的挖掘與調研。這些跟進方式其實在各個領域已經非常成熟，作者通過自己的實際經驗羅列了一些方法和區別以供參考。

1. 實地拜訪

通過實地走訪，真實地走入用戶的實際使用場地，近距離、近環境的接觸用戶。

操作指南：

1）一般運營通過聯系商家用戶確定上門的時間以及目的，來發起一次拜訪。

2）拜訪是在設計師提前準備好問題的情況下，過程中因為B端商家的使用場景往往不能預想，且面對面聊天會更加激發用戶的表達欲。所以在深度追問的過程中，用戶的回答可能不會按照預想的方向進行，會經常跑偏，此時需要根據你的目的，視情況引導談話方向。

3）溝通時，用戶除了回答產研預設的問題、還會提一堆優化需求或是功能需求，此時要注意避坑，除了自己能力范圍外的，不能擅自答應，但同時也需要給出比較委婉的解決方案安撫用戶。

4）對用戶所有提出的問題給出明確的后續反饋時間，并同步組內其它產研同學，及時跟進和反饋結果。不然商家會覺得一直在提重復的問題給不同的人，但沒什么反饋，造成不良印象。

實地拜訪好處是面對面增強真實感，更準確地解讀用戶需求，也能一次性了解商家幾乎全部的用戶類型，有更為全面的用戶源可了解，同時更容易跟用戶熟悉起來，建立長期的關系。壞處是成本高、費時間。

2. 線上訪談

一般遇到沒辦法花時間實地拜訪的情況，線上聯系也是一種好方法。此時需要聯系好運營確認好溝通訴求后，自行線上聯系用戶進行調研。

操作指南：

1）聯系前要說明來意、并預約時間（區別于C端直接打電話開始訪問），一般商家都會很高興（可能因為畢竟花了錢）。

2）需要提前準備好問題，一般會按照問題逐個回答，很少跑偏。

線上調研的好處是便捷快速地聚焦問題，壞處是對問題的理解還有回答的準確度判斷可能沒那么高。

3. 調研問卷:

不同于C端場景，B端產品因為用戶體量上的原因，較少用到問卷。但依然有一些必要場景會用到，比如針對某一功能的認知、產品的滿意度等。

操作指南：

1）B端問卷的一個難點在于“如何發放”。C端一般在產品內留有問卷入口，因為用戶量大、總會收集部分反饋.但B端用戶較少，若要確保收集到一定量的問卷，就得主動出擊提高觸達率。

目前作者所在團隊每周會針對運維者進行答疑直播活動，相當于每次直播都自動匯集一群目標用戶，在直播過程中可以穿插問卷及入口，能夠極大概率地收到反饋（當然填寫獎勵必不可少，可以準備一些公司周邊小禮品抽獎）。

2）問卷如何設計按照普遍方式進行即可，在此不詳述。

六、如何維護用戶

建立個人用戶庫

通過以上方法我們已經開始并可以與各類用戶認識、并進行調研了。

做完調研后，我建議可以針對一些愿意發聲的用戶建立更深一層的關系，比如直接幫助他們解決設計問題、解答功能疑惑等。用戶其實是樂于接受更多交流的，這樣可以構建個人用戶庫，它可以幫助你避免重復地走預約流程，更加便捷地獲取用戶信息，讓你對用戶也能夠更加了解。

七、關于B端的標桿客戶

在B端產品迭代中，我們經常聽到這樣的話“我們要打造一個標桿”，“目前這個功能還沒形成標桿”等。這里涉及到一個詞“標桿客戶”。其實除了企業內部角色的劃分，針對企業本身，也有不同維度的劃分，「標桿」相當于企業的一種分層維度。

1. 什么是標桿

標桿客戶指該B端產品在商家內部推行后、使用的效果超過預期，對商家某問題起到了極大的正面作用。

2. 標桿的作用

1）驗證產品可行性

只有通過標桿的建立，才可以一定程度證明產品能力是符合市場需求的。如果遲遲沒有標桿產生、可能產品本身就得重新考慮定位與方向了。

2）為產品站臺增強說服力

在很多銷售售賣產品時，如果只是單薄的產品邏輯講解，往往商家沒那么容易理解獲取產品價值，但如果有標桿案例，銷售將標桿商家是如何運營、如何取得成果的流程闡述出來，基本上同行商家能夠立馬理解產品價值。

所以商家對標桿是很看重的，且要求會越來越高，不僅是同行標桿、有的還會要求有細分行業的案例給到（比如除了同樣是家居行業、更希望有硬裝行業、甚至家居-硬裝-瓷磚行業的案例）

八、為B端用戶做設計的避坑指南

關于「如何為B端用戶做設計」又是一個宏大的主題，在此先不做系統性的分析和展開，僅提供一些經歷實戰后的小技巧以供讀者參考。

1）產品模塊對B端商家的作用不同、需求不同、要保證適配各類商家的靈活性

2）B端產品往往復雜，更注重頁面引導、新功能的解釋，所以每做一個新功能對于“能不能理解”的新人引導設計非常必要（且是人性化的）

3）避免個人經驗主義，B端場景往往不能共情，不能依靠個人生活經驗去做設計判斷

4）決策者和使用者有時會在功能模塊上有利益沖突，需要根據該功能對產品購買的影響程度，來權衡利弊（參考決策鏈）

5）B端產品是用戶花錢買的，與C端的免費使用是一個本質區別，“買的東西去享受”和“免費的東西去享受”，感受與包容度完全不一樣。

買，代表有所需，使用時，會有準確的預期，在產品設計時需要考慮該功能商家是否買單，是不是當初買這份產品所預期的，如果不是，謹慎添加，且要保證不增加任何認知/操作成本。

6）商家更注重儀式感，對于某些一次性場景不可因頻率不高而忽視視覺表現，比如產品初始化設置。

九、最后

B端用戶既是普通消費者也是企業打工人，在使用B端產品時天然擁有兩重身份，會有職業屬性的因素存在，所以拆解好這兩種角色并對癥下藥，就可以了解他們，深入他們設計出極致的產品。

文章來源：人人都是產品經理   作者：酷家樂用戶體驗設計

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

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

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