Bs界面設(shè)計之九:從6個層面,幫新手快速入門B端設(shè)計系統(tǒng)

2022-6-14    博博


什么是設(shè)計系統(tǒng)?


從6個層面,幫新手快速入門B端設(shè)計系統(tǒng)

配圖取自文章《以B端產(chǎn)品為例,幫你深入淺出掌握「設(shè)計系統(tǒng)」》

設(shè)計系統(tǒng) = 設(shè)計價值觀和原則+設(shè)計規(guī)范+場景定義+工具包

設(shè)計系統(tǒng)是在設(shè)計價值觀和原則、設(shè)計標(biāo)準(zhǔn)指導(dǎo)下的各種共享的設(shè)計模式和組件資產(chǎn),是將產(chǎn)品設(shè)計團(tuán)隊聯(lián)合在一起共同打造的一套質(zhì)量和效率上都有所保障的可行性解決方案,能夠解決產(chǎn)品視覺、交互體驗一致性的問題、幫助傳達(dá)統(tǒng)一的品牌認(rèn)知。幫助團(tuán)隊快速完成產(chǎn)品迭代和功能開發(fā)!


為什么要構(gòu)建設(shè)計系統(tǒng)?


從6個層面,幫新手快速入門B端設(shè)計系統(tǒng)

問題 1:

隨著業(yè)務(wù)的拓展,產(chǎn)品和項目數(shù)量不斷增加,發(fā)展中期設(shè)計和交互上不一致性的問題浮出水面,需要采取措施確保產(chǎn)品或產(chǎn)品線之間保持統(tǒng)一的品牌傳達(dá)、外觀和體驗,以滿足用戶預(yù)期并向其傳達(dá)統(tǒng)一的品牌認(rèn)知。

問題 2:

無統(tǒng)一的設(shè)計規(guī)范和交互原則,沒有統(tǒng)一的 UI 組件庫和代碼庫,各團(tuán)隊設(shè)計和前端需花費大量資源陷入低質(zhì)量溝通協(xié)作和重復(fù)造輪子,拖慢產(chǎn)品和項目設(shè)計和開發(fā)節(jié)奏。

問題 3:

產(chǎn)品項目數(shù)量 vs 產(chǎn)品設(shè)計師,人員配比嚴(yán)重不足的情況下,團(tuán)隊的設(shè)計師們無法從雜/亂/急的日常需求中剝離出來,影響構(gòu)建產(chǎn)品壁壘的質(zhì)量和速度。


設(shè)計系統(tǒng)的價值


產(chǎn)品側(cè):

保證可復(fù)用模塊的交互體驗的一致性。如同一個產(chǎn)品類型不同分支多個團(tuán)隊完成的時候,可以保證產(chǎn)品團(tuán)隊使用同一份設(shè)計規(guī)范快速完成產(chǎn)品原型設(shè)計。

設(shè)計側(cè):

把設(shè)計師逐漸從不必要、重復(fù)性勞動中解放出來,節(jié)約出來的時間和精力放到更多有價值的工作上去。更多去關(guān)注對用戶需求和業(yè)務(wù)邏輯的深入挖掘,如果每個設(shè)計師都具備產(chǎn)品用研、交互、組件化等一條龍能力,才能體現(xiàn) tob 產(chǎn)品設(shè)計師的價值,才不會被別人稱作是拖拽組件的“工具人”。

開發(fā)側(cè):

形成開發(fā)資產(chǎn),可以提升研發(fā)效率,降低維護(hù)成本。開發(fā)工程師無需再重復(fù)開發(fā)同一個組件,只需要去組件庫里調(diào)用即可,配合業(yè)務(wù)邏輯,高效完成界面開發(fā)。做到開箱即用。

測試側(cè):

標(biāo)準(zhǔn)化的設(shè)計規(guī)范,是測試人員最喜歡看到的。1 是 1,2 是 2 的設(shè)計準(zhǔn)則,提升了測試效率。例如,設(shè)計規(guī)范規(guī)定彈窗 footer 區(qū)按鈕組居右,那么測試人員只要測到不居右,就可以給產(chǎn)品提優(yōu)化建議了。

主流設(shè)計系統(tǒng)-他山之石可以攻玉!

無需猶豫,直接基于現(xiàn)有的優(yōu)秀的開源設(shè)計系統(tǒng)。

設(shè)計系統(tǒng)的打造不必從 0-1 構(gòu)建, 例如:Ant Design 業(yè)界優(yōu)秀的開源設(shè)計系統(tǒng),我們完全可以站在前人的肩膀,最終生產(chǎn)出符合達(dá)觀品牌、業(yè)務(wù)特性的設(shè)計系統(tǒng)。

  1. 阿里 Ant design:https://ant.design/docs/spec/introduce-cn
  2. 阿里的 teambition: https://design.teambition.com/
  3. 華為 devui: https://devui.design/design-cn/design-value
  4. 餓了么 elemnt: https://element.eleme.io/#/zh-CN
  5. 有贊: https://design.youzan.com/index.html
  6. 字節(jié)跳動 Semi Design: https://semi.design/zh-CN/
  7. 字節(jié)跳動 Arco Design: https://arco.design/
  8. Material Design:https://material.io/
  9. Lightning Design System: https://www.lightningdesignsystem.com/
  10. Microsoft fluent: https://www.microsoft.com/design/fluent/#/
  11. eva.design: https://eva.design/
  12. Atlassian design: https://atlassian.design/


以原子理論構(gòu)建設(shè)計系統(tǒng)


1. 原子理論設(shè)計介紹

首先原子設(shè)計理論并不是什么高大上的規(guī)則。最早是由國外前端開發(fā)工程師 Brad Frost 提出的,他從化學(xué)元素周期表中得到啟發(fā),發(fā)現(xiàn)在化學(xué)世界中,所有的物體都是由原子構(gòu)成,原子組合構(gòu)成分子,分子組合構(gòu)成有機(jī)物,最終形成了宇宙萬物。根據(jù)他的理論,設(shè)計體系主要包含 5 個層面:原子、分子、組織、模板、頁面。

原子理論設(shè)計不是一個線性的過程, 它更像是一個心理模型,來幫助我們把用戶界面看作是一個連貫的整體,同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設(shè)計系統(tǒng)層級中扮演重要角色。下面,讓我們更深入的了解每一個概念哦~

2. 原子層(Atoms):

原子是物質(zhì)的基礎(chǔ)組成部分,是構(gòu)成設(shè)計系統(tǒng)的最基礎(chǔ)元素。

在界面中以「元素」的形式存在,例如:顏色、文字、圖標(biāo)、分割線、間距、圓角、間距、陰影等。

從6個層面,幫新手快速入門B端設(shè)計系統(tǒng)

簡單概述下來就五個字:色、形、質(zhì)、構(gòu)、質(zhì);

從6個層面,幫新手快速入門B端設(shè)計系統(tǒng)

3. 分子(Molecules)層

在界面中,分子就像是一個由 UI 元素組成的相對簡單的組織。如:按鈕、彈窗、搜索框等。

以按鈕為例,它的組成元素包含了文字、色塊、圖標(biāo)和間距。這些抽象的原子從毫無關(guān)聯(lián)組合成一個分子,圖標(biāo)和文字互相配合傳達(dá)意義,顏色定義了按鈕的特性,間距為按鈕定義了一個尺寸和規(guī)范。

從6個層面,幫新手快速入門B端設(shè)計系統(tǒng)

4. 組織(Organisms)層

分子+原子組合成更復(fù)雜和可擴(kuò)展性的模塊,這個稱之為組織(區(qū)塊組件),如:列表操作區(qū)塊、列表展示區(qū)塊、表單區(qū)塊、數(shù)據(jù)統(tǒng)計卡片區(qū)塊。

以表單為例,一個表單我們可以通過數(shù)量的組合,以及間距的調(diào)整,元素的增減,在界面中表達(dá)不同的場景和含義。

從6個層面,幫新手快速入門B端設(shè)計系統(tǒng)

5. 模板(Templates)層

由原子+分子+組織構(gòu)成的更復(fù)雜更具拓展性的模塊,如:分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。

本質(zhì)就是線框圖,模版在設(shè)計系統(tǒng)承載的作用就是保證設(shè)計方案在原型階段的多樣性。專注于頁面的底層的內(nèi)容結(jié)構(gòu),頁面中的信息是占位作用,而不是頁面的最終內(nèi)容。

從6個層面,幫新手快速入門B端設(shè)計系統(tǒng)

6. 頁面(Pages)層

帶業(yè)務(wù)邏輯的場景案例如:標(biāo)注詳情場景、抽取詳情場景、權(quán)限管理場景。頁面將真實內(nèi)容應(yīng)用于模板;

頁面是模板的具體實例,填充了真實的內(nèi)容(圖片、文字等)后形成頁面,也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖,將占位符替換為有代表性的真實內(nèi)容,使設(shè)計系統(tǒng)有了生命。在模版的基礎(chǔ)上進(jìn)行優(yōu)化和完善就形成了頁面最終的設(shè)計方案。

從6個層面,幫新手快速入門B端設(shè)計系統(tǒng)


關(guān)于設(shè)計系統(tǒng)的常見認(rèn)知誤區(qū)


誤區(qū) 1:設(shè)計體系就是設(shè)計規(guī)范或者組件庫嗎?

許多人認(rèn)為設(shè)計系統(tǒng)就是單個代碼庫、組件庫、設(shè)計規(guī)范,但實際上他們不是一個層次的東西,準(zhǔn)確來說設(shè)計體系包含設(shè)計規(guī)范,組件庫也是建立在設(shè)計體系內(nèi)的,組件庫是記錄和共享設(shè)計模式的工具,就是設(shè)計體系工具化和表現(xiàn)層的部分;

誤區(qū) 2:設(shè)計體系的存在扼制了組織內(nèi)創(chuàng)造力,會替代掉設(shè)計師?

拋出這個問題,是因為經(jīng)常在不同的場合聽到“設(shè)計系統(tǒng)是扼殺設(shè)計師的創(chuàng)造力”之類的觀點,我個人是很難認(rèn)同這個的,對 design system 的最大誤解就是限制設(shè)計師的想象力。首先設(shè)計系統(tǒng)本身就是一個龐大且復(fù)雜的設(shè)計觀集合,需要調(diào)動整個團(tuán)隊的想象力和創(chuàng)造力,最終達(dá)到一個統(tǒng)一共識才有可能被實施和執(zhí)行;

好的設(shè)計系統(tǒng)可以通過流程和機(jī)制促進(jìn)創(chuàng)造力的,而且好的設(shè)計資產(chǎn)可以幫助大家從不必要的、重復(fù)的勞動時間內(nèi)節(jié)省出來,當(dāng)然也不能過度依賴過往的沉淀資產(chǎn),把自己定位為設(shè)計系統(tǒng)的創(chuàng)造者,而不是使用的工具人,不斷的創(chuàng)造和貢獻(xiàn)好的解決方案被整個組織采用,就不必再擔(dān)心那些即將淪為沉沒成本的過往設(shè)計與技術(shù)資產(chǎn)的限制。不會替代掉設(shè)計師,反而是一個企業(yè)內(nèi)部尊重設(shè)計師價值的開始!是企業(yè)對設(shè)計文化的認(rèn)可!

誤區(qū) 3:設(shè)計系統(tǒng)是一勞永逸的嗎?

設(shè)計體系是動態(tài)的,永遠(yuǎn)是隨著組織需求和用戶需求而變化的,一切說自己已經(jīng)完成了設(shè)計體系的建設(shè)的人都是錯誤的,都是將靜態(tài)的設(shè)計規(guī)范曲解成了設(shè)計體系。

誤區(qū) 4:設(shè)計系統(tǒng)由少數(shù)人員生產(chǎn),我們負(fù)責(zé)用就行了?

正確管理機(jī)制:少數(shù)人負(fù)責(zé)管理,多數(shù)人參與貢獻(xiàn);避免你做、我用模式,這種生產(chǎn)消費模式非常內(nèi)卷;避免如:我一個設(shè)計師為啥要用你的規(guī)范;這規(guī)范做的太垃圾用處不大,我才不用,用你做的規(guī)范;我苦逼做業(yè)務(wù),你晉升拿結(jié)果的負(fù)面心態(tài);

設(shè)計系統(tǒng)也不是簡單的靠少數(shù)的人 1-2 個月用愛發(fā)電就能完成的,設(shè)計系統(tǒng)是一群人,對一種做設(shè)計文化的認(rèn)可,每個與之相關(guān)的人都應(yīng)該是設(shè)計體系的貢獻(xiàn)者與布道者!


需要克服的潛在難題


當(dāng)然設(shè)計體系也容易出現(xiàn)一些缺點,這些問題需要設(shè)計體系的構(gòu)建者們?nèi)ッ魅タ朔?

  1. 產(chǎn)品業(yè)務(wù)復(fù)雜性提升,提升建設(shè)難度
  2. 難以控制創(chuàng)造與控制間的平衡
  3. 復(fù)用與定制間的平衡,刻意追求復(fù)用率而容易丟失整體觀,為特定業(yè)務(wù)目標(biāo)服務(wù)時不如靈活集中化式方法等
  4. 資源問題,容易被當(dāng)成是輔助項目而缺乏預(yù)算等資源….
  5. 缺乏良性有效的組件庫更新迭代機(jī)制,虎頭蛇尾….
  6. 收益短期不明顯,搭建體系的長期收益難以被組織短期內(nèi)察覺;

盡管有一系列潛在的問題,但總的來說設(shè)計體系帶來的收益是大于這些投入的,總的來說方向是沒錯的,下一個關(guān)鍵問題是:我們?nèi)绾稳ソ⒁粋€更優(yōu)秀的設(shè)計體系。

今天就跟大家分享到這了,一點拙見,設(shè)計系統(tǒng)的話題這個我們分三期跟大家進(jìn)行交流,如有興趣,鐵子們可以加個關(guān)注

作者:IM UED

轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



更多精彩文章:



分享本文至:

日歷

鏈接

個人資料

存檔