毫無疑問，我被問到最多的就是關于設計規范體系的建立。所以在過去幾年里，最多思考的就是如何設計、建立完整的設計體系，像Marvel, Bantam 和 Modulz這樣的產品，下面我想分享一些我學到的方法。

什么是設計體系？

設計師們喜歡好的UI模版這已經不是一個秘密了。然而，最近不只是把工具包和風格指南,放在一起了，似乎有越來越多的設計規范體系在把整個產品組合在一起。Shopify和Intercom等公司正在籌建關于設計規范的內部團隊。人們開始意識到系統設計的重要性。這是令人激動的。誰會知道呢，也許有一天會有一個設計工具，使我們不再需要每次打開一個新文檔…?

設計體系（同樣適用于科技產品）不僅僅是一個框架、UI工具包或組件庫。它是一個多風格指南或一組代碼的指導方針。它甚至超過那些部分的總和。設計體系是一個不斷發展的規則管理產品的成分。

有很多方面任何好的設計系統——從公司文化/使命和滴一直到品牌、文案、組件庫和其他設計語言。對于本文的目的，關于設計體系更重要的一點是，假設有一個公司，你需要知道你是角色，你的任務是什么，你的產品應該是怎樣的風格和特點。

一旦你擁有了這些關鍵因素，你可以將這些知識轉化為一個有凝聚力的設計語言。

設計一個自己風格的面板

在開始設計組件之前，我們需要為這些組件奠定基礎。我們需要把產品分解成最基本的形式。

即使是最簡單的標題組件，它是多個可重用的風格的集合…

我們需要打破思維直到我們到達最低點：最基本的風格。一個很好的起點是建立CSS樣式屬性。大多數的這些屬性只能設置固定值，這樣可以重用在每一個網站上。設置特定的屬性值是最終會將我們的產品與其他產品區分開來。這些自定義值將定義我們全球化風格模式。我們的風格模式是我們將使用在設計和建造我們產品的每一個方面。

當我們完成設計時，每一個風格都存在于我們的產品預定義的全球化風格模式中。

顏色

讓我們從最明顯的樣式屬性入手，這是唯一一個樣式屬性可以用現代設計工具進行命名、存儲和重用：顏色。

我們的主要品牌色彩選擇藍色。輔色選擇與其互補的：橙色。

品牌顏色

色彩搭配的成功與失敗是一種常見的設計模式，讓我們添加綠色和紅色。顏色像黑色和黃色也會看起來很好。

成功配色和失敗配色

最后，我們需要一些灰色。大多數UI至少需要以下幾種灰色：

• 一個非常淺的灰色背景。
• 一個稍暗的灰色作為邊界、線條、分隔線。
• 一個中度的灰色作為小標題，支持附加內容。
• 一個深灰色作為主標題、內文和背景。

當然，你可能需要更多的灰色?？赡茉趦热萆闲枰齻€不同的色調。你可能喜歡兩個不同的深度。這完全取決于你。重點是，預先確定的任何風格它們需要是可重用的在整個產品在稍后的階段。最后一個點，我們還需要為每個顏色添加色調或陰影。這些在設計組件或者添加背景或深色線條中可能是有用的。

最終的色板

陰影

陰影在UI中是另一種常用的樣式屬性。我們所看到的許多設計師僅僅是在設計的組件中加入陰影。這適用于大多數的樣式屬性。孤立地設計常常會導致不一致的用戶界面。

讓我們退一步想想到底想要實現怎樣的陰影。我們顯然試圖在UI中添加了一些陰影，但很可能許多組件可以受益于同樣的效果。所以讓我們從風格模式中分離出單個組件的樣式。

這四個陰影樣式應該足以滿足系統中的每個組件：

• 一個淡淡的陰影用來表示交互式的組件。
• 一個稍明顯的陰影表示懸停效果。
• 很大很深的陰影用于視角的下拉/彈窗和其他類似的組件。
• 一個長陰影表示模態組件。

從近距離到遠距離的陰影

類型規范

為了在每個屏幕上創建一個適當的視覺層次,我們將需要定義不同的字體大小。

就像一段音樂中的音符，類型應該堅持規?；?。這有助于維持平穩的節奏。乍聽起來有點嚇人，但幸運的是非常聰明的人已經找到了方法。Tim Brown已經建立了一個很棒的網站來顯示各種類型。Adam Morse已經實現了開源的全音階類型。我通常找適用于大多數web產品的“主要的三個”規模。

• 默認(1 em)標準文本用在網站、界面等的許多地方。瀏覽器默認字號是16px。
• 博客為例，內容用更大一些的字號。
• 標題和副標題用不同大小的字號。
• 段落標題用一個很大的字號。
• 價格定價頁面為例，會使用很大到大的離奇的字號。
• 還需要一些較小的字號作為內文、輸入提示和其他二級文本。

類型規范

邊界半徑

現在只是相同的過程把樣式屬性值應用到每一個特定的對象。關于圓角，我們需要以下圓角半徑值：

• 小的邊界半徑適用于小型組件，如復選框標記和標簽。
• 中等大小的半徑為按鈕和輸入和類似的組件。
• 大半徑的適用于卡片、動態窗口和其他大型組件。

2px，4px，8px的邊界半徑

注意：我們還需要50%的邊界半徑為構建組件的頭像等。

間距規范

在任何設計中最常用的樣式屬性是留白。是否間隔分開標題中的鏈接，間隔網格中的項目網格，添加一些副本或者在鏈接之間的距離填充下拉組件——在我們的產品中空格應該是有意義的。

對于類型，通過堅持間距的范圍，可以確保我們的每個組件和布局都是規范的。我最喜歡的間距尺度是MD的8dp的網格設計。Elliot Dahl寫了一大篇關于8pt網格系統和好處的文章。

堅持8dp增量，我們可以畫出許多間距值，可以使用它來設計每一套產品組件和布局。

我們也可以使用這些間距值來定義一組寬度、高度并且可以設定按鈕的大小，表單的輸入、副本和其他類似的組件。因為這些組件通常出現在網絡的產品中，如果他們都遵循相同的大小規范，就可以避免很多不必要的差異。

字符間距

如前所述，字體大小并不是唯一的樣式屬性，還需要定義文本組件。字符間距是另一個有用的屬性，我們可以使用它來平衡大標題和小標題。3或4字符的間距值應該足夠了。

?創建一個組件庫

現在我們已經定義了全局樣式面板，可以開始創建一個組件庫。在大多數情況下，組件設計不是一個創造性的過程，我們只是把預定義的樣式映射到組件。

在這個階段，不需要在風格模版中已經定義面板。創作過程是在樣式面板的設計階段。從這個觀點上看，無論是顏色、字體大小、邊界/填充值、寬/高或其他，每個用來設計組件和布局的面板都應該是我們的風格模式中的。幾乎沒有什么新的需求。這聽起來很極端或不合理的，但是正相反，這就是我認為很多人會誤入歧途的。

Dave Rupertz最近在Twitter上進行民意調查，例如，如果那個按鈕是一個模型組件，如何用代碼設置樣式。

Harry Roberts在自己的文章中解釋了他的想法。在那之后，Jonathan Snook 增加了他自己的想法。雖然我同意Harry和Jonathan的想法，但最終我認為這整個辯論是不必要的。

為了更加全球化的重用組件設計是相互矛盾的，只需修改一個特定的產品組件。最開始的目的是創建一個全局組件庫。每當我看到這個樣式覆蓋到其他的風格，通常是因為黑客在早期設計階段沒有足夠計劃的情況下為了讓空間緊湊或附加一些組件的一種變體。

每次在你的產品組件全球化的同時，你也在破壞設計系統的一致性。當你有了很多零星的產品組件，你不再有一個一致性的設計系統。你的系統會變得很不一致很混亂。

讓我們看一些常見的組件和如何用上面的面板中定義的組件構建樣式。

按鈕

讓我們先從一個簡單的按鈕組件，解釋如何只使用我們預設的樣式定義組件。

更多的組件

同樣，這些顏色、字體大小、陰影和填充都是上面我們預設的樣式。

讓我們發散一下思維

當我們設計并實現一些組件，就可以開始結合多個組件來創建更復雜的像下面這樣的下拉組件。

這個下拉組件不能單一的使用我們前面定義的風格的基本樣式。使用這種方法，我們可以設計一個完整的組件庫，然后轉移到更廣泛布局，最后再應用到全屏幕。

小貼士：

• 在我們的樣式模版中沒有定義的特定組件需要設定值，例如，側欄的寬度。有時這些值只是1/3的視窗寬度或大概值。其他時候，這些值將是任意的或不可重復使用的，這樣就可以了。關鍵是考慮哪些風格是可重用的(大部分)，哪些風格不可以的。
• 讓組件有意義。不要試圖增加選項而增加按鈕、輸入標題或其他組件。對于組件的級別，應該只定義出現在每個實例中的組件。由于選項在不同的項目中，最好使用div包。Harry Roberts 寫了一篇很好的涉及這一點的文章。

原文作者：colmtuite

原文地址：https://medium.freecodecamp.com/how-to-construct-a-design-system-864adbf2a117#.clxjy3297

作者：colmtuite

譯者：厲嗣傲，UI/UX設計師

譯文地址：http://www.ui.cn/detail/220237.html

本文由 @厲嗣傲 授權發布于人人都是產品經理，未經作者許可，禁止轉載。