翻譯自 Medium蹈矮，原文鏈接
本文首發(fā)于公眾號：設(shè)計新手村
原文標題：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)該分享一些我在學習過程中的心得了。
什么是設(shè)計規(guī)范?
很顯然每個設(shè)計師都喜歡使用一個設(shè)計精良的 UI 套件魂角。然而昵济，除了將工具包和樣式指南組合在一起之外，似乎最近越來越多的設(shè)計師關(guān)注于旨在將整個產(chǎn)品捆綁在一起的設(shè)計系統(tǒng)野揪。像 Shopify 和 Intercom 這樣的公司都正在建立專門打造設(shè)計系統(tǒng)的內(nèi)部團隊访忿。人們開始意識到系統(tǒng)性設(shè)計的重要性。這是可是個大快人心的好事啊斯稳。沒準兒有一天我們使用的設(shè)計工具就再也不用我們新建一個文檔后從零開始畫起了海铆。
設(shè)計規(guī)范（因為與技術(shù)產(chǎn)品有關(guān)）不僅僅是一個框架、UI 工具包或組件庫挣惰，也不僅僅是一個樣式指南或一系列代碼指南卧斟，它甚至比提到的這些總和還要多殴边。設(shè)計規(guī)范是一個不斷變化的規(guī)則集，用來管理產(chǎn)品的各個組成部分珍语。
任何優(yōu)秀的設(shè)計規(guī)范都可以體現(xiàn)在許多方面——從公司文化／使命開始锤岸，一直到品牌、文案板乙、組件庫和其他的設(shè)計語言是偷。更高級的方面可能是所有設(shè)計系統(tǒng)中最重要的一些方面，但這些并不是本文所討論的目標募逞，我將假設(shè)作為一個公司來闡述——你知道你是誰蛋铆，你的使命是什么，你的產(chǎn)品應(yīng)該是什么樣子凡辱，應(yīng)該具有什么樣的感覺和應(yīng)該如何實現(xiàn)功能戒职。
一旦你掌握了這些關(guān)鍵因素，你就可以將這些知識轉(zhuǎn)化為一種有凝聚力的設(shè)計語言透乾。
設(shè)計一個樣式板
在我們開始設(shè)計酷炫的組件之前洪燥，先要為這些組件做一些基礎(chǔ)工作。我們需要把產(chǎn)品分解成一個個最最簡單的形式乳乌。
即使是最簡單的標題組件捧韵，也是多個可重用樣式的集合。
我們需要把東西分解分解再分解汉操，直到達到不能再分解的最小限度再来，也就是最最基本的風格。一個好的上手練習是 CSS 樣式屬性的完整列表磷瘤，這些屬性大多只接受固定的值芒篷，因此可以在每個網(wǎng)站上重復(fù)使用。接受自定義值的屬性才是最終差異化的核心采缚，因為這些屬性可以將我們的產(chǎn)品與其他產(chǎn)品區(qū)分開來针炉。這些自定義的值就是我們?nèi)謽邮桨宓臉藴剩謽邮桨迨俏覀冇脕碓O(shè)計和構(gòu)建全部產(chǎn)品的每一個方面的參考工具扳抽。
當我們完成整個樣式板的設(shè)計后篡帕，產(chǎn)品中不應(yīng)該有任何一個樣式是全局樣式板中沒有的。
顏色
讓我們從最明顯的樣式屬性開始——這個屬性似乎是現(xiàn)代設(shè)計工具所能理解的唯一的樣式屬性贸呢，它可以被命名镰烧、存儲和重用，它就是：顏色楞陷。
對于品牌的主色怔鳖，我們選擇藍色。對于我們的品牌的輔助色猜谚，讓我們來看看主色的補色败砂，也就是橙色赌渣。
使用顏色來表達成功和失敗是一個常見的設(shè)計模式，所以讓我們將綠色和紅色添加到我們的調(diào)色板中昌犹。像黑色和黃色這樣的顏色也是不錯的選擇坚芜。
最后，我們需要一些灰色的顏色斜姥。大多數(shù) UI 基本都會需要以下幾種灰色：
* 非常淺的灰鸿竖，用于背景色
* 稍微深一點的灰，用于邊框铸敏、線條缚忧、筆畫或分隔線
* 中度灰，用于副標題和引述
* 深灰杈笔，用于主標題闪水、正文和背景
當然你可能需要更多的灰色，你可能需要三種不同的灰色用在正文中蒙具，你可能鐘情于兩種不同的描邊灰色球榆，這都取決于你的需求。但這里的要說的是禁筏，無論預(yù)先定義的樣式是什么樣的持钉，都可以在以后的工作中在整個產(chǎn)品中重復(fù)使用這些樣式。
最后我們可能還想為每一種顏色添加色彩或陰影的變化篱昔，當涉及到設(shè)計組件每强，比如添加亮色的背景或暗色的描邊，這些變化都是非常有用的州刽。
陰影
陰影是 UI 中另一種常用的樣式屬性空执。據(jù)我觀察，很多設(shè)計師在設(shè)計組件的時候都會毫無來由地使用陰影穗椅。實際上大多數(shù)其他的樣式屬性也有這種現(xiàn)象脆烟。像這樣的孤立設(shè)計往往會弄出一套不一致的 UI。
讓我們退一步想一下我們用陰影來實現(xiàn)的目標是什么房待。顯然，我們想為 UI 添加一些透視效果驼抹，但很可能許多其他的組件都可以使用這個效果桑孩。所以，讓我們將這個樣式從單個組件中抽出來框冀，放到全局樣式板中流椒。
下面這四種陰影應(yīng)該足以對系統(tǒng)中的每個組件進行樣式化：
不太明顯的陰影，來提升組件的交互性并增加功能可見性
更明顯的陰影明也，用于組件的懸浮效果宣虾，
非常明顯的陰影惯裕，可以給下拉菜單、彈窗或其他類似的組件增加透視效果
范圍大的陰影绣硝，用于模態(tài)組件
字體的大小
為了在每個屏幕上創(chuà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)品痰洒。
下一步就是決定需要的字體大小瓢棒，然后將它們填入到我們的“大三度”字體比例中。
標準文本的默認大写佟（1em）會出現(xiàn)在營銷網(wǎng)站和 UI 等等的很多地方音羞。16px 是默認的瀏覽器字體大小，所以就用這個大小作為參考仓犬。
* 稍微大一點點的字體嗅绰，用于博客的正文。
* 更大一點的字體搀继，用于標題和副標題窘面。
* 非常大的字體，用于章節(jié)標題叽躯。
* 特別大的字體财边，可能會用在價格頁面上的數(shù)字上
* 一些比較小的字體，用在輸入提示或者其他輔助文字上
圓角半徑
接下來点骑，只需將相同的過程應(yīng)用到每個使用自定義值的樣式屬性中就可以了酣难。對于圓角，我們需要如下的圓角半徑值:
* 小的半徑黑滴，用于小的部件憨募，例如復(fù)選框，屬性標簽和文本標簽袁辈。
* 中等的半徑菜谣，用于按鈕和輸入框等類似的組件。
* 大的半徑，用于卡片尾膊、模態(tài)對話框和其他較大的組件媳危。
注意：有時候我們需要用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è)計矛盾勘伺。
字間距
正如我前面提到的，字體大小并不是定義文本組件所需的唯一樣式屬性褂删。字間距是另一個非常有用的屬性飞醉，我們可以用它來收緊大標題，或者給小標題一些呼吸的空間屯阀。
三四種字間距的值應(yīng)該就可以達到目標缅帘。
打造一個組件庫
現(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ù)先定義的樣式板中直接獲得的摆霉。
讓我們嘗試一些更有趣的東西
當我們設(shè)計并構(gòu)建了一些組件后，我們就可以組合多個組件來創(chuàng)建更復(fù)雜的組件，比如下拉菜單組件携栋。
這個下拉菜單使用的都是我們之前定義的基本樣式板里的樣式搭盾。通過這種方法，我們可以設(shè)計出一個完整的組件庫婉支，然后運用到更大范圍的布局中鸯隅，直至運用到整個屏幕上。
填坑的一些小貼士
某些組件會使用一些在樣式板中沒有定義過的值向挖，例如邊欄的寬度蝌以。有時這些值僅為視口（viewport）寬度的1/3。有些時候這些值是任意的何之，而且不可重用跟畅，但這都是正常的。關(guān)鍵是要考慮哪些樣式應(yīng)該是可重用的（大多數(shù)）帝美，哪些樣式不需要重用碍彭。
讓組件去做自己該做的事。不要試圖給按鈕悼潭、輸入框庇忌、標題或其他組件添加邊距。在組件的級別上舰褪，應(yīng)該只去規(guī)定在該組件的每個實例中的樣式皆疹，而這些樣式應(yīng)該是一致的。由于外邊距應(yīng)該視情況而定占拍，所以最好使用包裝器 div 來設(shè)定邊距的值略就，Harry Roberts 有一篇不錯的文章說明了這一點。
