構建企業(yè)級B端設計規(guī)范：全面步驟與實踐指南
2024-11-4 藍藍小助手 B端ui設計文章及欣賞
B+Design System是以當前互聯(lián)網(wǎng)主流B端框架為基礎，并結(jié)合合公司特定業(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ā)、測試等崗位在工作對接時溝通低效且問題耦合度高；
交付質(zhì)量差
：無項目統(tǒng)一交付標準，不同項目質(zhì)量產(chǎn)出不穩(wěn)定，項目質(zhì)量高度依賴于各個環(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)品迭代效率及質(zhì)量；
降本增效：
基礎能力沉淀，規(guī)范設計元素，減少重復性設計，且提高代碼可復用性，避免重復開發(fā)，降低時間及人力成本；
高效協(xié)同：
降低不同設計師或上下游同事之間的溝通成本，提高團隊之間的協(xié)作力，提升團隊整體效率；
設計延展：
通過設計規(guī)范建立，滿足組件在不同場景及業(yè)務中的延展和擴充，從而實現(xiàn)全鏈路、多場景的高效輸出；
為了更適用于企業(yè)級產(chǎn)品的開發(fā)和使用，通過大量中后臺場景的的實踐，B+Design設計系統(tǒng)提煉出以下設計原則：
清晰：
效率提升是務實之基。設計應減少不確定因素，降低用戶判斷次數(shù)，明確信息層級導向，使操作目的更清晰；清晰的設計體系讓產(chǎn)品操作直觀、流程一步到位；信息傳達清晰表意明確，助用戶短時間內(nèi)快速理解并作出判斷。
設計效率：可快速生成效果圖，也可使用Sketch，組件庫，頁面模板等快速生成效果圖和業(yè)務解決方案來提高產(chǎn)品體驗一致性；
開發(fā)效率：組件均已代碼封裝；并提供體驗評估標準以供參考，保證產(chǎn)品質(zhì)量；
使用效率：系統(tǒng)常用組件(如批量搜索和操作)提高用戶工作效率；
工作協(xié)同：減少產(chǎn)品開發(fā)流程中各個角色之間的溝通成本；
標準化：
樣式規(guī)范、操作流程、呈現(xiàn)高度一致的設計標準，能體現(xiàn)產(chǎn)品的品牌感與信賴感，實現(xiàn)品牌感的系統(tǒng)傳達，還能降低用戶反復學習成本，給用戶帶來品牌信賴。
創(chuàng)新：
通過對當前市場主流設計系統(tǒng)開展競品分析，結(jié)合FS業(yè)務場景對各個組件進行統(tǒng)一規(guī)范，打造符合FS品牌特性的產(chǎn)品設計體系；
原子最早是由英國化學家/物理學家約翰·道爾頓提出的，繼承古希臘原子論和牛頓微粒說，提出的原子論?；瘜W元素由不可分的微粒(原子)構成的，它在一切化學變化中是不可再分的最小單位。
原子理論同樣適用于我們的設計系統(tǒng)中：我們的頁面是由原子(最小單位設計元素)、分子(基礎控件)、組織(基礎功能組件)、模版(業(yè)務定制組件)、頁面構成的；
注意：設計組件不是把UI元素堆積到一個地方，然后各處集中引用用這么簡單。組件化的工作方式信奉獨立、完整、自由組合，目標就是盡可能把設計與開發(fā)中的元素獨立化，使它具備完完整的局部功能，通過特定規(guī)則自由組合來構成整個產(chǎn)品。
基于前期的思考，接下來我們的任務是對整個體系的制定進行任務規(guī)劃，以下是四大步驟：
通過現(xiàn)狀所有系統(tǒng)進行設計走查及用戶問卷調(diào)研，收集用戶建議及觀點，明確規(guī)范需要優(yōu)化的方向。
通過三大競品設計體系（阿里，字節(jié)，騰訊）框架的梳理，結(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è)務需求，將部門內(nèi)使用頻率較高的組件進行評估，抽象成業(yè)務組件。
例如我們用的比較多的就是人員選擇器、附件下載、文本編輯器等等...
完成基礎組件和業(yè)務組件的構建工作后，我們可以依照全局說明，通過組件搭建頁面模板。頁面模板不僅能夠切實提升組件的使用效率，而且能提供出色的組件使用示范作用，增進設計說明和組件的結(jié)合。
在后臺設計體系中，“規(guī)范指南”是一套為了確保設計的一致性、可用性和可維護性而制定的規(guī)則和指導原則。將所有的規(guī)范內(nèi)容整理成詳細的文檔，配以示例和說明，方便團隊成員查閱和參考，此步驟也工作量巨大。主要分為七大模塊：
“B+Design System”建立成功后在"多個業(yè)務系統(tǒng)"中進行應用，通過實際業(yè)務反饋來進行效果驗證。
一個統(tǒng)一的設計語言不應該僅僅是一組靜態(tài)規(guī)則和單個組件構成成的，它應該是一個不斷發(fā)展的生態(tài)系統(tǒng)。需要我們在產(chǎn)品實踐中不斷優(yōu)化、迭代，讓組件更加貼合場景，更好的服務業(yè)務。
以上就是我們公司內(nèi)部構建整個設計體系的全過程啦~~~~~
在完成設計規(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ā)直接沿用寫好了的組件庫。
對于前端
：輔助前端建立前端組件庫，這樣減少了設計走查的問題，對于以前各種樣式問題需要調(diào)整，現(xiàn)在基本都是寫好了的組件，可以有更多時間去寫交互和提高系統(tǒng)的性
能。
