編輯導(dǎo)語(yǔ)：設(shè)計(jì)系統(tǒng)的搭建可以幫助提升設(shè)計(jì)效率，推動(dòng)產(chǎn)品開(kāi)發(fā)，并一定程度上降低設(shè)計(jì)成本，推動(dòng)設(shè)計(jì)開(kāi)發(fā)上的一致性，也能協(xié)調(diào)設(shè)計(jì)團(tuán)隊(duì)的多項(xiàng)業(yè)務(wù)。本篇文章里，作者就設(shè)計(jì)系統(tǒng)的構(gòu)成、優(yōu)點(diǎn)等方面進(jìn)行了總結(jié)，一起來(lái)看一下。

構(gòu)建設(shè)計(jì)系統(tǒng)有助于將設(shè)計(jì)組件統(tǒng)一為一個(gè)有意義的實(shí)體，簡(jiǎn)化設(shè)計(jì)和開(kāi)發(fā)過(guò)程，從而節(jié)省開(kāi)發(fā)人員的時(shí)間。

但是，如果你瀏覽有關(guān)設(shè)計(jì)系統(tǒng)的文章，你可能會(huì)注意到其中大多數(shù)都只是告訴你如何創(chuàng)建一個(gè)系統(tǒng)。

本文以一種略有不同的方式介紹這一熱門(mén)主題，不僅涵蓋一般的設(shè)計(jì)系統(tǒng)，還涵蓋我們作為 Shakuro 的開(kāi)發(fā)和設(shè)計(jì)外包公司使用設(shè)計(jì)系統(tǒng)的相關(guān)原則所得到的經(jīng)驗(yàn)。系統(tǒng)化的 UI / UX 設(shè)計(jì)方法可以在很多方面幫助我們創(chuàng)建更好的網(wǎng)站和應(yīng)用程序，標(biāo)題種提到的“更快”只是一個(gè)開(kāi)始。

一、設(shè)計(jì)系統(tǒng)及其組成部分?What design systems are and what they are made of

一個(gè)設(shè)計(jì)系統(tǒng)是一套設(shè)計(jì)組件和規(guī)則，用來(lái)規(guī)范他們的使用并定義產(chǎn)品的理念。它聽(tīng)起來(lái)像是樣式指南，但區(qū)別在于樣式指南是靜態(tài)文檔，其目標(biāo)非常明確——準(zhǔn)確定義設(shè)計(jì)元素在各種場(chǎng)景，事件和媒介中的用法。樣式庫(kù)還有一個(gè)概念，從技術(shù)上來(lái)講，它是 UI 組件的簡(jiǎn)單集合。

不同的設(shè)計(jì)師理解和定義設(shè)計(jì)系統(tǒng)的方式可能會(huì)有所不同。在本文中，設(shè)計(jì)系統(tǒng)將項(xiàng)目的樣式庫(kù)及其樣式指南整合到一個(gè)實(shí)體中，將所有內(nèi)容組合在一起并使其易于擴(kuò)展。

產(chǎn)品的設(shè)計(jì)系統(tǒng)包括幾個(gè)大的部分，具體數(shù)量和內(nèi)容取決于具體公司或產(chǎn)品。

設(shè)計(jì)系統(tǒng)可能包含的組件有：

• 一組可調(diào)用的界面組件（換句話(huà)說(shuō)，UI 工具包）例如圖標(biāo)、按鈕、插圖等。
• 使用這些組件的必要規(guī)則。
• 排版指南。
• 不同類(lèi)型設(shè)備上的狀態(tài)和行為規(guī)定。
• 動(dòng)畫(huà)和聲音設(shè)計(jì)指南。
• 用戶(hù)體驗(yàn)寫(xiě)作和品牌展示的規(guī)則，例如公司的價(jià)值觀和品牌形象識(shí)別設(shè)計(jì)。

重要的是要注意，設(shè)計(jì)系統(tǒng)的目的是形成一個(gè)產(chǎn)品的全面圖景，因此即使將實(shí)際的白色 #FFFFFF 顏色用于空白，而實(shí)際的黑色＃000000 顏色用于文本，也需要在文檔中注明。

下面看一下我們的項(xiàng)目種設(shè)計(jì)系統(tǒng)的顏色部分：

設(shè)計(jì)系統(tǒng)概念誕生于 20 世紀(jì)中葉，但是如果更廣泛地看待這個(gè)概念，可以追溯到中世紀(jì)。關(guān)于數(shù)字設(shè)計(jì)，第一次有意義的大規(guī)模網(wǎng)絡(luò)統(tǒng)一的嘗試是由谷歌發(fā)起的 Material Design。他們從 2011 年開(kāi)始研究這個(gè)想法，并在 2014 年提出了一個(gè)真實(shí)的設(shè)計(jì)系統(tǒng)。從那時(shí)起，設(shè)計(jì)系統(tǒng)的主題開(kāi)始特別受設(shè)計(jì)領(lǐng)域歡迎和討論。

此外，系統(tǒng)化的概念對(duì)于實(shí)現(xiàn)前端和一般的 UI 時(shí)使用的組件方法來(lái)說(shuō)是特別有意義的。React、Vue、Angular 和其他流行的前端框架都使用基于組件的范式。因此，即使是小型項(xiàng)目團(tuán)隊(duì)也要考慮創(chuàng)建設(shè)計(jì)系統(tǒng)，更不用說(shuō)像 Airbnb、Uber 和 IBM 這樣的大公司了，他們自己構(gòu)建大型設(shè)計(jì)系統(tǒng)來(lái)加強(qiáng)和維護(hù)自己的品牌形象。

二、設(shè)計(jì)系統(tǒng)的優(yōu)點(diǎn)?Benefits of using the design system approach for creating different products for different businesses

如果你對(duì)設(shè)計(jì)系統(tǒng)在現(xiàn)實(shí)生活中的樣子感興趣，你可能會(huì)發(fā)現(xiàn)一個(gè)設(shè)計(jì)系統(tǒng)的案例清單：包括上面提到的產(chǎn)品公司以及 Atlassian、Shopify、Spotify 和星巴克這樣的公司。產(chǎn)品公司設(shè)計(jì)系統(tǒng)的目的是確保一種產(chǎn)品與另一種產(chǎn)品相似。

作為一家為許多不同客戶(hù)設(shè)計(jì)和開(kāi)發(fā)的服務(wù)公司，我們采用不同的方法，從設(shè)計(jì)系統(tǒng)中獲得最佳效果，同時(shí)能夠令團(tuán)隊(duì)規(guī)模較小。

與大型企業(yè)可能有 10-20 人的團(tuán)隊(duì)全職管理他們的每個(gè)系統(tǒng)不同，我們?yōu)槊總€(gè)產(chǎn)品設(shè)計(jì)一個(gè)系統(tǒng)，創(chuàng)建一種小型產(chǎn)品團(tuán)隊(duì)。在這種情況下，設(shè)計(jì)系統(tǒng)更像是一組規(guī)則和系統(tǒng)性元素的重復(fù)使用，而不是像產(chǎn)品團(tuán)隊(duì)通常做的那樣，成為一個(gè)具有超級(jí)深度的完整案例。同時(shí)，我們保留了設(shè)計(jì)系統(tǒng)的主要特點(diǎn)，并利用其主要優(yōu)勢(shì)來(lái)節(jié)省時(shí)間和減少錯(cuò)誤。

今天，任何網(wǎng)站或 APP 都是一個(gè)商業(yè)問(wèn)題的解決方案，需要一個(gè)有條不紊的方法。因此，系統(tǒng)的方法能夠給我們帶來(lái)以下幾處優(yōu)點(diǎn)。

1. 更快的設(shè)計(jì)（和開(kāi)發(fā)）過(guò)程

根據(jù) Figma 團(tuán)隊(duì)進(jìn)行的研究，當(dāng)其參與者（設(shè)計(jì)人員、開(kāi)發(fā)人員等）訪問(wèn)設(shè)計(jì)系統(tǒng)時(shí)，他們將目標(biāo)完成的速度提高了34％，我們根據(jù)自己實(shí)踐的經(jīng)驗(yàn)發(fā)現(xiàn)確實(shí)是真的。

通過(guò)為項(xiàng)目構(gòu)建可重復(fù)使用的組件的系統(tǒng)并定義其使用規(guī)則，整個(gè)團(tuán)隊(duì)變得更容易（再次）使用它們。例如，以后我們 需要用一個(gè)新的功能來(lái)擴(kuò)展一個(gè)項(xiàng)目或擴(kuò)大他的規(guī)模時(shí)，我們可以從已經(jīng)存在的系統(tǒng)中快速構(gòu)建所需的內(nèi)容。

設(shè)計(jì)師布拉德·弗羅斯特（Brad Frost）設(shè)計(jì)了一種被廣泛使用的原子方法，該方法本質(zhì)上是將網(wǎng)站組成分解為用于設(shè)計(jì)整個(gè)網(wǎng)站的最簡(jiǎn)單的組件。這個(gè)想法是，開(kāi)始設(shè)計(jì)時(shí)不使用頁(yè)面布局，而是使用較小的對(duì)象（字體、填充、輸入字段、動(dòng)畫(huà)等）進(jìn)行設(shè)計(jì)，這些對(duì)象以后可用來(lái)逐步構(gòu)建更復(fù)雜的實(shí)體，直到完成整個(gè)頁(yè)面為止。

設(shè)計(jì)系統(tǒng)除了可以形成每個(gè)人都可以理解和依賴(lài)的清晰結(jié)構(gòu)之外，它還有助于將產(chǎn)品設(shè)計(jì)視為一個(gè)實(shí)體，或者更確切地說(shuō)，一個(gè)有機(jī)體。這個(gè)想法出現(xiàn)在 Material Design 系統(tǒng)誕生之前，并影響了 Material Design 系統(tǒng)以及其他公司各種樣式庫(kù)的誕生。

實(shí)際上，這意味著我們可以收集原子（即最小的設(shè)計(jì)元素）并確定它們的行為，使用 Figma 的功能（自動(dòng)布局、組件和變量）將它們連接成一個(gè)系統(tǒng)。在我們做最大的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目之一 CGMA 的教育平臺(tái)時(shí)，我們尤其感受到了設(shè)計(jì)系統(tǒng)帶來(lái)的便利。

作為項(xiàng)目的一種通用語(yǔ)言，設(shè)計(jì)系統(tǒng)還有助于最大限度地減少新設(shè)計(jì)師和開(kāi)發(fā)人員入職所需了解項(xiàng)目的時(shí)間。新成員可以更快地了解規(guī)則并執(zhí)行有效的任務(wù)，而不會(huì)在學(xué)習(xí)上浪費(fèi)太多時(shí)間。

2. 降低成本

當(dāng)你和團(tuán)隊(duì)之外的人（尤其是不熟悉設(shè)計(jì)制作細(xì)節(jié)和現(xiàn)實(shí)的人）討論設(shè)計(jì)系統(tǒng)時(shí)，這個(gè)主題可能聽(tīng)起來(lái)不太令人興奮，因?yàn)樗袊?yán)格的規(guī)則和整齊組織好的組件。

但令人興奮地是，我們可以通過(guò)設(shè)計(jì)系統(tǒng)更快地設(shè)計(jì)，意味可以著開(kāi)發(fā)更經(jīng)濟(jì)實(shí)惠的應(yīng)用程序和網(wǎng)站，而不會(huì)影響它們的質(zhì)量（實(shí)際上最終會(huì)增強(qiáng)它）。這是設(shè)計(jì)系統(tǒng)多年不斷迭代帶來(lái)的好處，對(duì)于需要多年制作的大型項(xiàng)目來(lái)說(shuō)，這顯得尤其有意義。

更重要的是，不僅設(shè)計(jì)師能夠享受設(shè)計(jì)系統(tǒng)帶來(lái)的好處和更簡(jiǎn)單的工作流程。這也意味著其他成本高昂的團(tuán)隊(duì)成員例如開(kāi)發(fā)人員也有一小部分代碼現(xiàn)成可以直接調(diào)用，并且要完成的瑣碎任務(wù)更少。使用系統(tǒng)化的方法有助于簡(jiǎn)化所有參與者的設(shè)計(jì)過(guò)程，使其更可預(yù)測(cè)，從而更高效。

Proko 是我們的另一個(gè)長(zhǎng)期網(wǎng)站設(shè)計(jì)項(xiàng)目，它受益于設(shè)計(jì)系統(tǒng)的實(shí)施：

3. 更好的一致性

設(shè)計(jì)的一致性意味著項(xiàng)目中的所有元素都具有視覺(jué)和功能上的相似性。字體、顏色、按鈕、網(wǎng)格、大小和邊距的視覺(jué)效果在整個(gè)項(xiàng)目中一致，并構(gòu)成一個(gè)連貫的系統(tǒng)。在元素的外觀和行為上遵循非常明確的規(guī)則，在不同的平臺(tái)上創(chuàng)造一致的體驗(yàn)并使用戶(hù)感到舒適就變得容易得多。

為了說(shuō)明這一點(diǎn)，讓我們以按鈕之類(lèi)的元素為例。它的每個(gè)屬性，如大小、半徑、顏色、排版細(xì)節(jié)等都被清晰地定義，使設(shè)計(jì)師很難犯錯(cuò)誤或產(chǎn)生引發(fā)用戶(hù)混淆問(wèn)題。

下面是我們 ChannelD 項(xiàng)目設(shè)計(jì)系統(tǒng)中按鈕部分的一部分：

4. 更好的質(zhì)量

在互聯(lián)網(wǎng)中，有數(shù)以百萬(wàn)計(jì)的網(wǎng)站和移動(dòng)應(yīng)用程序，所以制作新網(wǎng)站或應(yīng)用程序的過(guò)程需要盡可能高效。另外，你必須找到一個(gè)可以為產(chǎn)品制造差異化的機(jī)會(huì)點(diǎn)，以使項(xiàng)目脫穎而出。

最終用戶(hù)不會(huì)去刻意考慮設(shè)計(jì)的一致性，但他們會(huì)感覺(jué)到。當(dāng)產(chǎn)品設(shè)計(jì)中的每一個(gè)元素都與其他元素和諧地聯(lián)系在一起，交互是可預(yù)測(cè)的，并且很容易掌握新功能時(shí)，用戶(hù)體驗(yàn)就會(huì)變得令人滿(mǎn)意。

5. 能夠?qū)⒏鄷r(shí)間花在復(fù)雜問(wèn)題上

有了設(shè)計(jì)系統(tǒng)，將為我們節(jié)省時(shí)間，而且不需要每次都重新制作新的東西，留給設(shè)計(jì)師有更多的時(shí)間做其他更復(fù)雜的任務(wù)，比如創(chuàng)建更好的用戶(hù)流。

最終，設(shè)計(jì)系統(tǒng)對(duì)客戶(hù)、用戶(hù)和設(shè)計(jì)師本身都有益處。起初，花費(fèi)在構(gòu)建系統(tǒng)上的時(shí)間似乎除了影響團(tuán)隊(duì)的生產(chǎn)力外，什么都沒(méi)有，但后來(lái)，進(jìn)一步開(kāi)發(fā)產(chǎn)品時(shí)，設(shè)計(jì)師在簡(jiǎn)單的視覺(jué)方面需要花費(fèi)的時(shí)間越來(lái)越少，而將更多的時(shí)間花在設(shè)計(jì)更好的方面用戶(hù)體驗(yàn)上。項(xiàng)目越大，效果越明顯。

6. 一種更協(xié)調(diào)的團(tuán)隊(duì)合作的通用語(yǔ)言

目前的情況下，當(dāng)分布式設(shè)計(jì)和開(kāi)發(fā)團(tuán)隊(duì)人數(shù)越來(lái)越多時(shí)，我們需要不同團(tuán)隊(duì)成員之間更好的溝通。當(dāng)擁有一個(gè)具有設(shè)計(jì)系統(tǒng)的項(xiàng)目供每個(gè)人參考時(shí)，可以節(jié)省大量時(shí)間，否則會(huì)浪費(fèi)時(shí)間在反復(fù)的溝通上。當(dāng)每個(gè)細(xì)節(jié)都被定義時(shí)，可能出現(xiàn)錯(cuò)誤和誤解的可能就會(huì)小得多。

看看他們?cè)?Atlassian 是如何做到的，它有一個(gè)設(shè)計(jì)系統(tǒng)，其中每個(gè)元素都有很好的規(guī)范，包括外觀、示例、代碼片段以及對(duì)其如何結(jié)合的詳細(xì)原則描述。

7. 解決將設(shè)計(jì)交付給代碼的問(wèn)題

設(shè)計(jì)師和前端開(kāi)發(fā)人員協(xié)同工作，充分利用設(shè)計(jì)系統(tǒng)進(jìn)行假設(shè)檢驗(yàn)和產(chǎn)品開(kāi)發(fā)。

例如，設(shè)計(jì)師能夠在 Figma 中創(chuàng)建一個(gè)組件庫(kù)，并將它們應(yīng)用到所有必要的布局中。反過(guò)來(lái)，開(kāi)發(fā)人員只需調(diào)用系統(tǒng)中先前實(shí)現(xiàn)的組件。

系統(tǒng)2的變體 作者：Wojciech Zieliński

8. 更易維護(hù)

設(shè)計(jì)系統(tǒng)可讓設(shè)計(jì)師在任何地方輕松進(jìn)行設(shè)計(jì)，實(shí)現(xiàn)外觀甚至是比較大的設(shè)計(jì)改動(dòng)，這意味著更簡(jiǎn)單的項(xiàng)目支持、快速更新的可能性等等。

開(kāi)發(fā)新功能后，我們可以擴(kuò)展了它的設(shè)計(jì)系統(tǒng)，幫助其發(fā)展。只要一個(gè)項(xiàng)目存在，它的設(shè)計(jì)系統(tǒng)就會(huì)存在和發(fā)展。出于這個(gè)原因，一些專(zhuān)家將整個(gè)設(shè)計(jì)系統(tǒng)概念稱(chēng)為項(xiàng)目的“活文檔”，因?yàn)樵O(shè)計(jì)系統(tǒng)需要在產(chǎn)品的整個(gè)生命周期中進(jìn)行維護(hù)，從長(zhǎng)遠(yuǎn)來(lái)看最初花費(fèi)時(shí)間構(gòu)建它是值得的。

因此，產(chǎn)品的整體質(zhì)量得到提高。

如果不使用系統(tǒng)的方法，整個(gè)業(yè)務(wù)開(kāi)始看起來(lái)更像是藝術(shù)展現(xiàn)。所以，設(shè)計(jì)過(guò)程必須遵循特定的規(guī)則和約束。

三、面對(duì)的挑戰(zhàn)?Challenges of using the design system approach

需要注意的是，設(shè)計(jì)系統(tǒng)并不是解決所有問(wèn)題的靈丹妙藥，也不是每個(gè)項(xiàng)目都需要一個(gè)。設(shè)計(jì)師作為專(zhuān)業(yè)人員的工作是分析項(xiàng)目的當(dāng)前（和未來(lái)）規(guī)模，并決定在不超出預(yù)算的情況下需要維護(hù)設(shè)計(jì)系統(tǒng)到什么程度。

如果你不需要為登陸頁(yè)面構(gòu)建任何復(fù)雜類(lèi)型系統(tǒng)，一個(gè)簡(jiǎn)單的 UI 工具包就足夠了。同時(shí)，如果沒(méi)有清晰的結(jié)構(gòu)，一個(gè)更大的項(xiàng)目最終會(huì)變得緩慢、不一致且難以維持下去。

更重要的是，需要一定的技能來(lái)駕馭系統(tǒng)化的方法，而不至于將新產(chǎn)品（或其部分）變成打補(bǔ)丁的混亂局面，這只會(huì)阻礙產(chǎn)品的開(kāi)發(fā)過(guò)程。

設(shè)計(jì)系統(tǒng)是整個(gè)數(shù)字設(shè)計(jì)的邏輯化延展，極大地簡(jiǎn)化了開(kāi)發(fā)大型產(chǎn)品的工作。一方面，它使我們能夠更快地更新它們，使用戶(hù)體驗(yàn)更流暢，使開(kāi)發(fā)過(guò)程更簡(jiǎn)單。另一方面，設(shè)計(jì)系統(tǒng)有助于我們創(chuàng)建統(tǒng)一的界面。

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

作者：Kate Shokurova

原文：https://uxplanet.org/using-the-design-system-approach-to-build-products-faster-80ef647683f3

譯者：劉昱茜；審核：吳鵬飛、李澤慧、張聿彤；編輯：孫淑雅

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議