這是迄今為止對設(shè)計(jì)系統(tǒng)最人性化的定義之一，它把設(shè)計(jì)過程說成是共同創(chuàng)造，而不是僅僅是設(shè)計(jì)結(jié)果的來源。

開發(fā)人員對設(shè)計(jì)系統(tǒng)的理解各不相同，設(shè)計(jì)師的貢獻(xiàn)也各不相同，設(shè)計(jì)作家們可能會給出不同的定義。所有的大公司、小公司或代理機(jī)構(gòu)們都有不同的價(jià)值觀和規(guī)則，以及創(chuàng)建設(shè)計(jì)系統(tǒng)的管理過程，但目標(biāo)都是一致不變的：即減少技術(shù)和設(shè)計(jì)的工作負(fù)擔(dān)。

設(shè)計(jì)系統(tǒng)不是一成不變的——它是一個(gè)不斷進(jìn)行的工作，通過開放迭代，基于規(guī)則、約束和原則這三個(gè)基石下改善、適應(yīng)和構(gòu)建代碼碼庫并開展設(shè)計(jì)。

二、規(guī)則、約束和原則?Rules, Constraints, and Principles

設(shè)計(jì)系統(tǒng)由規(guī)則、約束和原則組成。創(chuàng)建這三個(gè)構(gòu)件時(shí)要考慮到它們將如何在整個(gè)產(chǎn)品中擴(kuò)展，并創(chuàng)建一致的用戶體驗(yàn)。下面讓我們更深入地來研究這些模塊。

1. 規(guī)則

如何為組建設(shè)計(jì)工具創(chuàng)造氛圍？創(chuàng)作者和貢獻(xiàn)者如何確保每個(gè)人都在使用最新版本的設(shè)計(jì)系統(tǒng)？

規(guī)則的制定是為了讓每個(gè)人都能理解和解釋設(shè)計(jì)系統(tǒng)中的內(nèi)容。它們被細(xì)分為價(jià)值和目的，作為一種基礎(chǔ)資源，幫助團(tuán)隊(duì)中的每個(gè)人和新用戶基于現(xiàn)有的元素進(jìn)行設(shè)計(jì)。規(guī)則是一個(gè)管理體系，為設(shè)計(jì)系統(tǒng)的工作流程奠定了基礎(chǔ)。

一個(gè)系統(tǒng)就是一個(gè)框架，是一份規(guī)則手冊。它會告訴你這些模式是如何協(xié)同工作的 (布拉德·弗羅斯特）。

來源：Atlassian設(shè)計(jì)系統(tǒng) | Source: Atlassian Design System

規(guī)則手冊的價(jià)值部分管理著設(shè)計(jì)系統(tǒng)的流程，它能將團(tuán)隊(duì)統(tǒng)一在約束和原則周圍。它是真理的源泉，是設(shè)計(jì)和代碼的記錄系統(tǒng)。目的部分定義了個(gè)人要如何利用新的元素為設(shè)計(jì)系統(tǒng)做出貢獻(xiàn)。

它在整個(gè)團(tuán)隊(duì)中建立了共同的語言和溝通交流，這反過來又創(chuàng)造了更好的溝通、理論以及自信和樂觀的精神。

2. 約束

創(chuàng)建和維護(hù)一個(gè)有效的設(shè)計(jì)系統(tǒng)是一個(gè)挑戰(zhàn)。因?yàn)橐龀鲈S多小的決策，比如：應(yīng)該定義多少種字體？我們應(yīng)該如何構(gòu)建顏色的使用模式？我們在哪停止？設(shè)計(jì)系統(tǒng)中的約束有助于簡化每一個(gè)決定，提供一些限制和更多可能性。

約束定義了顏色的使用、聲音、布局、多媒體、排版、數(shù)據(jù)可視化、表單設(shè)計(jì)、移動端行為等一般準(zhǔn)則。它們在整個(gè)設(shè)計(jì)系統(tǒng)中利用其獨(dú)特的差異化和品牌特征元素，使每個(gè)數(shù)字觸點(diǎn)成為統(tǒng)一的體驗(yàn)。

來源：Atlassian設(shè)計(jì)系統(tǒng) | Source: Atlassian Design System

當(dāng)設(shè)計(jì)師從約束、限制和可能性的共同點(diǎn)出發(fā)去設(shè)計(jì)和構(gòu)造界面時(shí)，用戶總是能夠知道當(dāng)他們與產(chǎn)品交互時(shí)他們將體驗(yàn)到什么。

從用戶體驗(yàn)的角度來看，用可擴(kuò)展的、共同的、一致的約束條件來設(shè)計(jì)界面，能為用戶帶來熟悉感。從技術(shù)角度來看，約束意味著可以使得開發(fā)人員的效率更高、可擴(kuò)展性更強(qiáng)、重復(fù)工作更少。

3. 原則

設(shè)計(jì)系統(tǒng)的原則提供了最初似乎沒有看到的問題的答案。設(shè)計(jì)和開發(fā)團(tuán)隊(duì)經(jīng)常以他們自己的一套基本標(biāo)準(zhǔn)來運(yùn)作，用于評估設(shè)計(jì)的質(zhì)量是否能夠維持一致的數(shù)字化用戶體驗(yàn)。但是，當(dāng)我們創(chuàng)建一個(gè)統(tǒng)一的設(shè)計(jì)系統(tǒng)時(shí)，將所有標(biāo)準(zhǔn)統(tǒng)一成為共同原則變得非常重要。

如何去定義必要的原則？如何知道什么是不可缺少的，什么是不穩(wěn)定的？你怎么知道這些是能夠指導(dǎo)你的愿景和目標(biāo)的原則？

設(shè)計(jì)系統(tǒng)的原則對每個(gè)人來說都是可重復(fù)使用的標(biāo)準(zhǔn)。這些原則應(yīng)該取代本能的標(biāo)準(zhǔn)，讓人們能夠共同理解如何去塑造用戶體驗(yàn)。因此我們必須制定設(shè)計(jì)原則，以幫助解決從頭到尾設(shè)計(jì)軟件的復(fù)雜性！

IBM 的 Carbon 設(shè)計(jì)系統(tǒng)將其原則定義為結(jié)果背后的意圖。他們相信偉大的體驗(yàn)會給用戶帶來有意義的結(jié)果，會直擊用戶的內(nèi)心。要設(shè)計(jì)出優(yōu)秀的用戶體驗(yàn)，你必須了解它們是如何組合在一起的，以及它們?yōu)槭裁茨軌蛟诟顚哟紊嫌|動人們。

來源：Carbon設(shè)計(jì)系統(tǒng) | Source: Carbon Design System

在寫下設(shè)計(jì)系統(tǒng)的原則時(shí)，團(tuán)隊(duì)?wèi)?yīng)該關(guān)注以下幾點(diǎn)：

• 個(gè)人指導(dǎo)并決策這一原則能使團(tuán)隊(duì)更快達(dá)成一致。它們應(yīng)該作為共同的支柱，在整個(gè)產(chǎn)品中創(chuàng)造和諧和凝聚力。
• 隨著產(chǎn)品的發(fā)展，設(shè)計(jì)系統(tǒng)會隨著時(shí)間的推移而修改，設(shè)計(jì)系統(tǒng)的原則應(yīng)該協(xié)調(diào)整個(gè)團(tuán)隊(duì)，并幫助團(tuán)隊(duì)成員跟進(jìn)修改的速度。
• 指導(dǎo)設(shè)計(jì)系統(tǒng)的原則應(yīng)該為如何處理和解決用戶體驗(yàn)問題提供一個(gè)具有明確清晰的過程
• 它們應(yīng)該要有助于加快設(shè)計(jì)系統(tǒng)的構(gòu)建并消除不必要的摩擦。
• 它們應(yīng)該在每一步中明確預(yù)期，幫助解決問題，讓團(tuán)隊(duì)能夠?qū)Ｗ⒂谑稚系墓ぷ?，而不必?fù)?dān)心下一步該做什么。
• 它們應(yīng)該以一致的語氣和語調(diào)來寫，整個(gè)設(shè)計(jì)系統(tǒng)也應(yīng)該如此。

設(shè)計(jì)系統(tǒng)的原則具有一系列明確定義的過程、指導(dǎo)方針和標(biāo)準(zhǔn)，每個(gè)都有不同的目標(biāo)。作為相互依存的實(shí)現(xiàn)層次，在一起使用時(shí)，可以提高解決問題的幾率。

三、總結(jié)?Conclusion

治理系統(tǒng)，即支持創(chuàng)建設(shè)計(jì)系統(tǒng)的流程程，有助于幫助理解每個(gè)團(tuán)隊(duì)成員的角色和責(zé)任，在正確的時(shí)間引入正確的人，使每個(gè)人的參與都有利于產(chǎn)出的質(zhì)量。

管理體系能夠從一開始就決定投入時(shí)間來設(shè)置規(guī)則、約束和原則，這一點(diǎn)很重要。雖然大多數(shù)公司都有比你預(yù)期的更多的人來掌握話語權(quán)，但從產(chǎn)品的角度來看，所有三個(gè)模塊都應(yīng)該用相似的基調(diào)和表達(dá)方式來編寫。通過擁有一個(gè)真理源泉以及構(gòu)造堅(jiān)固的基石，你可以為用戶提供一種極其優(yōu)秀和一致的體驗(yàn)。

這就是它的工作原理：就像玩樂高一樣，一塊積木可以被添加到許多構(gòu)造形態(tài)中，積木是保持不變的，但玩家每次都會使用不同的方式來構(gòu)造新的設(shè)計(jì)，并釋放約束。同樣，設(shè)計(jì)系統(tǒng)的積木（即基石）可應(yīng)用于設(shè)計(jì)和產(chǎn)品構(gòu)造的各個(gè)層面，用多種方式設(shè)置、構(gòu)建出不同的樣式，每次都能產(chǎn)生一個(gè)新的設(shè)計(jì)。

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

作者：Priyanka J

原文：https://uxplanet.org/the-building-blocks-of-a-design-system-ee0d99c6f093

譯者：彭祎婕；審核：吳鵬飛、李澤慧、張聿彤；編輯：孫淑雅

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

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