B端新人們接收項目時，可能會碰上一個復雜的產品，設計不統一、交互不統一，也沒有一個合理設計規范，導致想要摸清產品的情況可謂是困難重重。作者根據自己工作中遇到的問題和相關解決方案，總結各路大咖的一些精髓以及自己的一些想法，匯聚成了相對比較全的關于B端產品設計的的文章，希望能夠給你帶來幫助。

去年我接收了一個比較大的B端項目，產品經歷了四年的迭代，算是成熟的產品了，我拿到的時候，還蠻興奮。但是使用一天以后我就只剩下頭疼了，這么復雜一個產品，設計不統一、交互不統一，重要的是，居然沒有一個合理設計規范，我在梳理設計稿件的時候完全摸不著頭腦。一個月以后看到這個產品，我還是摸不清產品情況。

以下是我根據自己工作中遇到的問題和相關解決方案，總結各路大咖的一些精髓以及我的一些想法，匯聚成了相對比較全的關于B端產品設計的的文章。文章稍微有一點長，請耐心看完，會對剛接觸B端的新手們有一定的幫助，也能幫您提高工作效率，節約不少時間的。

01 設計規范的概述

一、定義

1.1 設計規范的概念

設計規范是指對設計的具體技術要求，是設計工作的指導規則。一般包括總體目標的技術描述、功能的技術描述、技術指標的技術描述，以及限制條件的技術描述等。

Design System 最開始是 Guide 演化而來，Guide 是一套可指導、可延續、可擴展、可統一的、可區分的視覺指引手冊，指導相關設計結構完成統一性與對外區分性。具象層，它是一種設計方法；抽象層，它是一種思考模型。

設計規范一般會具體到公司級別、某一類產品線、某個產品等。今天主要講具體某個產品的設計規范，主要是為該產品制定統一的用戶體驗、品牌、視覺等方面的規范，當然是在滿足以上公司級別和某一類產品線層次的設計規范的基礎上。

1.2 設計規范的組成

設計規范由設計原則、設計語言和組件庫構成，在設計原則的指導下使用設計語言和組件庫創建體驗一致的用戶界面。

設計原則是指：整個設計體系所要遵循的全局原則，是為我們設計提供方向指導的。

設計語言：是指設計所包含的語言體系。具體包含了：色彩、字體、圖標、布局等

組件庫：相當于積木玩具的一個個積木，每個組件就是一塊積木，通過組件的拼搭可以迅速搭建出一個個頁面。下面我會具體說明組件庫。組件庫具體包括：按鈕、導航、表單、數據等等。

1.3 B端及C端

我后面會有專門的文章專門講關于B端產品和C端產品的文章，這里就不再贅述了。這里大概講一下兩者在設計規范上的差別。

B端產品和C端產品制定設計規范差別還是蠻大的，最主要的差異大致是：

• C端產品的設計規范，目標幾乎都是為了更好的打磨用戶體驗的一致性和標準化；
• B端產品設計規范，由于用戶體驗更復雜，學習成本更高，所以它的目標側重點是：除了布局的不同外，相同業務場景下，相同產品功能需要有一致的，標準化的體驗，降低學習成本，提高工作效率，即統一體驗。

二、為什么要制定設計規范？

1、對于產品經理

創建原型時可直接調用組件庫，能搭建出高保真的原型。

與設計師和前端溝通更加順暢，小的修改可以直接和開發溝通不需要通過設計師出圖，極大增加了前期的節奏，提升溝通效率。

2、對于設計師

對于只有一個設計師的項目：可以讓那個設計更加規范，有些簡單功能迭代可以直接個研發溝通，不用再單獨出圖，減少重復性的工作。

對于同一個項目由多個設計師共同協作時：可保證設計各方面包含體驗、設計、交互等等的統一性。減少設計成本，提升設計及溝通效率。

對于接手新項目，能盡快的了解產品，快速入手。

對于開發完成驗收走查，有了前期的規范及比較詳細的設計尺寸，開發的設計還原度會更高，減少重復及沒必要的設計走查。

3、對于開發

開發可以按照設計規范建立好公共組件庫，極大的提升開發效率。

可復用的東西確定了下來不會頻繁改動，設計走查的問題也會逐漸減少。

4、對于測試

對于模棱兩可的交互可以有地方看交互樣式了，不需要再詢問設計師。有更多的時間專注于測試功能上的問題了。

通用的組件前期測試后了以后，后續就不需要重復測試，極大的提升工作效率，避免重復工作。

5、對于協作溝通來說

前期制定及評審設計規范以后，有一套筆記明確的規范，可減少各個職位方面的溝通成本，提高溝通效率。

三、為什么要制定自己的設計規范？

目前市面上有很多多的第三方設計規范，比如：antdesign，element，那有人就會問有必要自己重復造輪子做一遍嗎？

我覺得是有必要的，為什么呢？

1. 每個產品有各自獨有的品牌調性，如果都用第三方 的設計規范，那同質化會很嚴重，很難做到差異化，也就很難在競爭中脫穎而出。
2. 世上本沒有萬能的設計規范，那些設計規范的組件并不能100%滿足我們產品的需求。另外一方面使用封裝好的第三方設計規范，在此基礎上進行修改，效率很低，適配的復雜度和重新開發相差無幾。
3. 第三方的的成熟的組件庫，我認為應該把它當成模式，在他們的基礎上去做自己的設計規范。

四、什么階段適合設計規范？

個人工作中兩個比較建議的規范建立時間點，探索期和成長期。

1、引入期間

產品在引入階段，產品還在處于極大變動的時候，這個時候做設計規范，其中就蘊含可極大的風險。但是也不是不做規范，這階段規范主要涉及到色彩，字體，間距，布局，柵格等通用設計原則以及常用業務組件的定制。此階段搭建的規范具備高效性以及靈活性的特點。

不適合搭建特殊的業務組件，比如：當領導想要突然調轉方向也不會很慌，改動較小就可以完成整體的規范轉向）此時搭建規范組件庫需要考慮到預留后續更改的空間。

2、成長期

當產品進入成長期處于較為穩定的版本，整個團隊對業務的理解也都很熟悉了，這個適合創建符合業務場景的組件庫，有了前期的積累這個組件庫會更加符合產品及業務邏輯。

02 如何開始整理設計規范

在制定規范前，設計師需要明確產品中主要有哪幾種分類，將最基礎的分類定義好方便后續針對分類內容進行整理。

B端產品與C端產品既有共同性也有著很大的差異化，可以借鑒但是切忌生搬硬套C端的設計規范。

03 大廠設計規范推薦

一、pc端

1 、Antdisign

Ant Design是由螞蟻集團體驗技術部經過大量的項目實踐與總結，逐步打磨出來的，基于「自然」、「確定性」、「意義感」、「生長性」四大設計價值觀，通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗，是非常完整的一套設計規范。

2、 TDesign

TDesign是騰訊企業級設計體系，也是去年才發布的。雖然才發布，但是作為一款誕生于騰訊內部開源，卻是經過了超500項內部業務檢驗的企業級設計體系，TDesign 匯集了騰訊眾多優秀組件庫能力和設計研發經驗。

內含豐富可復用的設計組件資源，如色彩體系、文字系統、動效設計等，覆蓋支持 Axure、Sketch、Figma、Adobe XD 等各大產品設計軟件?？梢园凑招枨蟛榭磳M件的使用教程和代碼演示，只需簡單的引入操作，即可搭建屬于自己的產品界面。

3 、Zent

是有贊 PC 端 Web UI 規范的 React 實現版本，提供了一整套基礎的 UI 組件以及常用的業務組件。通過 Zent，可以快速搭建出風格統一的頁面，提升開發效率。目前有 50+組件，這些組件都已經在有贊的各類 PC 業務中廣泛使用。

4、Element

Element是由餓了么公司前端團隊開源一套為開發者、設計師和產品經理準備的基于 Vue 2.0的組件庫，提供了配套設計資源。

5、AT-UI

AT-UI 是一款基于 Vue 2.x 的前端 UI 組件庫，主要用于快速開發 PC 網站產品，在眾多的的組件庫中，AT-UI 屬于視覺風格比較清新的一款。

二、移動端

1 、Material Design

谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標是創造一個將經典的設計原則和科技、創新相結合的設計語言，并且在不同設備上提供一致的體驗底層系統，并同時支持觸摸、語音、鼠標、鍵盤等輸入方式。

2、iOS Human Interface Guidelines

iOS 的人機規范指南，保持了蘋果一貫的風格。雖然沒有 Material Design 規范那么細致全面，但是核心的設計原則在每個組件的設計說明中都有滲透。作為 iOS 系統的設計基礎，建議每個設計師都需要仔細研究。

3、Vant

Vant 是有贊前端團隊開源的移動端組件庫，于 2017 年開源，已持續維護 4 年時間。Vant 對內承載了有贊所有核心業務，對外服務十多萬開發者，是業界主流的移動端組件庫之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。

4、NutUI-JDL

NutUI-JDL 是一套基于京東物流視覺規范的移動端組件庫，包含了36+高質量組件和詳盡的文檔和實例。

由于篇幅過長，我將文章分成三個部分，有興趣的朋友可以關注我們，期待剩下的兩期吧！

感謝你的閱讀支持，歡迎留言互動！