Design System工具：持續提高團隊設計效率的必然選擇

數字化的大趨勢下，企業內部的設計將越來越民主化（Design Democratization），人人都是設計師可能不再僅僅是一句調侃。但面對越來越複雜的商業場景和產品形態，如何在設計時保障客戶體驗的一致性，持續提高團隊的設計效率，不斷提升設計開發一體化、自動化的程度，Design System工具將是必然選擇。

將來的設計師，不再只是單槍匹馬地使用一個設計工具進行設計，而是在一個設計體系和環境下進行設計。

一：為什麼會出現設計體系工具

2017年在用戶體驗設計領域，除了AI這個超級熱點，另外一個焦點就是Design System（設計體系）。近幾年來，由於企業與用戶的觸點急劇增加，需要設計的交互類型、產品形態越來越多，設計團隊的規模越來越大，為了保證用戶體驗的一致性，提高團隊設計的效率、設計與開發協同效率，design system的概念開始出現。

而2013年，Brad Forst提出的Atomic Design設計理念為Design System提供一個初步完整的理論框架，同時這幾年Design Tools/Platform（設計工具/平台）的迅速發展，為Design System的應用和落地提供了技術基礎，Design System相關的插件、工具和平台逐步面世，但這些工具往往需要與現有的設計工具、文檔工具（如Sketch、PS、Dropbox、Gethub等）結合使用。2017年，這個領域開始出現整合，一站式的Full Stack design system工具和平台開始逐步成型，如inVISION。

隨著All In One式的Design System工具和平台的推出，Design System的應用範圍和深度將大大加快加深，其內涵和功能也將不斷演進和擴展，成為設計開發一體化、自動化和智能化最強勁的推動力，也許將來Desing System會成為用戶體驗設計從業者必須了解和掌握的工具之一。

二：有哪些類型的設計體系工具

在介紹具體的Design System之前，有必要明確一下對Design System的定義，有了定義才能對範圍進行明確的界定。Design System有很多，很多，很多，很多，很多，很多，很多，很多，很多，很多個版本的定義，雖然在概念的延展上大家各有不同，但核心部分大同小異。在所有這些定義中，個人覺得設計師Nathan Curtis的定義的角度和層面更準確，對Design System近期和遠期的目標描述更完整。為避免翻譯可能造成的歧義，直接原文引用如下：

」Almost always, a design system offers a library of visual style and components documented and released as reusable code for developers and/or tool(s) for designers. A system may also offer guidance on accessibility, page layout, and editorial and less often branding, data viz,UX patterns, and other tools.

A design system is adopted by and supported for other teams making experiences. These teams use it to develop and ship features more efficiently to form a more cohesive customer journey.

A design system is made by an individual, team, and/or community. While some arise less formally, organizations now dedicate small to large squad(s) to develop and release system versions and processes over time.」

——Nathan Curtis

Founder of UX firm @eightshapes

基於這個定義，最基本的Design System工具能提供視覺元素的組件庫，並能進行組件庫的文檔管理，提供給開發人員（組件庫代碼文檔）和設計師（組建界面設計文檔）重複使用。同時提供在各種類型和各個層面的Style Guidline規範指南和工具。

除了提供基本的組件庫和規範指南，Design System工具更具有技術含量的功能，是要能支持用戶體驗相關的人員和團隊（主要是設計師和開發人員）方便地將這些組件和規範應用到產品和服務的設計開發中，並且效率相對沒有Design System支持時能有明顯的提高，具體到功能上，最關鍵的就是能支持從規範到組件庫、設計稿，甚至到代碼的自動化調整，也就是說你調整了規範里顏色，組件庫、設計稿和實際的頁面都會自動根據規範調整，而不需要再人工進行逐項逐層修改。

目前，能否實現從規範到代碼的自動調整，是判斷一個Dseign System是真是假的關鍵判斷依據。不能提供這項功能的Design System工具只屬於Library/Style Guide（組件庫和規範）基礎層面的工具；能提供這個功能，就可以被稱作為Living Desing System（真正的設計管理工具）。

如果從更廣的角度，更長期的階段來看，Design System不僅僅支持目前版本的設計和開發，還要能支持規範和組件的體系化的、平滑的不斷完善、演進和創新，同時也不僅僅只是支持某個設計師、開發者的效率提供，而是一個能支持一個團隊、機構協同式工作的平台，交流的社區。

三：目前的設計體系工具清單

第一類：只提供Library（組件庫）的工具，可進行組件庫的分類管理、存儲，組件庫包括代碼形式和視覺文件形式：

• ASTRUM
• Bootstrap
• Lingo
• MANNEQUIN
• Materialize
• Pattern Lab
• Polymer
• ZURB Foundation

第二類：只提供Style Guideline（視覺規範）的工具，可提供進行視覺規範的分類、設計、編輯、發布和共享功能：

• atomicdocs
• Frontify
• hologram
• Patternry
• Runway
• Refills
• HUGE Style Guideline

第三類：同時提供Library+Style Guideline（視覺規範和組件庫）的工具，部分能實現設計規範和組件庫的聯動。

• Ant Design
• Brand.ai
• Fractal
• Marvel Styleguide
• PatternPck
• QuickBooks
• Refills

第四類：Living Design System（真設計體系）工具，這些工具首先都是設計工具或插件，同時可以實現規範、組件庫和設計稿之間的聯動：

• Cabana
• Framer
• inVISION DSM
• Jan Losert
• Rojcky Blueprint
• UXPin Systems
• UX Power Tools

五：大型機構設計體系案例

目前，一些大型企業和設計機構都建立了自己的設計體系，並都有一個炫酷的名字，例如Salesforce的lighting、VMware的Clarity、shopify的Polaris等等，很多公開發布了自己的Style Guide，都是很不錯的參考。

• ATLASSIAN:Atlassian Design
• GE Digital:Predix
• Google:Material
• IBM:Carbon
• Microsoft:Fluent
• Mailchimp:Grid System
• Salesforce:Lightning
• shopify:Polaris
• VWware:Clarity

推薦閱讀：