在快速發展的數字化時代，構建一套企業級的B端設計規范對于提升設計協同效率、確保產品質量和統一品牌形象至關重要。設計夾的這篇文章詳細介紹了如何從零開始搭建一個B端設計體系，包括分析現狀、梳理框架、設計組件、編寫規范指南以及進行效果驗證的全過程。

今天主要是和大家分享一下公司內部建立設計體系的方法和實踐案例，希望大家能指正與交流～

FS B+Design System是以當前互聯網主流B端框架為基礎，并編合FS特定業務場景而打造的具有”FS品牌特色的B端后臺設計體系”(以下簡稱為”B+Design”)，包含了有關顏色、字體、icon、柵格、版式、間距、數據可視化等設計規范指南，組件層提供 30+ 不同的組件，包括它們的不同狀態，形成的模式，以及應用的產品。

一、為什么要建立B+Design設計體系?

隨著公司快速發展，目前公司用于業務支撐的后臺管理系統”品類繁多且零散獨立”,需構建一套”靈活、專業”的設計體系來統一設計生態風格及交付標準。

當前痛點:

• 溝通時間成本高：跨部門的項目實施過程中流程混亂，產品、設計、開發、測試等崗位在工作對接時溝通低效且問題耦合度高；
• 交付質量差：無項目統一交付標準，不同項目質量產出不穩定，項目質量高度依賴于各個環節負責人的個人能力;
• 做不好設計協同：各個系統級頁面架構、組件、樣式野蠻生長，缺少規范范導致樣式及體驗不統一;
• 研發效率低：組件重復開發，維護成本也高，無基礎沉淀能力。

二、構建 B+Design 的思路

1. 設計目標

伴著公司業務發展，開源的組件庫已無法滿業務需要，搭建一套更適合公司業務的UI組件庫，勢在必行；設計系統承載著作為一個沉淀基礎能力的支持平臺，同時也具有賦能多邊業務、多種角色的重要作用和價值。

• 標準統一：重新定義標準化的產品用戶體驗，統一品牌形象、設計標準，降低決策成本，提高產品迭代效率及質量；
• 降本增效：基礎能力沉淀，規范設計元素，減少重復性設計，且提高代碼可復用性，避免重復開發，降低時間及人力成本；
• 高效協同：降低不同設計師或上下游同事之間的溝通成本，提高團隊之間的協作力，提升團隊整體效率；
• 設計延展：通過設計規范建立，滿足組件在不同場景及業務中的延展和擴充，從而實現全鏈路、多場景的高效輸出。

2. 設計原則

為了更適用于企業級產品的開發和使用，通過大量中后臺場景的的實踐，B+Design設計系統提煉出以下設計原則。

• 清晰：效率提升是務實之基。設計應減少不確定因素，降低用戶判斷次數，明確信息層級導向，使操作目的更清晰；清晰的設計體系讓產品操作直觀、流程一步到位；信息傳達清晰表意明確，助用戶短時間內快速理解并作出判斷。
• 高效：設計效率：可快速生成效果圖，也可使用Sketch，組件庫，頁面模板等快速生成效果圖和業務解決方案來提高產品體驗一致性；開發效率：組件均已代碼封裝；并提供體驗評估標準以供參考，保證產品質量；使用效率：系統常用組件(如批量搜索和操作)提高用戶工作效率；工作協同：減少產品開發流程中各個角色之間的溝通成本；
• 標準化：樣式規范、操作流程、呈現高度一致的設計標準，能體現產品的品牌感與信賴感，實現品牌感的系統傳達，還能降低用戶反復學習成本，給用戶帶來品牌信賴。創新：通過對當前市場主流設計系統開展競品分析，結合FS業務場景對各個組件進行統一規范，打造符合FS品牌特性的產品設計體系。

3. 原子化組件思維

原子最早是由英國化學家/物理學家約翰·道爾頓提出的，繼承古希臘原子論和牛頓微粒說，提出的原子論?；瘜W元素由不可分的微粒(原子)構成的，它在一切化學變化中是不可再分的最小單位。

原子理論同樣適用于我們的設計系統中：我們的頁面是由原子(最小單位設計元素)、分子(基礎控件)、組織(基礎功能組件)、模版(業務定制組件)、頁面構成的。

注意：設計組件不是把UI元素堆積到一個地方，然后各處集中引用用這么簡單。組件化的工作方式信奉獨立、完整、自由組合，目標就是盡可能把設計與開發中的元素獨立化，使它具備完完整的局部功能，通過特定規則自由組合來構成整個產品。

三、構建 B+Design 的步驟

基于前期的思考，接下來我們的任務是對整個體系的制定進行任務規劃，以下是四大步驟：

1. 現狀分析

通過現狀所有系統進行設計走查及用戶問卷調研，收集用戶建議及觀點，明確規范需要優化的方向。

2. 框架梳理

通過三大競品設計體系（阿里，字節，騰訊）框架的梳理，結合現有設計頁面，分析業務場景和競品框架，確定FS的最小元素，整理和歸類自己的組件框架。

最終B+Design組件框架主要分為八大板塊，分別為：基礎樣式、通用、布局、導航、數據錄入、數據展示、反饋、其他，共50+組件。

3. 設計組件和規范指南

針對已梳理好的框架展開組件設計工作，同時為每個組件編寫相應的規范指南，為使用者提供場景參考。

①設計組件

組件設計是設計規范中最核心，工作量最大的一個環節。我們可以將它拆解成幾個部分，先做出基礎組件，再基于基礎組件和業務需求抽象設計業務組件，最后抽象成頁面模板。

a. 基礎組件

說到基礎組件，這就是前面所提到的原子化思維，在進行設計系統的構建時，我們期望達到這樣一種效果：當對任何一個原子進行改動時，所有依賴于該原子的部件都能夠全部自動更新。唯有滿足這一條件，設計系統所設想的提升效率、解放生產力的目標才能真正得以實現。

結合公司的前臺品牌形象特征，針對缺省頁進行插畫設計：

b. 業務組件

在構建完基礎組件后，可以根據業務需求，將部門內使用頻率較高的組件進行評估，抽象成業務組件。

例如我們用的比較多的就是人員選擇器、附件下載、文本編輯器等等…

c. 頁面模板

完成基礎組件和業務組件的構建工作后，我們可以依照全局說明，通過組件搭建頁面模板。頁面模板不僅能夠切實提升組件的使用效率，而且能提供出色的組件使用示范作用，增進設計說明和組件的結合。

②規范指南

在后臺設計體系中，“規范指南”是一套為了確保設計的一致性、可用性和可維護性而制定的規則和指導原則。將所有的規范內容整理成詳細的文檔，配以示例和說明，方便團隊成員查閱和參考，此步驟也工作量巨大。

主要分為七大模塊：

4. 效果驗證

“B+Design System”建立成功后在”多個業務系統”中進行應用，通過實際業務反饋來進行效果驗證。

四、B+Design 的升級迭代機制

一個統一的設計語言不應該僅僅是一組靜態規則和單個組件構成成的，它應該是一個不斷發展的生態系統。需要我們在產品實踐中不斷優化、迭代，讓組件更加貼合場景，更好的服務業務。

以上就是我們公司內部構建整個設計體系的全過程啦~~~~~

在完成設計規范的構建后，我們聯合了產品經理和前端工程師，幫助每個環節的人員快速搭建產出物。

對于產品經理：我們幫助產品搭建了一套Axure元件庫，該元件庫與設計組件庫一樣，可以快速搭建原型，提高了產品的工作效率，與設計師、開發的溝通也更加順暢。甚至對于簡單的頁面產品可以自己直接出原型給開發，開發直接沿用寫好了的組件庫。

對于前端：輔助前端建立前端組件庫，這樣減少了設計走查的問題，對于以前各種樣式問題需要調整，現在基本都是寫好了的組件，可以有更多時間去寫交互和提高系統的性能。