我們是如何搭建企業(yè)級B端設(shè)計規(guī)范的?
2025-3-14 天宇 B端ui設(shè)計文章及欣賞
今天主要是和大家分享一下我們公司內(nèi)部建立設(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)品。
一、為什么要建立 B+Design 設(shè)計體系?
隨著公司快速發(fā)展,目前公司用于業(yè)務(wù)支撐的后臺管理系統(tǒng)"品類繁多且零散獨立",需構(gòu)建一套"靈活、專業(yè)"的設(shè)計體系來統(tǒng)一設(shè)計生態(tài)風(fēng)格及交付標準。
當(dāng)前痛點:
溝通時間成本高
:跨部門的項目實施過程中流程混亂,產(chǎn)品、設(shè)計、開發(fā)、測試等崗位在工作對接時溝通低效且問題耦合度高;
交付質(zhì)量差
:無項目統(tǒng)一交付標準,不同項目質(zhì)量產(chǎn)出不穩(wěn)定,項目質(zhì)量高度依賴于各個環(huán)節(jié)負責(zé)人的個人能力;
做不好設(shè)計協(xié)同
:各個系統(tǒng)級頁面架構(gòu)、組件、樣式野蠻生長,缺少規(guī)范范導(dǎo)致樣式及體驗不統(tǒng)一;
研發(fā)效率低
:組件重復(fù)開發(fā),維護成本也高,無基礎(chǔ)沉淀能力;
二、構(gòu)建 B+Design 的思路
1、設(shè)計目標
伴著公司業(yè)務(wù)發(fā)展,開源的組件庫已無法滿業(yè)務(wù)需要,搭建一套更適合公司業(yè)務(wù)的UI組件庫,勢在必行;設(shè)計系統(tǒng)承載著作為一個沉淀基礎(chǔ)能力的支持平臺,同時也具有賦能多多邊業(yè)務(wù)、多種角色的重要作用和價值;
標準統(tǒng)一:
重新定義標準化的產(chǎn)品用戶體驗,統(tǒng)一品牌形象、設(shè)計標準,降低決策成本,提高產(chǎn)品迭代效率及質(zhì)量;
降本增效:
基礎(chǔ)能力沉淀,規(guī)范設(shè)計元素,減少重復(fù)性設(shè)計,且提高代碼可復(fù)用性,避免重復(fù)開發(fā),降低時間及人力成本;
高效協(xié)同:
降低不同設(shè)計師或上下游同事之間的溝通成本,提高團隊之間的協(xié)作力,提升團隊整體效率;
設(shè)計延展:
通過設(shè)計規(guī)范建立,滿足組件在不同場景及業(yè)務(wù)中的延展和擴充,從而實現(xiàn)全鏈路、多場景的高效輸出;
2、設(shè)計原則
為了更適用于企業(yè)級產(chǎn)品的開發(fā)和使用,通過大量中后臺場景的的實踐,B+Design設(shè)計系統(tǒng)提煉出以下設(shè)計原則:
清晰:
效率提升是務(wù)實之基。設(shè)計應(yīng)減少不確定因素,降低用戶判斷次數(shù),明確信息層級導(dǎo)向,使操作目的更清晰;清晰的設(shè)計體系讓產(chǎn)品操作直觀、流程一步到位;信息傳達清晰表意明確,助用戶短時間內(nèi)快速理解并作出判斷。
高效
設(shè)計效率:可快速生成效果圖,也可使用Sketch,組件庫,頁面模板等快速生成效果圖和業(yè)務(wù)解決方案來提高產(chǎn)品體驗一致性;
開發(fā)效率:組件均已代碼封裝;并提供體驗評估標準以供參考,保證產(chǎn)品質(zhì)量;
使用效率:系統(tǒng)常用組件(如批量搜索和操作)提高用戶工作效率;
工作協(xié)同:減少產(chǎn)品開發(fā)流程中各個角色之間的溝通成本;
標準化:
樣式規(guī)范、操作流程、呈現(xiàn)高度一致的設(shè)計標準,能體現(xiàn)產(chǎn)品的品牌感與信賴感,實現(xiàn)品牌感的系統(tǒng)傳達,還能降低用戶反復(fù)學(xué)習(xí)成本,給用戶帶來品牌信賴。
創(chuàng)新:
通過對當(dāng)前市場主流設(shè)計系統(tǒng)開展競品分析,結(jié)合FS業(yè)務(wù)場景對各個組件進行統(tǒng)一規(guī)范,打造符合FS品牌特性的產(chǎn)品設(shè)計體系;
3、原子化組件思維
原子最早是由英國化學(xué)家/物理學(xué)家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒說,提出的原子論?;瘜W(xué)元素由不可分的微粒(原子)構(gòu)成的,它在一切化學(xué)變化中是不可再分的最小單位。
原子理論同樣適用于我們的設(shè)計系統(tǒng)中:我們的頁面是由原子(最小單位設(shè)計元素)、分子(基礎(chǔ)控件)、組織(基礎(chǔ)功能組件)、模版(業(yè)務(wù)定制組件)、頁面構(gòu)成的;
注意:設(shè)計組件不是把UI元素堆積到一個地方,然后各處集中引用用這么簡單。組件化的工作方式信奉獨立、完整、自由組合,目標就是盡可能把設(shè)計與開發(fā)中的元素獨立化,使它具備完完整的局部功能,通過特定規(guī)則自由組合來構(gòu)成整個產(chǎn)品。
三、構(gòu)建 B+Design 的步驟
基于前期的思考,接下來我們的任務(wù)是對整個體系的制定進行任務(wù)規(guī)劃,以下是四大步驟:
第一步:現(xiàn)狀分析
通過現(xiàn)狀所有系統(tǒng)進行設(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è)計組件和規(guī)范指南
針對已梳理好的框架展開組件設(shè)計工作,同時為每個組件編寫相應(yīng)的規(guī)范指南,為使用者提供場景參考。
1、設(shè)計組件
組件設(shè)計是設(shè)計規(guī)范中最核心,工作量最大的一個環(huán)節(jié)。我們可以將它拆解成幾個部分,先做出基礎(chǔ)組件,再基于基礎(chǔ)組件和業(yè)務(wù)需求抽象設(shè)計業(yè)務(wù)組件,最后抽象成頁面模板。
-
基礎(chǔ)組件
說到基礎(chǔ)組件,這就是前面所提到的原子化思維,在進行設(shè)計系統(tǒng)的構(gòu)建時,我們期望達到這樣一種效果:當(dāng)對任何一個原子進行改動時,所有依賴于該原子的部件都能夠全部自動更新。唯有滿足這一條件,設(shè)計系統(tǒng)所設(shè)想的提升效率、解放生產(chǎn)力的目標才能真正得以實現(xiàn)。
-
業(yè)務(wù)組件
在構(gòu)建完基礎(chǔ)組件后,可以根據(jù)業(yè)務(wù)需求,將部門內(nèi)使用頻率較高的組件進行評估,抽象成業(yè)務(wù)組件。
例如我們用的比較多的就是人員選擇器、附件下載、文本編輯器等等...
-
頁面模板
完成基礎(chǔ)組件和業(yè)務(wù)組件的構(gòu)建工作后,我們可以依照全局說明,通過組件搭建頁面模板。頁面模板不僅能夠切實提升組件的使用效率,而且能提供出色的組件使用示范作用,增進設(shè)計說明和組件的結(jié)合。
2、規(guī)范指南
在后臺設(shè)計體系中,“規(guī)范指南”是一套為了確保設(shè)計的一致性、可用性和可維護性而制定的規(guī)則和指導(dǎo)原則。將所有的規(guī)范內(nèi)容整理成詳細的文檔,配以示例和說明,方便團隊成員查閱和參考,此步驟也工作量巨大。主要分為七大模塊:
第四步:效果驗證
“B+Design System”建立成功后在"多個業(yè)務(wù)系統(tǒng)"中進行應(yīng)用,通過實際業(yè)務(wù)反饋來進行效果驗證。
四、升級迭代機制
一個統(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)的性能。
作者:設(shè)計恐慌癥
鏈接:https://www.zcool.com.cn/article/ZMTYyNzI5Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
分類
-
大數(shù)據(jù)可視化設(shè)計文章及欣賞(158)
-
B端ui設(shè)計文章及欣賞(622)
-
系統(tǒng)UI設(shè)計文章及欣賞(120)
-
移動端UI設(shè)計文章及欣賞(705)
-
圖標設(shè)計文章及欣賞(122)
-
網(wǎng)站設(shè)計文章及欣賞(484)
-
平面設(shè)計(258)
-
行業(yè)趨勢(466)
-
設(shè)計資源(875)
-
交互設(shè)計及用戶體驗(925)
-
前端及開發(fā)文章及欣賞(1031)
-
隨筆的一些文章(63)
-
設(shè)計思維(1912)
-
用戶研究(244)
-
設(shè)計管理與成長(384)
-
seo優(yōu)化(498)
日歷
鏈接
個人資料
藍藍設(shè)計的小編
http://363858.cn
存檔
- 2025年3月(47)
- 2025年2月(81)
- 2025年1月(66)
- 2024年12月(61)
- 2024年11月(84)
- 2024年10月(168)
- 2024年9月(145)
- 2024年8月(165)
- 2024年7月(108)
- 2024年6月(65)
- 2024年5月(73)
- 2024年4月(44)
- 2024年3月(50)
- 2024年2月(58)
- 2024年1月(44)
- 2023年12月(47)
- 2023年11月(41)
- 2023年10月(14)
- 2023年9月(27)
- 2023年8月(88)
- 2023年7月(62)
- 2023年6月(58)
- 2023年5月(28)
- 2023年4月(47)
- 2023年3月(37)
- 2023年2月(90)
- 2023年1月(78)
- 2022年12月(45)
- 2022年11月(69)
- 2022年10月(51)
- 2022年9月(135)
- 2022年8月(60)
- 2022年7月(111)
- 2022年6月(162)
- 2022年5月(143)
- 2022年4月(86)
- 2022年3月(119)
- 2022年2月(53)
- 2022年1月(99)
- 2021年12月(105)
- 2021年11月(83)
- 2021年10月(101)
- 2021年9月(153)
- 2021年8月(147)
- 2021年7月(149)
- 2021年6月(157)
- 2021年5月(124)
- 2021年4月(185)
- 2021年3月(144)
- 2021年2月(35)
- 2021年1月(103)
- 2020年12月(95)
- 2020年11月(76)
- 2020年10月(31)
- 2020年9月(45)
- 2020年8月(50)
- 2020年7月(46)
- 2020年6月(33)
- 2020年5月(78)
- 2020年4月(69)
- 2020年3月(100)
- 2020年2月(59)
- 2020年1月(31)
- 2019年12月(50)
- 2019年11月(57)
- 2019年10月(48)
- 2019年9月(48)
- 2019年8月(57)
- 2019年7月(58)
- 2019年6月(58)
- 2019年5月(31)
- 2019年4月(37)
- 2019年3月(43)
- 2019年2月(25)
- 2019年1月(45)
- 2018年12月(41)
- 2018年11月(40)
- 2018年10月(29)
- 2018年9月(40)
- 2018年8月(87)
- 2018年7月(107)
- 2018年6月(86)
- 2018年5月(109)
- 2018年4月(40)
- 2018年3月(35)
- 2017年8月(35)
- 2017年7月(45)
- 2017年6月(7)
- 2017年5月(27)
- 2017年4月(51)
- 2017年3月(69)
- 2017年2月(65)
- 2017年1月(69)
- 2016年12月(55)
- 2016年11月(111)
- 2016年10月(92)
- 2016年9月(53)
- 2016年8月(9)
- 2016年7月(4)
- 2016年6月(9)
- 2016年3月(19)
- 2016年2月(26)
- 2016年1月(29)
- 2015年12月(34)
- 2015年11月(35)
- 2015年10月(46)
- 2015年9月(43)
- 2015年8月(40)
- 2015年7月(33)
- 2015年6月(46)
- 2015年5月(58)
- 2015年4月(70)
- 2015年3月(55)
- 2015年2月(17)
- 2015年1月(33)
- 2014年12月(21)
- 2014年11月(83)
- 2014年10月(94)
- 2014年9月(6)
- 2014年8月(1)
- 2014年7月(13)
- 2014年6月(66)
- 2014年5月(99)
- 2014年4月(88)
- 2014年3月(101)
- 2014年2月(67)
- 2014年1月(83)
- 2013年12月(106)
- 2013年11月(111)
- 2013年10月(61)
- 2013年9月(20)
- 2013年7月(13)
- 2013年6月(27)
- 2013年5月(48)
- 2013年4月(39)
- 2013年3月(8)
- 2013年2月(20)
- 2013年1月(31)
- 2012年12月(33)
- 2012年11月(31)
- 2012年10月(22)
- 2012年9月(8)
- 2012年7月(14)
- 2012年6月(15)
- 2012年5月(31)
- 2012年4月(24)
- 2012年2月(4)
- 2012年1月(8)
- 2011年12月(35)
- 2011年11月(32)
- 2011年10月(13)
- 2011年8月(1)
- 2011年6月(1)