帶你全面提升工作效率：B端設計規范攻略（一）

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

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

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

0* 設計規范的概述 一、定義

*.* 設計規范的概念

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

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

設計規范一般會(huì )具體到公司級別、某一類(lèi)產(chǎn)品線(xiàn)、某個(gè)產(chǎn)品等。今天主要講具體某個(gè)產(chǎn)品的設計規范，主要是為該產(chǎn)品制定統一的用戶(hù)體驗、品牌、視覺(jué)等方面的規范，當然是在滿(mǎn)足以上公司級別和某一類(lèi)產(chǎn)品線(xiàn)層次的設計規范的基礎上。

*.2 設計規范的組成

設計規范由設計原則、設計語(yǔ)言和組件庫構成，在設計原則的指導下使用設計語(yǔ)言和組件庫創(chuàng )建體驗一致的用戶(hù)界面。

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

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

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

*.3 B端及C端

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

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

C端產(chǎn)品的設計規范，目標幾乎都是為了更好的打磨用戶(hù)體驗的一致性和標準化；

B端產(chǎn)品設計規范，由于用戶(hù)體驗更復雜，學(xué)習成本更高，所以它的目標側重點(diǎn)是：除了布局的不同外，相同業(yè)務(wù)場(chǎng)景下，相同產(chǎn)品功能需要有一致的，標準化的體驗，降低學(xué)習成本，提高工作效率，即統一體驗。

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

*、對于產(chǎn)品經(jīng)理

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

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

2、對于設計師

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

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

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

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

3、對于開(kāi)發(fā)

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

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

4、對于測試

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

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

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

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

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

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

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

每個(gè)產(chǎn)品有各自獨有的品牌調性，如果都用第三方 的設計規范，那同質(zhì)化會(huì )很?chē)乐?，很難做到差異化，也就很難在競爭中脫穎而出。

世上本沒(méi)有萬(wàn)能的設計規范，那些設計規范的組件并不能*00%滿(mǎn)足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設計規范，在此基礎吉印通行修改，效率很低，適配的復雜度和重新開(kāi)發(fā)相差無(wú)幾。

第三方的的成熟的組件庫，我認為應該把它當成模式，在他們的基礎上去做自己的設計規范。

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

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

*、引入期間

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

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

2、成長(cháng)期

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

02 如何開(kāi)始整理設計規范

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

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

03 大廠(chǎng)設計規范推薦

一、pc端

* 、Antdisign

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

2、 TDesign

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

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

3 、Zent

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

4、Element

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

5、AT-UI

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

二、移動(dòng)端 * 、Material Design

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

2、iOS Human Interface Guidelines

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

3、Vant

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

4、NutUI-JDL

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

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

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

本文由 @三原設計 原創(chuàng )發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。

題圖來(lái)自Unsplash ，基于 CC0 協(xié)議