什么是設計系統？

設計系統 = 設計價值觀和原則+設計規范+場景定義+工具包

設計系統是在設計價值觀和原則、設計標準指導下的各種共享的設計模式和組件資產，是將產品設計團隊聯合在一起共同打造的一套質量和效率上都有所保障的可行性解決方案，能夠解決產品視覺、交互體驗一致性的問題、幫助傳達統一的品牌認知。幫助團隊快速完成產品迭代和功能開發！

為什么要構建設計系統？

問題 1:

隨著業務的拓展，產品和項目數量不斷增加，發展中期設計和交互上不一致性的問題浮出水面，需要采取措施確保產品或產品線之間保持統一的品牌傳達、外觀和體驗，以滿足用戶預期并向其傳達統一的品牌認知。

問題 2:

無統一的設計規范和交互原則，沒有統一的 UI 組件庫和代碼庫，各團隊設計和前端需花費大量資源陷入低質量溝通協作和重復造輪子，拖慢產品和項目設計和開發節奏。

問題 3：

產品項目數量 vs 產品設計師，人員配比嚴重不足的情況下，團隊的設計師們無法從雜/亂/急的日常需求中剝離出來，影響構建產品壁壘的質量和速度。

設計系統的價值

產品側：

保證可復用模塊的交互體驗的一致性。如同一個產品類型不同分支多個團隊完成的時候，可以保證產品團隊使用同一份設計規范快速完成產品原型設計。

設計側：

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

開發側：

形成開發資產，可以提升研發效率，降低維護成本。開發工程師無需再重復開發同一個組件，只需要去組件庫里調用即可，配合業務邏輯，高效完成界面開發。做到開箱即用。

測試側：

標準化的設計規范，是測試人員最喜歡看到的。1 是 1，2 是 2 的設計準則，提升了測試效率。例如，設計規范規定彈窗 footer 區按鈕組居右，那么測試人員只要測到不居右，就可以給產品提優化建議了。

主流設計系統-他山之石可以攻玉！

無需猶豫，直接基于現有的優秀的開源設計系統。

設計系統的打造不必從 0-1 構建， 例如：Ant Design 業界優秀的開源設計系統，我們完全可以站在前人的肩膀，最終生產出符合達觀品牌、業務特性的設計系統。

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. 字節跳動 Semi Design： https://semi.design/zh-CN/
7. 字節跳動 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/

以原子理論構建設計系統

1. 原子理論設計介紹

首先原子設計理論并不是什么高大上的規則。最早是由國外前端開發工程師 Brad Frost 提出的，他從化學元素周期表中得到啟發，發現在化學世界中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。根據他的理論，設計體系主要包含 5 個層面：原子、分子、組織、模板、頁面。

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

2. 原子層(Atoms)：

原子是物質的基礎組成部分，是構成設計系統的最基礎元素。

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

簡單概述下來就五個字：色、形、質、構、質；

3. 分子(Molecules)層

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

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

4. 組織(Organisms)層

分子+原子組合成更復雜和可擴展性的模塊，這個稱之為組織（區塊組件），如：列表操作區塊、列表展示區塊、表單區塊、數據統計卡片區塊。

以表單為例，一個表單我們可以通過數量的組合，以及間距的調整，元素的增減，在界面中表達不同的場景和含義。

5. 模板(Templates)層

由原子+分子+組織構成的更復雜更具拓展性的模塊，如：分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。

本質就是線框圖，模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。專注于頁面的底層的內容結構，頁面中的信息是占位作用，而不是頁面的最終內容。

6. 頁面(Pages)層

帶業務邏輯的場景案例如：標注詳情場景、抽取詳情場景、權限管理場景。頁面將真實內容應用于模板；

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

關于設計系統的常見認知誤區

誤區 1：設計體系就是設計規范或者組件庫嗎？

許多人認為設計系統就是單個代碼庫、組件庫、設計規范，但實際上他們不是一個層次的東西，準確來說設計體系包含設計規范，組件庫也是建立在設計體系內的，組件庫是記錄和共享設計模式的工具，就是設計體系工具化和表現層的部分；

誤區 2：設計體系的存在扼制了組織內創造力，會替代掉設計師？

拋出這個問題，是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點，我個人是很難認同這個的，對 design system 的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合，需要調動整個團隊的想象力和創造力，最終達到一個統一共識才有可能被實施和執行；

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

誤區 3：設計系統是一勞永逸的嗎？

設計體系是動態的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經完成了設計體系的建設的人都是錯誤的，都是將靜態的設計規范曲解成了設計體系。

誤區 4：設計系統由少數人員生產，我們負責用就行了？

正確管理機制：少數人負責管理，多數人參與貢獻；避免你做、我用模式，這種生產消費模式非常內卷；避免如：我一個設計師為啥要用你的規范；這規范做的太垃圾用處不大，我才不用，用你做的規范；我苦逼做業務，你晉升拿結果的負面心態；

設計系統也不是簡單的靠少數的人 1-2 個月用愛發電就能完成的，設計系統是一群人，對一種做設計文化的認可，每個與之相關的人都應該是設計體系的貢獻者與布道者！

需要克服的潛在難題

當然設計體系也容易出現一些缺點，這些問題需要設計體系的構建者們去摸索去克服；

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

盡管有一系列潛在的問題，但總的來說設計體系帶來的收益是大于這些投入的，總的來說方向是沒錯的，下一個關鍵問題是：我們如何去建立一個更優秀的設計體系。

今天就跟大家分享到這了，一點拙見，設計系統的話題這個我們分三期跟大家進行交流，如有興趣，鐵子們可以加個關注