B端新人們接收項(xiàng)目時(shí)，可能會(huì)碰上一個(gè)復(fù)雜的產(chǎn)品，設(shè)計(jì)不統(tǒng)一、交互不統(tǒng)一，也沒(méi)有一個(gè)合理設(shè)計(jì)規(guī)范，導(dǎo)致想要摸清產(chǎn)品的情況可謂是困難重重。作者根據(jù)自己工作中遇到的問(wèn)題和相關(guān)解決方案，總結(jié)各路大咖的一些精髓以及自己的一些想法，匯聚成了相對(duì)比較全的關(guān)于B端產(chǎn)品設(shè)計(jì)的的文章，希望能夠給你帶來(lái)幫助。

去年我接收了一個(gè)比較大的B端項(xiàng)目，產(chǎn)品經(jīng)歷了四年的迭代，算是成熟的產(chǎn)品了，我拿到的時(shí)候，還蠻興奮。但是使用一天以后我就只剩下頭疼了，這么復(fù)雜一個(gè)產(chǎn)品，設(shè)計(jì)不統(tǒng)一、交互不統(tǒng)一，重要的是，居然沒(méi)有一個(gè)合理設(shè)計(jì)規(guī)范，我在梳理設(shè)計(jì)稿件的時(shí)候完全摸不著頭腦。一個(gè)月以后看到這個(gè)產(chǎn)品，我還是摸不清產(chǎn)品情況。

以下是我根據(jù)自己工作中遇到的問(wèn)題和相關(guān)解決方案，總結(jié)各路大咖的一些精髓以及我的一些想法，匯聚成了相對(duì)比較全的關(guān)于B端產(chǎn)品設(shè)計(jì)的的文章。文章稍微有一點(diǎn)長(zhǎng)，請(qǐng)耐心看完，會(huì)對(duì)剛接觸B端的新手們有一定的幫助，也能幫您提高工作效率，節(jié)約不少時(shí)間的。

01 設(shè)計(jì)規(guī)范的概述

一、定義

1.1 設(shè)計(jì)規(guī)范的概念

設(shè)計(jì)規(guī)范是指對(duì)設(shè)計(jì)的具體技術(shù)要求，是設(shè)計(jì)工作的指導(dǎo)規(guī)則。一般包括總體目標(biāo)的技術(shù)描述、功能的技術(shù)描述、技術(shù)指標(biāo)的技術(shù)描述，以及限制條件的技術(shù)描述等。

Design System 最開始是 Guide 演化而來(lái)，Guide 是一套可指導(dǎo)、可延續(xù)、可擴(kuò)展、可統(tǒng)一的、可區(qū)分的視覺(jué)指引手冊(cè)，指導(dǎo)相關(guān)設(shè)計(jì)結(jié)構(gòu)完成統(tǒng)一性與對(duì)外區(qū)分性。具象層，它是一種設(shè)計(jì)方法；抽象層，它是一種思考模型。

設(shè)計(jì)規(guī)范一般會(huì)具體到公司級(jí)別、某一類產(chǎn)品線、某個(gè)產(chǎn)品等。今天主要講具體某個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范，主要是為該產(chǎn)品制定統(tǒng)一的用戶體驗(yàn)、品牌、視覺(jué)等方面的規(guī)范，當(dāng)然是在滿足以上公司級(jí)別和某一類產(chǎn)品線層次的設(shè)計(jì)規(guī)范的基礎(chǔ)上。

1.2 設(shè)計(jì)規(guī)范的組成

設(shè)計(jì)規(guī)范由設(shè)計(jì)原則、設(shè)計(jì)語(yǔ)言和組件庫(kù)構(gòu)成，在設(shè)計(jì)原則的指導(dǎo)下使用設(shè)計(jì)語(yǔ)言和組件庫(kù)創(chuàng)建體驗(yàn)一致的用戶界面。

設(shè)計(jì)原則是指：整個(gè)設(shè)計(jì)體系所要遵循的全局原則，是為我們?cè)O(shè)計(jì)提供方向指導(dǎo)的。

設(shè)計(jì)語(yǔ)言：是指設(shè)計(jì)所包含的語(yǔ)言體系。具體包含了：色彩、字體、圖標(biāo)、布局等

組件庫(kù)：相當(dāng)于積木玩具的一個(gè)個(gè)積木，每個(gè)組件就是一塊積木，通過(guò)組件的拼搭可以迅速搭建出一個(gè)個(gè)頁(yè)面。下面我會(huì)具體說(shuō)明組件庫(kù)。組件庫(kù)具體包括：按鈕、導(dǎo)航、表單、數(shù)據(jù)等等。

1.3 B端及C端

我后面會(huì)有專門的文章專門講關(guān)于B端產(chǎn)品和C端產(chǎn)品的文章，這里就不再贅述了。這里大概講一下兩者在設(shè)計(jì)規(guī)范上的差別。

B端產(chǎn)品和C端產(chǎn)品制定設(shè)計(jì)規(guī)范差別還是蠻大的，最主要的差異大致是：

• C端產(chǎn)品的設(shè)計(jì)規(guī)范，目標(biāo)幾乎都是為了更好的打磨用戶體驗(yàn)的一致性和標(biāo)準(zhǔn)化；
• B端產(chǎn)品設(shè)計(jì)規(guī)范，由于用戶體驗(yàn)更復(fù)雜，學(xué)習(xí)成本更高，所以它的目標(biāo)側(cè)重點(diǎn)是：除了布局的不同外，相同業(yè)務(wù)場(chǎng)景下，相同產(chǎn)品功能需要有一致的，標(biāo)準(zhǔn)化的體驗(yàn)，降低學(xué)習(xí)成本，提高工作效率，即統(tǒng)一體驗(yàn)。

二、為什么要制定設(shè)計(jì)規(guī)范？

1、對(duì)于產(chǎn)品經(jīng)理

創(chuàng)建原型時(shí)可直接調(diào)用組件庫(kù)，能搭建出高保真的原型。

與設(shè)計(jì)師和前端溝通更加順暢，小的修改可以直接和開發(fā)溝通不需要通過(guò)設(shè)計(jì)師出圖，極大增加了前期的節(jié)奏，提升溝通效率。

2、對(duì)于設(shè)計(jì)師

對(duì)于只有一個(gè)設(shè)計(jì)師的項(xiàng)目：可以讓那個(gè)設(shè)計(jì)更加規(guī)范，有些簡(jiǎn)單功能迭代可以直接個(gè)研發(fā)溝通，不用再單獨(dú)出圖，減少重復(fù)性的工作。

對(duì)于同一個(gè)項(xiàng)目由多個(gè)設(shè)計(jì)師共同協(xié)作時(shí)：可保證設(shè)計(jì)各方面包含體驗(yàn)、設(shè)計(jì)、交互等等的統(tǒng)一性。減少設(shè)計(jì)成本，提升設(shè)計(jì)及溝通效率。

對(duì)于接手新項(xiàng)目，能盡快的了解產(chǎn)品，快速入手。

對(duì)于開發(fā)完成驗(yàn)收走查，有了前期的規(guī)范及比較詳細(xì)的設(shè)計(jì)尺寸，開發(fā)的設(shè)計(jì)還原度會(huì)更高，減少重復(fù)及沒(méi)必要的設(shè)計(jì)走查。

3、對(duì)于開發(fā)

開發(fā)可以按照設(shè)計(jì)規(guī)范建立好公共組件庫(kù)，極大的提升開發(fā)效率。

可復(fù)用的東西確定了下來(lái)不會(huì)頻繁改動(dòng)，設(shè)計(jì)走查的問(wèn)題也會(huì)逐漸減少。

4、對(duì)于測(cè)試

對(duì)于模棱兩可的交互可以有地方看交互樣式了，不需要再詢問(wèn)設(shè)計(jì)師。有更多的時(shí)間專注于測(cè)試功能上的問(wèn)題了。

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

5、對(duì)于協(xié)作溝通來(lái)說(shuō)

前期制定及評(píng)審設(shè)計(jì)規(guī)范以后，有一套筆記明確的規(guī)范，可減少各個(gè)職位方面的溝通成本，提高溝通效率。

三、為什么要制定自己的設(shè)計(jì)規(guī)范？

目前市面上有很多多的第三方設(shè)計(jì)規(guī)范，比如：antdesign，element，那有人就會(huì)問(wèn)有必要自己重復(fù)造輪子做一遍嗎？

我覺(jué)得是有必要的，為什么呢？

1. 每個(gè)產(chǎn)品有各自獨(dú)有的品牌調(diào)性，如果都用第三方 的設(shè)計(jì)規(guī)范，那同質(zhì)化會(huì)很嚴(yán)重，很難做到差異化，也就很難在競(jìng)爭(zhēng)中脫穎而出。
2. 世上本沒(méi)有萬(wàn)能的設(shè)計(jì)規(guī)范，那些設(shè)計(jì)規(guī)范的組件并不能100%滿足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設(shè)計(jì)規(guī)范，在此基礎(chǔ)上進(jìn)行修改，效率很低，適配的復(fù)雜度和重新開發(fā)相差無(wú)幾。
3. 第三方的的成熟的組件庫(kù)，我認(rèn)為應(yīng)該把它當(dāng)成模式，在他們的基礎(chǔ)上去做自己的設(shè)計(jì)規(guī)范。

四、什么階段適合設(shè)計(jì)規(guī)范？

個(gè)人工作中兩個(gè)比較建議的規(guī)范建立時(shí)間點(diǎn)，探索期和成長(zhǎng)期。

1、引入期間

產(chǎn)品在引入階段，產(chǎn)品還在處于極大變動(dòng)的時(shí)候，這個(gè)時(shí)候做設(shè)計(jì)規(guī)范，其中就蘊(yùn)含可極大的風(fēng)險(xiǎn)。但是也不是不做規(guī)范，這階段規(guī)范主要涉及到色彩，字體，間距，布局，柵格等通用設(shè)計(jì)原則以及常用業(yè)務(wù)組件的定制。此階段搭建的規(guī)范具備高效性以及靈活性的特點(diǎn)。

不適合搭建特殊的業(yè)務(wù)組件，比如：當(dāng)領(lǐng)導(dǎo)想要突然調(diào)轉(zhuǎn)方向也不會(huì)很慌，改動(dòng)較小就可以完成整體的規(guī)范轉(zhuǎn)向）此時(shí)搭建規(guī)范組件庫(kù)需要考慮到預(yù)留后續(xù)更改的空間。

2、成長(zhǎng)期

當(dāng)產(chǎn)品進(jìn)入成長(zhǎng)期處于較為穩(wěn)定的版本，整個(gè)團(tuán)隊(duì)對(duì)業(yè)務(wù)的理解也都很熟悉了，這個(gè)適合創(chuàng)建符合業(yè)務(wù)場(chǎng)景的組件庫(kù)，有了前期的積累這個(gè)組件庫(kù)會(huì)更加符合產(chǎn)品及業(yè)務(wù)邏輯。

02 如何開始整理設(shè)計(jì)規(guī)范

在制定規(guī)范前，設(shè)計(jì)師需要明確產(chǎn)品中主要有哪幾種分類，將最基礎(chǔ)的分類定義好方便后續(xù)針對(duì)分類內(nèi)容進(jìn)行整理。

B端產(chǎn)品與C端產(chǎn)品既有共同性也有著很大的差異化，可以借鑒但是切忌生搬硬套C端的設(shè)計(jì)規(guī)范。

03 大廠設(shè)計(jì)規(guī)范推薦

一、pc端

1 、Antdisign

Ant Design是由螞蟻集團(tuán)體驗(yàn)技術(shù)部經(jīng)過(guò)大量的項(xiàng)目實(shí)踐與總結(jié)，逐步打磨出來(lái)的，基于「自然」、「確定性」、「意義感」、「生長(zhǎng)性」四大設(shè)計(jì)價(jià)值觀，通過(guò)模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)，是非常完整的一套設(shè)計(jì)規(guī)范。

2、 TDesign

TDesign是騰訊企業(yè)級(jí)設(shè)計(jì)體系，也是去年才發(fā)布的。雖然才發(fā)布，但是作為一款誕生于騰訊內(nèi)部開源，卻是經(jīng)過(guò)了超500項(xiàng)內(nèi)部業(yè)務(wù)檢驗(yàn)的企業(yè)級(jí)設(shè)計(jì)體系，TDesign 匯集了騰訊眾多優(yōu)秀組件庫(kù)能力和設(shè)計(jì)研發(fā)經(jīng)驗(yàn)。

內(nèi)含豐富可復(fù)用的設(shè)計(jì)組件資源，如色彩體系、文字系統(tǒng)、動(dòng)效設(shè)計(jì)等，覆蓋支持 Axure、Sketch、Figma、Adobe XD 等各大產(chǎn)品設(shè)計(jì)軟件?？梢园凑招枨蟛榭磳?duì)應(yīng)組件的使用教程和代碼演示，只需簡(jiǎn)單的引入操作，即可搭建屬于自己的產(chǎn)品界面。

3 、Zent

是有贊 PC 端 Web UI 規(guī)范的 React 實(shí)現(xiàn)版本，提供了一整套基礎(chǔ)的 UI 組件以及常用的業(yè)務(wù)組件。通過(guò) Zent，可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開發(fā)效率。目前有 50+組件，這些組件都已經(jīng)在有贊的各類 PC 業(yè)務(wù)中廣泛使用。

4、Element

Element是由餓了么公司前端團(tuán)隊(duì)開源一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0的組件庫(kù)，提供了配套設(shè)計(jì)資源。

5、AT-UI

AT-UI 是一款基于 Vue 2.x 的前端 UI 組件庫(kù)，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品，在眾多的的組件庫(kù)中，AT-UI 屬于視覺(jué)風(fēng)格比較清新的一款。

二、移動(dòng)端

1 、Material Design

谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標(biāo)是創(chuàng)造一個(gè)將經(jīng)典的設(shè)計(jì)原則和科技、創(chuàng)新相結(jié)合的設(shè)計(jì)語(yǔ)言，并且在不同設(shè)備上提供一致的體驗(yàn)底層系統(tǒng)，并同時(shí)支持觸摸、語(yǔ)音、鼠標(biāo)、鍵盤等輸入方式。

2、iOS Human Interface Guidelines

iOS 的人機(jī)規(guī)范指南，保持了蘋果一貫的風(fēng)格。雖然沒(méi)有 Material Design 規(guī)范那么細(xì)致全面，但是核心的設(shè)計(jì)原則在每個(gè)組件的設(shè)計(jì)說(shuō)明中都有滲透。作為 iOS 系統(tǒng)的設(shè)計(jì)基礎(chǔ)，建議每個(gè)設(shè)計(jì)師都需要仔細(xì)研究。

3、Vant

Vant 是有贊前端團(tuán)隊(duì)開源的移動(dòng)端組件庫(kù)，于 2017 年開源，已持續(xù)維護(hù) 4 年時(shí)間。Vant 對(duì)內(nèi)承載了有贊所有核心業(yè)務(wù)，對(duì)外服務(wù)十多萬(wàn)開發(fā)者，是業(yè)界主流的移動(dòng)端組件庫(kù)之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。

4、NutUI-JDL

NutUI-JDL 是一套基于京東物流視覺(jué)規(guī)范的移動(dòng)端組件庫(kù)，包含了36+高質(zhì)量組件和詳盡的文檔和實(shí)例。

由于篇幅過(guò)長(zhǎng)，我將文章分成三個(gè)部分，有興趣的朋友可以關(guān)注我們，期待剩下的兩期吧！

感謝你的閱讀支持，歡迎留言互動(dòng)！