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

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

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

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

1. 范圍

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

2. 功能

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

3. 擴(kuò)展

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

4. 管理

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

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

二、設(shè)計(jì)系統(tǒng)如何幫助提高可擴(kuò)展性？

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

我們通過(guò)以下方式實(shí)現(xiàn)目標(biāo)：

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

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

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

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

1. 品牌設(shè)計(jì)系統(tǒng)

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

2. 用戶界面設(shè)計(jì)系統(tǒng)

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

3. 模式庫(kù)

側(cè)重于用戶界面（UI）設(shè)計(jì)基礎(chǔ)模式，如按鈕、表單和導(dǎo)航菜單。包括一系列可在不同項(xiàng)目中重復(fù)使用的預(yù)設(shè)。

4. 設(shè)計(jì)語(yǔ)言

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

5. 組件庫(kù)

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

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

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

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

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

下面是幾個(gè)例子：

Airbnb – Airbnb 的設(shè)計(jì)系統(tǒng)名為 “Design Language System”（DLS），幫助他們?cè)诓煌脚_(tái)和設(shè)備上實(shí)現(xiàn)品牌一致性。DLS 還改善了設(shè)計(jì)師和開(kāi)發(fā)人員之間的協(xié)作，縮短了開(kāi)發(fā)時(shí)間，提高了用戶體驗(yàn)。

https://airbnb.design

IBM – IBM 的設(shè)計(jì)系統(tǒng)名為 “Carbon Design System”，幫助他們整合設(shè)計(jì)標(biāo)準(zhǔn)，并在所有產(chǎn)品中推廣更加一致的視覺(jué)語(yǔ)言。Carbon Design System 還幫助 IBM 的開(kāi)發(fā)團(tuán)隊(duì)縮短了產(chǎn)品上市時(shí)間，改善了用戶體驗(yàn)。

https://carbondesignsystem.com

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

https://atlassian.design

雖然設(shè)計(jì)系統(tǒng)可以為組織帶來(lái)巨大的利益，但是我們?cè)谕苿?dòng)和實(shí)施設(shè)計(jì)系統(tǒng)時(shí)也面臨很多挑戰(zhàn)。

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

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

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

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

從哪里可以了解有關(guān)設(shè)計(jì)系統(tǒng)的更多信息？

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

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

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

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

https://www.designsystemsforfigma.com

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

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

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

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

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

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

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

https://polaris.shopify.com

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

https://www.designsystemspodcast.com

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

https://www.design.systems

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

https://designsystemsrepo.com