要學會設計系統，是提升效率與一致性的關鍵

Sponsor

在當今快速發展的數字產品領域，設計系統已成為提升開發效率和產品質量的關鍵工具。它們不僅幫助團隊實現設計的高度一致性，還促進了不同部門間的無縫協作，同時顯著減少了開發過程中的錯誤和重復勞動。設計系統的核心優勢在于提供一套標準化的設計原則、易于復用的用戶界面(UI)組件、全面的代碼庫、詳盡的文檔和工具，這些元素共同構成了一套全面的指導方針，確保了從設計到開發的每一步都能夠以高效和一致性的方式執行。

一、什么是設計系統（Design System)?

設計系統（Design System）是一套綜合性的指導原則、組件和規則，它協助團隊以一致、高效的方式設計和開發數字產品。設計系統通常包括以下幾個關鍵要素：

1. 設計原則和規范：這些是設計決策的基礎，包括品牌指導、用戶體驗原則等。
2. UI 組件庫：一套預先設計好的用戶界面元素，如按鈕、輸入框、導航欄等，這些元素可以在多個項目中重復使用。
3. 代碼組件：與 UI 組件相對應的前端代碼，它們使設計能夠直接轉化為軟件開發中的實際元素。
4. 文檔和指南：詳細記錄了如何使用設計系統的各個組件和原則，通常以在線格式提供，方便團隊成員查閱。
5. 工具和資源：支持設計和開發流程的各種工具，如設計模板、代碼庫、設計軟件的插件等。

設計系統的主要目的是確保品牌和用戶體驗的一致性，同時提高跨團隊的工作效率。通過使用設計系統，組織能夠更快地設計和開發產品，同時保持產品的質量和一致性。

二、為什么要創建設計系統（Design System)?

1. 提高效率：設計系統提供了一套可重用的組件和規則，使得開發人員和設計師可以快速構建新頁面或功能，而不需要每次都從零開始。這意味著團隊可以更快地推出新產品或更新。
2. 確保一致性：設計系統確保了產品在視覺和用戶體驗上的統一性。不論團隊規模如何，它幫助所有人遵循同樣的設計準則和風格，使得最終產品在不同頁面和功能間保持一致的外觀和感覺。
3. 促進團隊協作：設計系統作為一個共享的資源庫，促進了不同角色（如設計師、開發人員、產品經理）之間的理解和溝通。它提供了一個共同的語言和參考點，幫助團隊成員更好地協作和交流。
4. 減少錯誤和重復工作：有了一套明確的指導和組件，團隊成員在創建設計或編寫代碼時更不容易出錯。這也減少了因不一致或錯誤而需要的修改和迭代。
5. 易于維護和更新：隨著產品的發展，設計系統使得維護和更新變得更加容易。更新一次設計規則或組件，可以自動應用到整個產品中。

設計系統是為了提升團隊工作的效率和質量，確保產品在不斷演變的過程中保持一致性和可維護性。

三、可以從他們身上學到什么（Study)?

從設計系統中，無論是作為設計師、開發者還是產品經理，都可以學到許多寶貴的知識和技能：

1. 設計和編碼最佳實踐：設計系統展示了如何有效地應用設計原則和編碼標準。通過研究和使用設計系統，你可以了解到關于顏色理論、排版、用戶界面布局、交互設計等方面的最佳實踐。
2. 一致性和可復用性：學習如何創建可重復使用的組件和設計模式，以及如何在不同項目中保持視覺和功能上的一致性。這對于提升工作效率和保持產品品質至關重要。
3. 跨團隊協作：設計系統強調了團隊成員間的協作重要性。它教你如何與其他設計師、開發人員和利益相關者有效溝通和協作，確保設計決策和開發過程中的透明度和一致性。
4. 系統性思維：設計系統要求你采用更宏觀的視角來看待設計和開發。你將學會如何思考和處理一個大型項目的不同部分，如何確保它們共同構成一個協調一致的整體。
5. 適應性和可擴展性：通過了解和使用設計系統，你可以學習如何構建靈活且可擴展的設計，這些設計能夠適應未來的變化和增長。
6. 用戶體驗的重要性：設計系統使你更加專注于用戶體驗，了解如何通過統一和直觀的設計提升用戶滿意度和參與度。
7. 技術和創意的結合：設計系統展示了技術實現與創意設計如何緊密結合，推動了對新工具和技術的探索，以及它們如何支持創意過程。

以下是一些在國內設計行業頗受歡迎并被設計師和開發人員廣泛使用的設計系統。

1. 騰訊 — TDesign企業級設計體系

TDesign 是具有包容性的設計體系，它強調為業務提供產品、服務等過程中，追求以人為本、人人受益的包容性，要求搭建過程中，了解業務底層，理解業務場景的多樣性，并在繁雜的業務場景中尋找共性和特性，確保彼此能靈活地在同一個環境并存，既能滿足當下需要，也能作用于更廣泛的場景，為不同的產品保留定制空間，在保證不同產品能夠體現自我特色的同時，TDesign 還可以為更廣泛的產品提供適合的服務。

TDesign 的主要特點包括：

1. 開源開放，持續迭代。
2. 采用 MIT 許可協議，始終保持開放的心態，期待各方一起共建開源生態。
3. 包容多元，靈活易用。
4. 保持設計敏銳感，在繁雜的業務中尋找共性，提供通用的設計解決方案。

網站 —?https://tdesign.tencent.com/

2. 字節跳動出品的企業級設計系統

ArcoDesign 以”務實浪漫，高效美接融”為愿景，秉承一致性（Agreement）、韻律感（Rhythm）、清晰度（Clear）、開放性（Open）的設計哲學。我們致力于橋接開發與設計的差距，從開發者和設計師的視角出發，采用更加系統化的思維模式解答業務難題。通過精致完善的設計資源，流暢簡約的工具集和豐富的生態平臺，迅速提高工作效率與愉悅感。

ArcoDesign 設計系統的主要特色包括：

1. 靈活定制 · 豐富的原子級組件
2. 智能連接 · 全面的生態平臺
3. 風格配置平臺 （Design Lab）
4. 物料市場 （Material Market）
5. 色彩配置工具（Palette）

Arco 致力于探索更優質的設計體系，以解決復雜的業務以及冗余的溝通帶來的體驗問題，徹底解放開發及設計師的雙手。

網站 —?https://arco.design/

3. 金山云企業級設計解決方案 — Kingcloud Design

KingDesign 設計系統是??云基于多年的企業級產品設計開發經驗，以??云設計語?為基礎，?于企業級產品的開源設計系統，該系統由組件、開發、設計資源、?具、解決?案、設計指南組成，?戶可使? KingDesign 設計系統快速構建一致的數字產品。

King Design 設計系統的關鍵特性包括：

KingDesign 設計系統是?向企業級產品的設計解決?案，為企業提效??，提供設計思路、設計指南、設計資源幫助企業快速構建產品。

網站 —?https://design.ksyun.com/

4. 釘釘設計團隊 —Ding Design

Ding Design 是由釘釘設計團隊、產品團隊和終端技術團隊共同打造的前端組件項目，目的是為了幫助開發者提高開發效率、提升產品體驗。

Ding Design 的主要特點包括：

1. 提煉自釘釘企業級終端產品的交互語言和視覺風格。
2. 完美支持釘釘主題，支持淺色主題及暗色主題。
3. 使用 TypeScript 開發，提供完整的類型定義文件。
4. 提供小程序、React Mobile、React PC 的組件支持。

網站 —?https://ding.design/#/

5. Ant 設計系統

Ant Design，出自阿里巴巴集團旗下螞蟻金服之手，是一款全面而通用的設計系統。它旨在為設計師和開發人員提供廣泛的用戶界面組件、設計指南和工具，以助力團隊迅速、輕松地創造出高品質的設計。

螞蟻設計秉承簡潔、一致性和高效性的設計原則，其包含了一系列用戶界面組件，如按鈕、表單和導航欄等，以及設計指南和原則，旨在確保在不同平臺和設備上的一致性和易用性。

Ant Design 的核心特性包括：

1. 一整套易用且易于定制的用戶界面組件。
2. 重視可訪問性，其設計指南和原則確保螞蟻設計對所有人開放，不論其是否面臨殘疾或其他挑戰。
3. 跨平臺兼容，用戶界面組件適用于各種平臺和設備。
4. 提供一系列設計工具和資源，包括 Sketch 文件、圖標集和代碼片段。
5. 擁有一個充滿活力且相互支持的設計師和開發人員社區，他們共同為設計系統貢獻力量，并隨著時間的推移不斷完善和改進。

螞蟻設計因其提供的全面、通用的資源和指南而受到設計師和開發人員的廣泛歡迎，有效地保證了各種項目和應用程序的一致性、易用性和無障礙訪問性。

網站 —?https://ant.design/

6. HiUI -小米企業級設計系統

HiUI 是小米集團信息技術部推出的企業級設計系統。HiUI 目前聚焦在企業級中后臺研發場景，以「高效、友好、開放」為設計價值觀，致力于打造輕松愉悅的辦公體驗。HiUI 提供了開箱即用的 UI 組件庫、設計指南、設計模板等資產，將產品、設計和研發從重復勞動中解放出來，專注于更有價值的業務需求設計。

HiUI – 設計系統的一些核心特性包括

1. 全新的設計語言。全新升級自然輕量的設計語言，為產品帶來清爽簡潔的美感
2. 豐富的組件庫。根據業務場景提煉出 5 大類，50+基礎組件，覆蓋大部分使用場景，滿足各種功能需求
3. 極高的易用性。每個組件配有詳細的設計指導文檔，組件使用方式更清晰
4. 更好的開發體驗。提供功能強大、品類豐富的高質量組件，讓開發更簡單 ；更靈活的組件引入方式，支持分包與合包，讓升級更平滑 ；提供全鏈路開發體系，開箱即用，讓開發更高效
5. 技術全面革新。支持 TypeScript，提供優秀的類型提示和代碼檢查 ；擁抱 React hooks，提供全新的函數式編程體驗
6. 更強的擴展性。全量 DesignToken 主題定制，支持靈活主題定制和搭配 ；全面擴充底層 API （150+），提供優秀的組件定制和擴展能力 ；提供通用基礎 Utils 和 Hooks，提供穩定好用的工具服務

HIUI 是一個面向中后臺系統的前端組件庫，可以幫助開發人員快速實現交互一致、界面美觀的界面開發。

網站 —?https://xiaomi.github.io/hiui/

7. Ke.Design 語言系統-

傳統的頁面產出流程是瀑布流式的，一個工作流程中會涉及到不同的 PM、設計師及前端工程師。部分項目在時間緊張的情況下會出現分批交付并行開發的情況、如此多的角色共同參與一個項目下，合作方如果沒有緊密咬合、足夠的溝通，將會導致大量重復性的工作，增加項目周期、管理難度。

B 端產品往往擁有復雜的業務邏輯且頁面量級巨大，快速迭代也會引發頻繁的變動以及并行概率的增加，需要設計師與開發能夠快速的產出方案保證上線。這樣的工作模式引發的副作用如：“體驗一致性差”、“設計效率低”、“還原度不可控”的問題也逐漸顯現，變成一個急待解決的問題。

B 類產品中存在很多類似的頁面以及組件，可以通過抽象得到一些穩定且高復用性的內容，那么是不是可以通過這種方式從現在的模式中，解綁一下呢？

Ke.Design 的一些特性包括：

1. 自然。設計者在進行產品設計時，應遵從用戶的本能，在感知、認知和行為層面營造貼近自然的產品體驗，使用戶能夠沉浸其中，進行無意識的行為活動。保持“自然”的產品設計理念，將有助于減少用戶在理解信息、進行決策和執行任務環節中的精力消耗，從而進入心流的極致狀態。
2. 高效。產品應該能助力用戶高效地完成目標。提供引導和幫助能使用戶快速上手，降低學習成本；對功能和信息進行預先配置，可以降低用戶的操作成本，使他們快速開展任務。
3. 包容。主流產品或服務的設計應能夠被盡可能廣泛地使用，無需特別的適應或特殊的設計。包容性主要體現在兩個方面：產品的設計形態應該適應內部業務的發展，同時滿足更廣泛人群的使用場景和需求。

網站 —?https://design.ke.com/

8. 有贊-Zan Design System

有贊是一個商家服務公司。我們首先為商家提供客戶管理、在線營銷、在線銷售、門店管理等全面提高經營效率的系統解決方案，有 SaaS 產品，也有 PaaS 云；同時還提供人才培訓、供應、金融等增值服務。

多年來，我們給來自不同行業的幾百萬商家提供著服務。這樣足夠豐富的客戶和足夠豐富的需求環境，讓有贊沉淀了不少關于產品設計的經驗和方法，我們愿意將這些經驗完整地共享出來，希望可以幫助更多同行提高產品設計和研發效率。

有贊-Zan Design System 的一些特性包括：

①有效

讓設計助力業務成長，賦能業務。

②高效

簡化流程：設計簡潔直觀的操作流程；

清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策。

③反饋

控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；

界面反饋：操作后，通過界面元素的變化清晰地展現當前狀態。

④可控

用戶決策：根據場景可給予用戶操作建議或安全提示，不能代替用戶進行

⑤決策；

結果可控：用戶可以自由的進行操作，有可逆的空間和余地。

⑥一致

與現實一致：與現實生活的流程、邏輯、習慣保持一致，與物理世界的客觀事實保持一致；

在界面中一致：所有的元素和結構需保持一致。

Zan Design 設計價值觀為有贊產品設計，提供普適、抽象的評判標準和方向，激發了更為具體和行之有效的設計原則，繼而又產生為具體的設計問題提供向導和一般解決方案的設計模式。

網站 —?https://design.youzan.com/index.html

9. Mand Mobile — 后臺設計系統

Mand Mobile，由滴滴出行前端團隊精心打造，專為金融領域量身定制的移動端 Vue 2 組件庫。其不僅助力前端開發者迅速搭建項目，更以其專業嚴謹的 UI 風格聞名。目前，該組件庫已廣泛應用于滴滴四大金融業務板塊，覆蓋逾十款重點產品。

Mand Mobile 設計系統的關鍵特性包括：

①豐富的組件

40+的實用組件，能夠滿足移動端開發的基本需求，尤其是對金融場景的需求進行了特別支持

②統一的視覺規范

由滴滴金融設計師設計并維護，保證了應用的項目內部、項目之間都能保持高度的視覺一致性

③適用于多場景的產生

提供按需加載能力，使用靈活，避免引入無用代碼，導出 es，umd 兩種格式以及 px, vh/vw 兩種樣式單位

④靈活轉換的樣式主題

UI 樣式可配置，拓展靈活，輕松適應不同的設計風格

⑤支持 TypeScript

⑥支持服務端渲染

Mand Mobile 是由滴滴出品的基于 Vue 2 開發的前端 UI 組件庫，項目源碼基于 Apache 2.0 開源協議托管在 Github 上，任何個人和公司都可以免費下載使用，也可以用在商業項目上。

網站 —?https://didi.github.io/mand-mobile/#/zh-CN/home

10. NutUI-JDT — 京東科技移動端組件庫

NutUI-JDT 是京東科技風格的移動端組件庫，使用 Vue 語言來編寫可以在 H5，小程序平臺上的應用，幫助研發人員提升開發效率，改善開發體驗。

基礎設計系統的主要特征包括：

1. 70+ 高質量組件，覆蓋移動端主流場景
2. 支持一套代碼同時開發多端小程序+H5
3. 基于京東 APP 10.0 視覺規范
4. 支持按需引用
5. 詳盡的文檔和示例
6. 支持 TypeScript
7. 支持服務端渲染（測試階段）
8. 支持定制主題，內置 700+ 個主題變量
9. 國際化支持
10. 單元測試覆蓋率超過 80%，保障穩定性
11. 提供 Sketch 設計資源

網站 —?https://nutui.jd.com/jdt/?theme=jdt&ref=88sheji.cn#/

11. Titian Design-微盟移動端核心業務

源自微盟移動端核心業務，我們的目標是通過 Titian Mobile 助力開發者實現可持續地提質增效，并不斷打造良好的移動端產品體驗。

Titian Design 的核心特性包括：

①多渠道一體化

多端適配，同時支持微信、支付寶、小紅書、快手小程序等多個主流渠道，同時保持 API 與功能統一。Titian 基于微盟自研的多渠道轉碼技術，支持業界主流的 MiniProgram（即將開放），以及基于 Web Components 支持 React、Vue 3 開發技術棧，采用 MIT 許可協議，秉承開放、開源原則，期待共建生態。

②千變萬化，隨心搭配

借助 Titian 組件，能更便捷地搭建應用。你想得到的、想不到的樣式變量，我們都能提供。

網頁 —?https://titian.design.weimob.com/

12. Semi Design-抖音

Semi 多用于前綴或詞組中，表示「一半」 —— 正如同一個完整的企業應用，通常由業務邏輯與前端界面構成，Semi Design 希望成為這不可或缺的一半，為企業應用前端提供堅實且優質的基礎。

我們相信，設計系統的真正價值在于降低前端的搭建成本，同時提供優秀的設計和工程化標準，充分解放設計師與開發者的生產力，從而不斷孵化明星產品。

Semi Design 的核心特性包括：

1. 模塊化設計：Semi Design 將設計元素分解為可重復使用的模塊，這樣可以提高設計的效率和一致性。
2. 適應性和靈活性：Semi Design 鼓勵設計師和開發人員在保持整體一致性的同時，根據不同的業務場景和用戶需求進行靈活的設計和開發。
3. 可視化工具：提供了一系列的可視化工具，幫助設計師和開發人員更好地理解和實現設計。

網頁 —?https://semi.design/zh-CN/

13. HarmonyOS-華為

鴻蒙生態與您一起 {探索} 萬物互聯 無限未來

HarmonyOS 的創新體驗將幫助您應對萬物互聯時代帶來的挑戰與機遇，結合覆蓋應用生命周期的場景解決方案，打造受用戶喜愛的應用。通過全場景流量入口、AI 加持下的智慧分發，讓更多用戶能夠暢享您的應用。

HarmonyOS-華為核心特性包括：

①HarmonyOS 讓您的應用自由跨端

元服務是輕量化服務的新物種，它提供了全新的服務和交互方式，可分可合，可流轉，支持免安裝等特性，能夠讓應用化繁為簡，讓服務觸手可及。

②HarmonyOS 萬能卡片助您服務直達

HarmonyOS 應用或元服務以萬能卡片的形式展示在設備桌面，幫助用戶快速訪問、處理應用內信息。設置萬能卡片后，用戶在桌面即可看見應用的實時信息并可以進行操作，所見即所得。

③HarmonyOS 用“簡單”激活您的設備智能

HarmonyOS 是新一代智能終端操作系統。為不同設備的智能化、互聯與協同提供了統一的語言。設備可實現一碰入網，無屏變有屏，操作可視化，一鍵直達原廠服務等全新功能。通過簡單而智能的服務，實現設備智能化產業升級。

網頁 —?https://developer.huawei.com/consumer/cn/

最后

隨著我們深入理解設計系統的價值和應用，顯而易見，它們已經成為現代產品開發不可或缺的一部分。設計系統不僅提升了設計的一致性和開發效率，還促進了團隊成員之間的協作和溝通，降低了錯誤和重復工作的發生，從而確保了產品質量的穩定性。此外，它們還鼓勵了系統性思維，提高了設計的適應性和可擴展性，同時將用戶體驗置于核心位置。通過采用設計系統，無論是設計師、開發者還是產品經理，都能夠在快速變化的技術和市場環境中保持競爭力，共同創造出既美觀又實用的數字產品。

來源公眾號：Tomda

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。