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