今天主要是和大家分享一下我們公司內部建立設計體系的方法和實踐案例，希望大家能指正與交流～
B+Design System是以當前互聯(lián)網(wǎng)主流B端框架為基礎，并結合合公司特定業(yè)務場景而打造的具有"公司品牌特色的B端后臺設計體系"(以下簡稱為"B+Design")，包含了有關顏色、字體、icon、柵格、版式、間距、數(shù)據(jù)可視化等設計規(guī)范指南，組件層提供 30+ 不同的組件，包括它們的不同狀態(tài)，形成的模式，以及應用的產(chǎn)品。
隨著公司快速發(fā)展，目前公司用于業(yè)務支撐的后臺管理系統(tǒng)"品類繁多且零散獨立",需構建一套"靈活、專業(yè)"的設計體系來統(tǒng)一設計生態(tài)風格及交付標準。
溝通時間成本高
：跨部門的項目實施過程中流程混亂,產(chǎn)品、設計、開發(fā)、測試等崗位在工作對接時溝通低效且問題耦合度高；
交付質量差
：無項目統(tǒng)一交付標準，不同項目質量產(chǎn)出不穩(wěn)定，項目質量高度依賴于各個環(huán)節(jié)負責人的個人能力;
做不好設計協(xié)同
：各個系統(tǒng)級頁面架構、組件、樣式野蠻生長，缺少規(guī)范范導致樣式及體驗不統(tǒng)一;
研發(fā)效率低
：組件重復開發(fā)，維護成本也高，無基礎沉淀能力；
伴著公司業(yè)務發(fā)展，開源的組件庫已無法滿業(yè)務需要，搭建一套更適合公司業(yè)務的UI組件庫，勢在必行；設計系統(tǒng)承載著作為一個沉淀基礎能力的支持平臺，同時也具有賦能多多邊業(yè)務、多種角色的重要作用和價值；
標準統(tǒng)一：
重新定義標準化的產(chǎn)品用戶體驗，統(tǒng)一品牌形象、設計標準，降低決策成本，提高產(chǎn)品迭代效率及質量；
降本增效：
基礎能力沉淀，規(guī)范設計元素，減少重復性設計，且提高代碼可復用性，避免重復開發(fā)，降低時間及人力成本；
高效協(xié)同：
降低不同設計師或上下游同事之間的溝通成本，提高團隊之間的協(xié)作力，提升團隊整體效率；
設計延展：
通過設計規(guī)范建立，滿足組件在不同場景及業(yè)務中的延展和擴充，從而實現(xiàn)全鏈路、多場景的高效輸出；
為了更適用于企業(yè)級產(chǎn)品的開發(fā)和使用，通過大量中后臺場景的的實踐，B+Design設計系統(tǒng)提煉出以下設計原則：
清晰：
效率提升是務實之基。設計應減少不確定因素，降低用戶判斷次數(shù)，明確信息層級導向，使操作目的更清晰；清晰的設計體系讓產(chǎn)品操作直觀、流程一步到位；信息傳達清晰表意明確，助用戶短時間內快速理解并作出判斷。
設計效率：可快速生成效果圖，也可使用Sketch，組件庫，頁面模板等快速生成效果圖和業(yè)務解決方案來提高產(chǎn)品體驗一致性；
開發(fā)效率：組件均已代碼封裝；并提供體驗評估標準以供參考，保證產(chǎn)品質量；
使用效率：系統(tǒng)常用組件(如批量搜索和操作)提高用戶工作效率；
工作協(xié)同：減少產(chǎn)品開發(fā)流程中各個角色之間的溝通成本；
標準化：
樣式規(guī)范、操作流程、呈現(xiàn)高度一致的設計標準，能體現(xiàn)產(chǎn)品的品牌感與信賴感，實現(xiàn)品牌感的系統(tǒng)傳達，還能降低用戶反復學習成本，給用戶帶來品牌信賴。
創(chuàng)新：
通過對當前市場主流設計系統(tǒng)開展競品分析，結合FS業(yè)務場景對各個組件進行統(tǒng)一規(guī)范，打造符合FS品牌特性的產(chǎn)品設計體系；
原子最早是由英國化學家/物理學家約翰·道爾頓提出的，繼承古希臘原子論和牛頓微粒說，提出的原子論。化學元素由不可分的微粒(原子)構成的，它在一切化學變化中是不可再分的最小單位。
原子理論同樣適用于我們的設計系統(tǒng)中：我們的頁面是由原子(最小單位設計元素)、分子(基礎控件)、組織(基礎功能組件)、模版(業(yè)務定制組件)、頁面構成的；
注意：設計組件不是把UI元素堆積到一個地方，然后各處集中引用用這么簡單。組件化的工作方式信奉獨立、完整、自由組合，目標就是盡可能把設計與開發(fā)中的元素獨立化，使它具備完完整的局部功能，通過特定規(guī)則自由組合來構成整個產(chǎn)品。
基于前期的思考，接下來我們的任務是對整個體系的制定進行任務規(guī)劃，以下是四大步驟：
通過現(xiàn)狀所有系統(tǒng)進行設計走查及用戶問卷調研，收集用戶建議及觀點，明確規(guī)范需要優(yōu)化的方向。
通過三大競品設計體系（阿里，字節(jié)，騰訊）框架的梳理，結合現(xiàn)有設計頁面，分析業(yè)務場景和競品框架，確定FS的最小元素，整理和歸類自己的組件框架。
最終B+Design組件框架主要分為八大板塊，分別為：基礎樣式、通用、布局、導航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、其他,共50+組件；
針對已梳理好的框架展開組件設計工作，同時為每個組件編寫相應的規(guī)范指南，為使用者提供場景參考。
組件設計是設計規(guī)范中最核心，工作量最大的一個環(huán)節(jié)。我們可以將它拆解成幾個部分，先做出基礎組件，再基于基礎組件和業(yè)務需求抽象設計業(yè)務組件，最后抽象成頁面模板。
說到基礎組件，這就是前面所提到的原子化思維，在進行設計系統(tǒng)的構建時，我們期望達到這樣一種效果：當對任何一個原子進行改動時，所有依賴于該原子的部件都能夠全部自動更新。唯有滿足這一條件，設計系統(tǒng)所設想的提升效率、解放生產(chǎn)力的目標才能真正得以實現(xiàn)。
在構建完基礎組件后，可以根據(jù)業(yè)務需求，將部門內使用頻率較高的組件進行評估，抽象成業(yè)務組件。
例如我們用的比較多的就是人員選擇器、附件下載、文本編輯器等等...
完成基礎組件和業(yè)務組件的構建工作后，我們可以依照全局說明，通過組件搭建頁面模板。頁面模板不僅能夠切實提升組件的使用效率，而且能提供出色的組件使用示范作用，增進設計說明和組件的結合。
在后臺設計體系中，“規(guī)范指南”是一套為了確保設計的一致性、可用性和可維護性而制定的規(guī)則和指導原則。將所有的規(guī)范內容整理成詳細的文檔，配以示例和說明，方便團隊成員查閱和參考，此步驟也工作量巨大。主要分為七大模塊：
“B+Design System”建立成功后在"多個業(yè)務系統(tǒng)"中進行應用，通過實際業(yè)務反饋來進行效果驗證。
一個統(tǒng)一的設計語言不應該僅僅是一組靜態(tài)規(guī)則和單個組件構成成的，它應該是一個不斷發(fā)展的生態(tài)系統(tǒng)。需要我們在產(chǎn)品實踐中不斷優(yōu)化、迭代，讓組件更加貼合場景，更好的服務業(yè)務。
以上就是我們公司內部構建整個設計體系的全過程啦~~~~~
在完成設計規(guī)范的構建后，我們聯(lián)合了產(chǎn)品經(jīng)理和前端工程師，幫助每個環(huán)節(jié)的人員快速搭建產(chǎn)出物。
對于產(chǎn)品經(jīng)理
：我們幫助產(chǎn)品搭建了一套Axure元件庫，該元件庫與設計組件庫一樣，可以快速搭建原型，提高了產(chǎn)品的工作效率，與設計師、開發(fā)的溝通也更加順暢。甚至對于簡單的頁面產(chǎn)品可以自己直接出原型給開發(fā)，開發(fā)直接沿用寫好了的組件庫。
對于前端
：輔助前端建立前端組件庫，這樣減少了設計走查的問題，對于以前各種樣式問題需要調整，現(xiàn)在基本都是寫好了的組件，可以有更多時間去寫交互和提高系統(tǒng)的性能。
