帶你全面提升工作效率：B端設計規範攻略(一)

來源：讀職場釋出時間：2023-03-19 05:11

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，那有人就會問有必要自己重複造輪子做一遍嗎？

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

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

四、什麼階段適合設計規範？

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