▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 4809 字，預(yù)計(jì)閱讀 13 分鐘

TCC 情報(bào)局的 第 79 篇 干貨分享

2021 年的 第 67 篇

TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是李澤慧。你是否還在為重復(fù)設(shè)計(jì)內(nèi)容而發(fā)愁？你是否需要向其他開發(fā)人員反復(fù)解釋設(shè)計(jì)內(nèi)容？你是否為多種產(chǎn)品開發(fā)而困擾？解決問題的系統(tǒng)來了，設(shè)計(jì)系統(tǒng)能夠很好地將這些問題解決，幫助我們快速構(gòu)建產(chǎn)品，讓我們一起來看看設(shè)計(jì)系統(tǒng)的有哪些優(yōu)點(diǎn)來幫我們解決這些問題吧！

Huī Lín的插畫

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

但是，如果你瀏覽有關(guān)設(shè)計(jì)系統(tǒng)的文章，你可能會(huì)注意到其中大多數(shù)都只是告訴你如何創(chuàng)建一個(gè)系統(tǒng)。本文以一種略有不同的方式介紹這一熱門主題，不僅涵蓋一般的設(shè)計(jì)系統(tǒng)，還涵蓋我們作為 Shakuro 的開發(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è)開始。

1. 設(shè)計(jì)系統(tǒng)及其組成部分

1. What design systems are and what they are made of

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

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

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

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

• 一組可調(diào)用的界面組件（換句話說，UI 工具包）例如圖標(biāo)、按鈕、插圖等。

• 使用這些組件的必要規(guī)則。

• 排版指南。

• 不同類型設(shè)備上的狀態(tài)和行為規(guī)定。

• 動(dòng)畫和聲音設(shè)計(jì)指南。

• 用戶體驗(yàn)寫作和品牌展示的規(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 年開始研究這個(gè)想法，并在 2014 年提出了一個(gè)真實(shí)的設(shè)計(jì)系統(tǒng)。從那時(shí)起，設(shè)計(jì)系統(tǒng)的主題開始特別受設(shè)計(jì)領(lǐng)域歡迎和討論。

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

2. 設(shè)計(jì)系統(tǒng)的優(yōu)點(diǎn)

2. 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)品相似。作為一家為許多不同客戶設(shè)計(jì)和開發(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)勢來節(jié)省時(shí)間和減少錯(cuò)誤。

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

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

根據(jù) Figma 團(tuán)隊(duì)進(jìn)行的研究，當(dāng)其參與者（設(shè)計(jì)人員，開發(fā)人員等）訪問設(shè)計(jì)系統(tǒng)時(shí)，他們將目標(biāo)完成的速度提高了34％，我們根據(jù)自己實(shí)踐的經(jīng)驗(yàn)發(fā)現(xiàn)確實(shí)是真的。通過為項(xiàng)目構(gòu)建可重復(fù)使用的組件的系統(tǒng)并定義其使用規(guī)則，整個(gè)團(tuán)隊(duì)變得更容易（再次）使用它們。例如，以后我們 需要用一個(gè)新的功能來擴(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)站的最簡單的組件。這個(gè)想法是，開始設(shè)計(jì)時(shí)不使用頁面布局，而是使用較小的對(duì)象（字體，填充，輸入字段，動(dòng)畫等）進(jìn)行設(shè)計(jì)，這些對(duì)象以后可用來逐步構(gòu)建更復(fù)雜的實(shí)體，直到完成整個(gè)頁面為止。

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

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

作為項(xiàng)目的一種通用語言，設(shè)計(jì)系統(tǒng)還有助于最大限度地減少新設(shè)計(jì)師和開發(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è)主題可能聽起來不太令人興奮，因?yàn)樗袊?yán)格的規(guī)則和整齊組織好的組件。但令人興奮地是，我們可以通過設(shè)計(jì)系統(tǒng)更快地設(shè)計(jì)，意味可以著開發(fā)更經(jīng)濟(jì)實(shí)惠的應(yīng)用程序和網(wǎng)站，而不會(huì)影響它們的質(zhì)量（實(shí)際上最終會(huì)增強(qiáng)它）。這是設(shè)計(jì)系統(tǒng)多年不斷迭代帶來的好處，對(duì)于需要多年制作的大型項(xiàng)目來說，這顯得尤其有意義。

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

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

3）更好的一致性

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

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

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

4）更好的質(zhì)量

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

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

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

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

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

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

目前的情況下，當(dāng)分布式設(shè)計(jì)和開發(fā)團(tuán)隊(duì)人數(shù)越來越多時(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ì)交付給代碼的問題 

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

例如，設(shè)計(jì)師能夠在 Figma 中創(chuàng)建一個(gè)組件庫，并將它們應(yīng)用到所有必要的布局中。反過來，開發(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)，這意味著更簡單的項(xiàng)目支持，快速更新的可能性等等。

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

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

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

3. 面對(duì)的挑戰(zhàn)

3. Challenges of using the design system approach

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

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

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

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

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

作者：Kate Shokurova

譯者：劉昱茜

審核：吳鵬飛、李澤慧、張聿彤

編輯：孫淑雅

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

往期精選文章：