什么是設(shè)計(jì)系統(tǒng)？

---

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

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

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

---

問(wèn)題1:

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

問(wèn)題2:

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

問(wèn)題3：

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

設(shè)計(jì)系統(tǒng)的價(jià)值

---

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

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

設(shè)計(jì)側(cè)：

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

開(kāi)發(fā)側(cè)：

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

測(cè)試側(cè)：

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

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

---

無(wú)需猶豫，直接基于現(xiàn)有的優(yōu)秀的開(kāi)源設(shè)計(jì)系統(tǒng)，

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

阿里Ant design:https://ant.design/docs/spec/introduce-cn 

阿里的teambition：https://design.teambition.com/ 

華為devui：https://devui.design/design-cn/design-value 

餓了么elemnt：https://element.eleme.io/#/zh-CN 

有贊：https://design.youzan.com/index.html 

字節(jié)跳動(dòng) Semi Design：https://semi.design/zh-CN/

字節(jié)跳動(dòng) Arco Design ：https://arco.design/

Material Design:https://material.io/ 

Lightning Design System：https://www.lightningdesignsystem.com/ 

Microsoft fluent ：https://www.microsoft.com/design/fluent/#/ 

eva.design：https://eva.design/ 

Atlassian design：https://atlassian.design/ 

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

---

原子理論設(shè)計(jì)介紹

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

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

原子層(Atoms)：

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

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

簡(jiǎn)單概述下來(lái)就五個(gè)字：色、形、質(zhì)、構(gòu)、質(zhì)；

分子(Molecules)層

在界面中，分子就像是一個(gè)由UI元素組成的相對(duì)簡(jiǎn)單的組織。如：按鈕、彈窗、搜索框等。

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

 組織(Organisms)層

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

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

模板(Templates)層

由原子+分子+組織構(gòu)成的更復(fù)雜更具拓展性的模塊，如：分組表單頁(yè)、頁(yè)面級(jí)表單、詳情頁(yè)、列表頁(yè)、異常頁(yè)、dashborad。本質(zhì)就是線框圖，模版在設(shè)計(jì)系統(tǒng)承載的作用就是保證設(shè)計(jì)方案在原型階段的多樣性。專注于頁(yè)面的底層的內(nèi)容結(jié)構(gòu)，頁(yè)面中的信息是占位作用，而不是頁(yè)面的最終內(nèi)容。

頁(yè)面(Pages)層

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

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

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

---

誤區(qū)1：設(shè)計(jì)體系就是設(shè)計(jì)規(guī)范或者組件庫(kù)嗎？

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

誤區(qū)2：設(shè)計(jì)體系的存在扼制了組織內(nèi)創(chuàng)造力，會(huì)替代掉設(shè)計(jì)師？

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

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

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

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

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

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

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

需要克服的潛在難題

---

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

• 產(chǎn)品業(yè)務(wù)復(fù)雜性提升，提升建設(shè)難度

• 難以控制創(chuàng)造與控制間的平衡；

• 復(fù)用與定制間的平衡，刻意追求復(fù)用率而容易丟失整體觀，為特定業(yè)務(wù)目標(biāo)服務(wù)時(shí)不如靈活集中化式方法等

• 資源問(wèn)題，容易被當(dāng)成是輔助項(xiàng)目而缺乏預(yù)算等資源….

• 缺乏良性有效的組件庫(kù)更新迭代機(jī)制，虎頭蛇尾….

• 收益短期不明顯，搭建體系的長(zhǎng)期收益難以被組織短期內(nèi)察覺(jué)；

  
  

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

文章來(lái)源：站酷   作者：從你的世界經(jīng)過(guò)



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

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

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)