在產(chǎn)品設計團隊中，設計系統(tǒng)的存在，有助于讓設計師、研發(fā)工程師、產(chǎn)品經(jīng)理等角色協(xié)同工作，設計系統(tǒng)一定程度上還有助于保證多個產(chǎn)品和平臺之間的視覺一致性。這篇文章里，作者就對設計系統(tǒng)的價值、類型等方面做了相對系統(tǒng)性的梳理，一起來看。

設計系統(tǒng)的目的主要是為了在設計決策時，能夠提供一個多方已經(jīng)達成共識的依據(jù)和基準，讓設計師和研發(fā)工程師之間（還有業(yè)務、產(chǎn)品等）更容易協(xié)同工作，從而建立一系列的精益敏捷的協(xié)作方式和運作流程。設計系統(tǒng)還有助于確保多個產(chǎn)品和平臺之間的視覺、交互、代碼等一致性。在重大的品牌視覺升級或是界面重構(gòu)都是可以通過設計系統(tǒng)進行大規(guī)模管理和升級。

在我剛剛學習設計系統(tǒng)的時候，加上自身英語水平基礎薄弱，在閱讀一些國外的文章的時候，經(jīng)常容易混淆設計名詞以及對應內(nèi)容。通過不斷的實踐運用，也有自己的理解，也希望和我們社區(qū)的設計師們一起探討。

一、設計系統(tǒng) VS 風格指南：有什么區(qū)別？

1. 范圍

• 風格指南 – 通常側(cè)重于產(chǎn)品的視覺傳達，設計元素，如調(diào)色板、排版和圖標，外觀、材質(zhì)等。
• 設計系統(tǒng) – 涵蓋更廣泛的設計元素，包括用戶界面組件、模式和交互設計原則，零部件、組合形式。

2. 功能

• 風格指南 – 包括如何使用元素的基本準則，可以簡單理解為設計規(guī)范或參考；設計系統(tǒng)不僅如此，還提供了關于如何使用和實現(xiàn)每個元素的詳細文檔和指導。
• 設計系統(tǒng) – 包括可用于構(gòu)建組件的代碼塊和設計模板以及運用場景歸納。

3. 擴展

• 風格指南 – 為特定項目或產(chǎn)品而設計的，可能不易適配或擴展到其他項目或產(chǎn)品。
• 設計系統(tǒng) – 被設計成靈活且可擴展的，允許在團隊內(nèi)跨多個產(chǎn)品或項目中重復使用組件和模式。

4. 管理

與風格指南相比，設計系統(tǒng)通常需要制定更加結(jié)構(gòu)化的管理維護機制。這是因為設計系統(tǒng)涉及更復雜的元素，需要設計師、研發(fā)工程師和其他利益相關者之間的共創(chuàng)協(xié)作。

管理維護機制可確保設計系統(tǒng)長期保持一致性和最新性。我們也是制定新增、修改、審核、運用等維護流程，從單點（設計師）維護，到共創(chuàng)（多部門）協(xié)作，以及運用AI技術解決統(tǒng)計使用頻次、差異點等，原先需要投入大量設計師進行分析統(tǒng)計。

二、設計系統(tǒng)如何幫助提高可擴展性？

設計系統(tǒng)通過構(gòu)建一致、可復用的用戶界面和高效調(diào)用的交互和研發(fā)框架來幫助實現(xiàn)可擴展性。這不僅能夠節(jié)省大量時間和降低應用錯誤，并且讓企業(yè)或團隊能夠隨著時間推移或產(chǎn)品的發(fā)展不斷迭代設計標準，體現(xiàn)積累和復利的優(yōu)勢。

我們通過以下方式實現(xiàn)目標：

• 一致性 – 有助于我們構(gòu)建產(chǎn)品和服務的一致外觀和情感表達。通過系統(tǒng)中預制的用戶界面組件和設計模式庫，我們可以快速且輕松地搭建出新產(chǎn)品，同時還能夠保持一致的用戶體驗。
• 可復用性 – 模塊化設計，這意味著單個組件可在不同的產(chǎn)品或服務中重復使用。這樣就不需要大量額外設計，無需重復“造輪子”，也能將設計工作擴展并覆蓋整個團隊產(chǎn)品以及未來的產(chǎn)品。
• 高效性 – 通過提供一套預制的設計元素和指南（像不像預制菜，或許都是來自于設計系統(tǒng)），節(jié)省時間并減少錯誤。這對我們團隊從事大型項目特別有幫助，因為這可以讓我們更加專注于項目的差異化，再也不用重新設計每個元素。
• 靈活性 – 允許企業(yè)隨著需求的變化或業(yè)務發(fā)展而調(diào)整或迭代其設計標準。這樣就更容易根據(jù)需求擴大或縮小設計工作，再也不用犧牲或破壞一致性或質(zhì)量。

這也就衍生出可以通過“拖拉拽”的設計方式搭建頁面，從而也喚醒低代碼、無代碼的工具產(chǎn)品。在設計一些常規(guī)中后臺產(chǎn)品界面設計已經(jīng)無需視覺設計，而我們更多介入業(yè)務的梳理和產(chǎn)品架構(gòu)的工作范疇。

三、設計系統(tǒng)有哪些不同類型？

以下是我們歷經(jīng)多年項目所總結(jié)的設計系統(tǒng)類型。每當選擇實施其中的某一種類型的設計系統(tǒng)，主要是取決于項目的需求和目標。

1. 品牌設計系統(tǒng)

側(cè)重點在于創(chuàng)建和維護所有營銷和物料視覺設計的品牌一致性。包括調(diào)色板、排版、圖標、圖像和其他品牌相關元素的品牌指南。這并非只是品牌視覺識別系統(tǒng)（VI），而是涵蓋了 MI（品牌理念）、企業(yè)終端形象系統(tǒng)（SI）和行為識別（BI）等部分。作為設計師企業(yè)辦公室的導視系統(tǒng)、裝修設計，都會涉及到，雖然大多數(shù)人都會認為只要與美術相關的事情設計師都可以搞定，事實也是如此，但設計師就本應該是跨界的。

2. 用戶界面設計系統(tǒng)

側(cè)重點在于數(shù)字產(chǎn)品和服務創(chuàng)建和維護一致的用戶界面。包括用戶界面（UI）組件、風格指南、設計模式和交互設計原則指南。同樣，這并非只是界面視覺設計系統(tǒng)（UI），而是涵蓋了 UX（用戶操作）、MD（動效）等部分。如今，全棧式設計師也越來越多了，畢竟是科技時代造就新時代的工程設計師。

3. 模式庫

側(cè)重于用戶界面（UI）設計基礎模式，如按鈕、表單和導航菜單。包括一系列可在不同項目中重復使用的預設。

4. 設計語言

結(jié)合品牌和用戶界面設計系統(tǒng)，創(chuàng)造出一種整體設計方法。包括理念、原則、視覺、交互、行為等方面的設計指南。

5. 組件庫

組件庫與模式庫類似，但包括更詳細的文檔和每個組件的代碼段。開發(fā)人員通常使用它，通過提供可在項目中輕松實施的預建組件來加快開發(fā)過程。目前我們團隊已經(jīng)模式庫和組件庫合并打通，將設計模式和研發(fā)組件 一一 對應，所謂設計即代碼，代碼即設計。

6. 內(nèi)容設計系統(tǒng)

側(cè)重點在于所有產(chǎn)品和服務，營銷和設計的材料中，創(chuàng)建和維護一致的內(nèi)容策略。它包括語音語調(diào)、信息傳遞和內(nèi)容結(jié)構(gòu)指南。傳遞給用戶不僅僅只有圖像視覺，還有文字內(nèi)容，這往往被設計師所忽略。

四、設計系統(tǒng)：收益、最佳實踐和實施挑戰(zhàn)

設計系統(tǒng)可以幫助企業(yè)實現(xiàn)多個目標，如改進工作流程、提高設計一致性、減少開發(fā)時間和成本。

下面是幾個例子：

Airbnb – Airbnb 的設計系統(tǒng)名為 “Design Language System”（DLS），幫助他們在不同平臺和設備上實現(xiàn)品牌一致性。DLS 還改善了設計師和開發(fā)人員之間的協(xié)作，縮短了開發(fā)時間，提高了用戶體驗。

https://airbnb.design

IBM – IBM 的設計系統(tǒng)名為 “Carbon Design System”，幫助他們整合設計標準，并在所有產(chǎn)品中推廣更加一致的視覺語言。Carbon Design System 還幫助 IBM 的開發(fā)團隊縮短了產(chǎn)品上市時間，改善了用戶體驗。

https://carbondesignsystem.com

Atlassian-Atlassian 的設計系統(tǒng)名為”Atlassian Design Guidelines”（ADG），幫助他們在產(chǎn)品組合中實現(xiàn)了更加一致的設計。ADG 還幫助 Atlassian 簡化了開發(fā)流程，降低了開發(fā)成本，改善了用戶體驗。

https://atlassian.design

雖然設計系統(tǒng)可以為組織帶來巨大的利益，但是我們在推動和實施設計系統(tǒng)時也面臨很多挑戰(zhàn)。

其中一些挑戰(zhàn)包括：

• 保守派 – 設計系統(tǒng)通常需要對既定的設計和開發(fā)工作流程進行重大變革。對變革的抵觸會使新設計系統(tǒng)難以實施。
• 復雜性 – 設計系統(tǒng)可能很復雜，尤其是在企業(yè)擁有大量產(chǎn)品組合的情況下。創(chuàng)建和維護設計系統(tǒng)可能需要投入大量的時間和資源。
• 跨部門 – 實施設計系統(tǒng)需要不同部門利益相關者的支持。讓利益相關者相信設計系統(tǒng)的好處是一項挑戰(zhàn)。

為了克服這些挑戰(zhàn)，我們采取以下幾個步驟：

• 從小做起 – 實施設計系統(tǒng)是一項艱巨的任務。從小處著手，從單一產(chǎn)品或單一設計元素入手，有助于形成勢頭，并獲得利益相關者的支持。
• 利益共創(chuàng) – 在實施設計系統(tǒng)時，與利益相關者合作至關重要。讓利益相關者盡早參與進來，并在整個設計系統(tǒng)開發(fā)過程中鼓勵他們提供反饋和意見。
• 宣傳優(yōu)勢 – 向利益相關者宣傳設計系統(tǒng)的優(yōu)勢至關重要。強調(diào)設計系統(tǒng)如何改進工作流程、減少開發(fā)時間和成本，以及改善用戶體驗。

從哪里可以了解有關設計系統(tǒng)的更多信息？

設計系統(tǒng)可以根據(jù)企業(yè)的具體需求進行定制，包括從調(diào)色板和排版到表單、表格和導航菜單等更復雜的用戶界面組件。通過為每個元素提供詳細的文檔和指南，設計系統(tǒng)可確保項目中的每個人都站在同一起跑線上，并了解如何正確使用每個組件。以下是一些有關設計系統(tǒng)的資源，可幫助您開始設計自己的系統(tǒng)。

1.InVision 設計系統(tǒng)管理器 – 一個幫助團隊創(chuàng)建和維護設計系統(tǒng)的平臺。它提供創(chuàng)建設計庫、樣式指南和用戶界面組件的工具，并允許團隊協(xié)作和共享設計資產(chǎn)。

https://support.invisionapp.com/docs/design-system-manager-dsm

2. Figma 設計系統(tǒng) – 一種流行的設計工具，具有創(chuàng)建設計系統(tǒng)的功能。其設計系統(tǒng)功能包括可重復使用的組件、共享樣式以及用于存儲和共享設計資產(chǎn)的庫。

https://www.designsystemsforfigma.com

3. EightShapes Specs（Figma 插件）– 一種允許設計師直接在 Figma 界面中輕松創(chuàng)建設計規(guī)范和樣式指南的工具。該插件旨在通過自動執(zhí)行創(chuàng)建和維護規(guī)范所涉及的許多重復性任務，簡化為設計系統(tǒng)創(chuàng)建文檔的流程。

https://www.figma.com/community/plugin/1205622541257680763/eightshapes-specs

4. Design Systems Handbook – 創(chuàng)建設計系統(tǒng)的綜合指南。它涵蓋了如何定義設計系統(tǒng)、如何創(chuàng)建可重復使用的用戶界面組件以及如何記錄設計系統(tǒng)以便于參考等主題。

https://www.designbetter.co/design-systems-handbook

5. Atomic Design – 一種創(chuàng)建設計系統(tǒng)的方法，強調(diào)使用模塊化、可重復使用的用戶界面組件。它提供了一種結(jié)構(gòu)化的方法來創(chuàng)建可擴展且易于維護的設計系統(tǒng)。(大家熟知的原子設計）

https://uxdesign.cc/atomic-design-2022-what-we-can-learn-from-eames-and-other-design-giants-4d8e2f579daa?gi=7f581adec459

6. Shopify Polaris – Shopify 使用的設計系統(tǒng)，它是 GitHub 上的一個開源項目。它包括排版、色彩、布局和用戶界面組件指南，以及為希望在自己的項目中實施該設計系統(tǒng)的開發(fā)人員提供的資源。

https://polaris.shopify.com

7. Design System Podcast – 一個探索設計系統(tǒng)世界的播客。播客內(nèi)容包括對該領域?qū)＜业牟稍L，以及對設計系統(tǒng)管理、文檔和采用等主題的討論。

https://www.designsystemspodcast.com

8. Design System Slack Community – 面向設計師、開發(fā)人員和其他對設計系統(tǒng)感興趣的專業(yè)人士的論壇。它為創(chuàng)建和維護設計系統(tǒng)相關主題的討論和合作提供了空間。

https://www.design.systems

9. Design System Repo – 設計系統(tǒng)示例、資源和工具的精選集。它提供大量有關設計系統(tǒng)的信息，包括案例研究、風格指南和設計系統(tǒng)庫。

https://designsystemsrepo.com