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