翻譯自 Medium，原文鏈接

本文首發(fā)于公眾號：設(shè)計新手村

原文標(biāo)題：How to construct a design system

原文作者：Colm Tuite

文章翻譯：村長道哥

如何構(gòu)建一個設(shè)計規(guī)范

不得不承認的是，人們向我詢問關(guān)于設(shè)計規(guī)范的次數(shù)比其他方面要多得多。因此，在過去的幾年里，我一直在思考如何設(shè)計、構(gòu)建并展示像 Marvel、Bantam 和 Modulz 這樣產(chǎn)品的設(shè)計系統(tǒng)，我想我應(yīng)該分享一些我在學(xué)習(xí)過程中的心得了。

什么是設(shè)計規(guī)范?

很顯然每個設(shè)計師都喜歡使用一個設(shè)計精良的 UI 套件。然而，除了將工具包和樣式指南組合在一起之外，似乎最近越來越多的設(shè)計師關(guān)注于旨在將整個產(chǎn)品捆綁在一起的設(shè)計系統(tǒng)。像 Shopify 和 Intercom 這樣的公司都正在建立專門打造設(shè)計系統(tǒng)的內(nèi)部團隊。人們開始意識到系統(tǒng)性設(shè)計的重要性。這是可是個大快人心的好事啊。沒準(zhǔn)兒有一天我們使用的設(shè)計工具就再也不用我們新建一個文檔后從零開始畫起了。

設(shè)計規(guī)范（因為與技術(shù)產(chǎn)品有關(guān)）不僅僅是一個框架、UI 工具包或組件庫，也不僅僅是一個樣式指南或一系列代碼指南，它甚至比提到的這些總和還要多。設(shè)計規(guī)范是一個不斷變化的規(guī)則集，用來管理產(chǎn)品的各個組成部分。

任何優(yōu)秀的設(shè)計規(guī)范都可以體現(xiàn)在許多方面——從公司文化／使命開始，一直到品牌、文案、組件庫和其他的設(shè)計語言。更高級的方面可能是所有設(shè)計系統(tǒng)中最重要的一些方面，但這些并不是本文所討論的目標(biāo)，我將假設(shè)作為一個公司來闡述——你知道你是誰，你的使命是什么，你的產(chǎn)品應(yīng)該是什么樣子，應(yīng)該具有什么樣的感覺和應(yīng)該如何實現(xiàn)功能。

一旦你掌握了這些關(guān)鍵因素，你就可以將這些知識轉(zhuǎn)化為一種有凝聚力的設(shè)計語言。

設(shè)計一個樣式板

在我們開始設(shè)計酷炫的組件之前，先要為這些組件做一些基礎(chǔ)工作。我們需要把產(chǎn)品分解成一個個最最簡單的形式。

即使是最簡單的標(biāo)題組件，也是多個可重用樣式的集合。

我們需要把東西分解分解再分解，直到達到不能再分解的最小限度，也就是最最基本的風(fēng)格。一個好的上手練習(xí)是 CSS 樣式屬性的完整列表，這些屬性大多只接受固定的值，因此可以在每個網(wǎng)站上重復(fù)使用。接受自定義值的屬性才是最終差異化的核心，因為這些屬性可以將我們的產(chǎn)品與其他產(chǎn)品區(qū)分開來。這些自定義的值就是我們?nèi)謽邮桨宓臉?biāo)準(zhǔn)，而全局樣式板是我們用來設(shè)計和構(gòu)建全部產(chǎn)品的每一個方面的參考工具。

當(dāng)我們完成整個樣式板的設(shè)計后，產(chǎn)品中不應(yīng)該有任何一個樣式是全局樣式板中沒有的。

顏色

讓我們從最明顯的樣式屬性開始——這個屬性似乎是現(xiàn)代設(shè)計工具所能理解的唯一的樣式屬性，它可以被命名、存儲和重用，它就是：顏色。

對于品牌的主色，我們選擇藍色。對于我們的品牌的輔助色，讓我們來看看主色的補色，也就是橙色。

品牌的顏色

使用顏色來表達成功和失敗是一個常見的設(shè)計模式，所以讓我們將綠色和紅色添加到我們的調(diào)色板中。像黑色和黃色這樣的顏色也是不錯的選擇。

成功和失敗的顏色

最后，我們需要一些灰色的顏色。大多數(shù) UI 基本都會需要以下幾種灰色：

* 非常淺的灰，用于背景色

* 稍微深一點的灰，用于邊框、線條、筆畫或分隔線

* 中度灰，用于副標(biāo)題和引述

* 深灰，用于主標(biāo)題、正文和背景

當(dāng)然你可能需要更多的灰色，你可能需要三種不同的灰色用在正文中，你可能鐘情于兩種不同的描邊灰色，這都取決于你的需求。但這里的要說的是，無論預(yù)先定義的樣式是什么樣的，都可以在以后的工作中在整個產(chǎn)品中重復(fù)使用這些樣式。

最后我們可能還想為每一種顏色添加色彩或陰影的變化，當(dāng)涉及到設(shè)計組件，比如添加亮色的背景或暗色的描邊，這些變化都是非常有用的。

最終的調(diào)色板

陰影

陰影是 UI 中另一種常用的樣式屬性。據(jù)我觀察，很多設(shè)計師在設(shè)計組件的時候都會毫無來由地使用陰影。實際上大多數(shù)其他的樣式屬性也有這種現(xiàn)象。像這樣的孤立設(shè)計往往會弄出一套不一致的 UI。

讓我們退一步想一下我們用陰影來實現(xiàn)的目標(biāo)是什么。顯然，我們想為 UI 添加一些透視效果，但很可能許多其他的組件都可以使用這個效果。所以，讓我們將這個樣式從單個組件中抽出來，放到全局樣式板中。

下面這四種陰影應(yīng)該足以對系統(tǒng)中的每個組件進行樣式化：

不太明顯的陰影，來提升組件的交互性并增加功能可見性

更明顯的陰影，用于組件的懸浮效果，

非常明顯的陰影，可以給下拉菜單、彈窗或其他類似的組件增加透視效果

范圍大的陰影，用于模態(tài)組件

陰影范圍從小到大

字體的大小

為了在每個屏幕上創(chuàng)建恰當(dāng)?shù)目梢晫哟谓Y(jié)構(gòu)，我們需要定義許多不同大小的字體。

就像音樂里的音符一樣，我們的字體應(yīng)該是按音階來設(shè)計的，這有助于保持一個穩(wěn)定的節(jié)奏。乍一看這么做好像有點令人不知所措，但幸運的是，一些非常聰明的人已經(jīng)幫我們解決了這個問題。Tim Brown 建立了一個非常棒的網(wǎng)站來展示各種字體的比例。Adam Morse 開源了他的“全音階”的字體表。我個人發(fā)現(xiàn)，“大三度”音階的字體比較適用于大多數(shù)的 Web 產(chǎn)品。

下一步就是決定需要的字體大小，然后將它們填入到我們的“大三度”字體比例中。

標(biāo)準(zhǔn)文本的默認大?。?em）會出現(xiàn)在營銷網(wǎng)站和 UI 等等的很多地方。16px 是默認的瀏覽器字體大小，所以就用這個大小作為參考。

* 稍微大一點點的字體，用于博客的正文。

* 更大一點的字體，用于標(biāo)題和副標(biāo)題。

* 非常大的字體，用于章節(jié)標(biāo)題。

* 特別大的字體，可能會用在價格頁面上的數(shù)字上

* 一些比較小的字體，用在輸入提示或者其他輔助文字上

字體大小

圓角半徑

接下來，只需將相同的過程應(yīng)用到每個使用自定義值的樣式屬性中就可以了。對于圓角，我們需要如下的圓角半徑值:

* 小的半徑，用于小的部件，例如復(fù)選框，屬性標(biāo)簽和文本標(biāo)簽。

* 中等的半徑，用于按鈕和輸入框等類似的組件。

* 大的半徑，用于卡片、模態(tài)對話框和其他較大的組件。

2px, 4px and 8px 的圓角半徑

注意：有時候我們需要用50%的圓角半徑來畫圓形的組件，比如頭像。

間距的大小

在所有的設(shè)計中，最常用的樣式屬性就是間距。無論我們是在頭部中分隔多個鏈接，還是在網(wǎng)格中分隔一個個項目，還是在頭像和鏈接之間增加一些距離，或者是增加下拉菜單組件內(nèi)容的間距——產(chǎn)品中如果沒有任何間距的話那就說明這個設(shè)計是沒走腦子的。

與字體一樣，通過遵循間距的比例，我們可以確保每個組件和布局都是一致的。我最喜歡的間距是 Material Design 的8dp網(wǎng)格。Elliot Dahl 有一篇關(guān)于8pt網(wǎng)格系統(tǒng)及其好處的文章。

使用 8dp 這個基本值，我們可以組合出許多間距的大小，這些值可以用來設(shè)計我們的產(chǎn)品套件中的每個組件和布局。

我們還可以使用這些間距值來定義寬度、高度和行高，這些屬性可以用來調(diào)整按鈕、表單輸入框、頭像和其他類似組件的尺寸大小。由于這些組件經(jīng)常在出現(xiàn)在 Web 產(chǎn)品中，所以如果它們都能遵循相同的大小比例，就可以避免出現(xiàn)任何不必要的設(shè)計矛盾。

字間距

正如我前面提到的，字體大小并不是定義文本組件所需的唯一樣式屬性。字間距是另一個非常有用的屬性，我們可以用它來收緊大標(biāo)題，或者給小標(biāo)題一些呼吸的空間。

三四種字間距的值應(yīng)該就可以達到目標(biāo)。

打造一個組件庫

現(xiàn)在我們已經(jīng)完成了全局樣式板，我們可以使用這些積木開始搭建一個組件庫了。一般來說，設(shè)計組件并不是一個創(chuàng)造性的過程——我們只是簡單地將預(yù)定義的樣式映射到組件中就可以了。

在這個階段，我們不應(yīng)該使用沒有在樣式板中定義的樣式。創(chuàng)意的過程發(fā)生在樣式板的設(shè)計階段。所以基于以上的原則，無論是顏色、字體大小、外邊距和內(nèi)邊距、寬度和高度還是其他的任何樣式，在設(shè)計組件和布局的時候每一種樣式都應(yīng)該從樣式板中選擇。這個階段幾乎沒有什么新東西需要被引入了。這聽起來可能有些極端甚至不合理，但恰恰相反，我認為這正是許多人誤解的地方。

Dave Rupert 最近在 Twitter 上進行了一項問卷調(diào)查：如果一個按鈕位于一個模態(tài)組件內(nèi)，那么修改這個按鈕樣式的代碼應(yīng)該寫在哪里？

Harry Roberts 之后在他自己的文章里解釋了他的想法。Jonathan Snook 做出了進一步的討論。雖然我同意 Harry 和 Jonathan 的結(jié)論，但其實，我認為整個辯論都是沒有必要的。

以在全局環(huán)境中重復(fù)使用的目的來設(shè)計一個組件，然后在產(chǎn)品的某個特定的部分中修改這個組件，而這是互相矛盾的，這就違背了創(chuàng)建全局組件庫的初衷。只要我看到某個樣式覆蓋了其他的樣式，我就知道這通常是要么為了使其適合于一個緊湊的空間，要么是因為在早期的設(shè)計階段沒有足夠的計劃，所以在一個組件的變體上進行修改。

每一次在某個部分中覆蓋全局組件的行為，都會破壞整個設(shè)計系統(tǒng)的一致性。如果對分散在產(chǎn)品各個部分的組件進行了大量的零星修改，那么就不可能維持一個一致性的設(shè)計系統(tǒng)，你得到的不過只是一個極其混亂到處是垃圾的設(shè)計系統(tǒng)。

讓我們來看看一些常見的組件，并看一下如何使用我們在上面的樣式板中定義的樣式來構(gòu)建它們。

不起眼的按鈕

讓我們從一個簡單的按鈕組件開始，展示如何使用我們在樣式板中預(yù)定義的樣式來搭建組件。

更多的組件

同樣，這些顏色、字體大小、陰影和邊距都是從我們上面預(yù)先定義的樣式板中直接獲得的。

讓我們嘗試一些更有趣的東西

當(dāng)我們設(shè)計并構(gòu)建了一些組件后，我們就可以組合多個組件來創(chuàng)建更復(fù)雜的組件，比如下拉菜單組件。

這個下拉菜單使用的都是我們之前定義的基本樣式板里的樣式。通過這種方法，我們可以設(shè)計出一個完整的組件庫，然后運用到更大范圍的布局中，直至運用到整個屏幕上。

填坑的一些小貼士

某些組件會使用一些在樣式板中沒有定義過的值，例如邊欄的寬度。有時這些值僅為視口（viewport）寬度的1/3。有些時候這些值是任意的，而且不可重用，但這都是正常的。關(guān)鍵是要考慮哪些樣式應(yīng)該是可重用的（大多數(shù)），哪些樣式不需要重用。

讓組件去做自己該做的事。不要試圖給按鈕、輸入框、標(biāo)題或其他組件添加邊距。在組件的級別上，應(yīng)該只去規(guī)定在該組件的每個實例中的樣式，而這些樣式應(yīng)該是一致的。由于外邊距應(yīng)該視情況而定，所以最好使用包裝器 div 來設(shè)定邊距的值，Harry Roberts 有一篇不錯的文章說明了這一點。