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

什么是設(shè)計體系？

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

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

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

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

設(shè)計一個自己風格的面板

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

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

我們需要打破思維直到我們到達最低點：最基本的風格。一個很好的起點是建立CSS樣式屬性。大多數(shù)的這些屬性只能設(shè)置固定值，這樣可以重用在每一個網(wǎng)站上。設(shè)置特定的屬性值是最終會將我們的產(chǎn)品與其他產(chǎn)品區(qū)分開來。這些自定義值將定義我們?nèi)蚧L格模式。我們的風格模式是我們將使用在設(shè)計和建造我們產(chǎn)品的每一個方面。

當我們完成設(shè)計時，每一個風格都存在于我們的產(chǎn)品預(yù)定義的全球化風格模式中。

顏色

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

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

品牌顏色

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

成功配色和失敗配色

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

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

當然，你可能需要更多的灰色?？赡茉趦?nèi)容上需要三個不同的色調(diào)。你可能喜歡兩個不同的深度。這完全取決于你。重點是，預(yù)先確定的任何風格它們需要是可重用的在整個產(chǎn)品在稍后的階段。最后一個點，我們還需要為每個顏色添加色調(diào)或陰影。這些在設(shè)計組件或者添加背景或深色線條中可能是有用的。

最終的色板

陰影

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

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

這四個陰影樣式應(yīng)該足以滿足系統(tǒng)中的每個組件：

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

從近距離到遠距離的陰影

類型規(guī)范

為了在每個屏幕上創(chuàng)建一個適當?shù)囊曈X層次,我們將需要定義不同的字體大小。

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

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

類型規(guī)范

邊界半徑

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

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

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

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

間距規(guī)范

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

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

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

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

字符間距

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

?創(chuàng)建一個組件庫

現(xiàn)在我們已經(jīng)定義了全局樣式面板，可以開始創(chuàng)建一個組件庫。在大多數(shù)情況下，組件設(shè)計不是一個創(chuàng)造性的過程，我們只是把預(yù)定義的樣式映射到組件。

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

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

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

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

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

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

按鈕

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

更多的組件

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

讓我們發(fā)散一下思維

當我們設(shè)計并實現(xiàn)一些組件，就可以開始結(jié)合多個組件來創(chuàng)建更復雜的像下面這樣的下拉組件。

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

小貼士：

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

原文作者：colmtuite

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

作者：colmtuite

譯者：厲嗣傲，UI/UX設(shè)計師

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

本文由 @厲嗣傲 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。