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

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

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

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

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

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

設(shè)計(jì)一個(gè)自己風(fēng)格的面板

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

即使是最簡(jiǎn)單的標(biāo)題組件，它是多個(gè)可重用的風(fēng)格的集合…

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

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

顏色

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

我們的主要品牌色彩選擇藍(lán)色。輔色選擇與其互補(bǔ)的：橙色。

品牌顏色

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

成功配色和失敗配色

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

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

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

最終的色板

陰影

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

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

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

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

從近距離到遠(yuǎn)距離的陰影

類型規(guī)范

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

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

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

類型規(guī)范

邊界半徑

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

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

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

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

間距規(guī)范

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

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

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

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

字符間距

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

?創(chuàng)建一個(gè)組件庫(kù)

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

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

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

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

為了更加全球化的重用組件設(shè)計(jì)是相互矛盾的，只需修改一個(gè)特定的產(chǎn)品組件。最開(kāi)始的目的是創(chuàng)建一個(gè)全局組件庫(kù)。每當(dāng)我看到這個(gè)樣式覆蓋到其他的風(fēng)格，通常是因?yàn)楹诳驮谠缙谠O(shè)計(jì)階段沒(méi)有足夠計(jì)劃的情況下為了讓空間緊湊或附加一些組件的一種變體。

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

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

按鈕

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

更多的組件

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

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

當(dāng)我們?cè)O(shè)計(jì)并實(shí)現(xiàn)一些組件，就可以開(kāi)始結(jié)合多個(gè)組件來(lái)創(chuàng)建更復(fù)雜的像下面這樣的下拉組件。

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

小貼士：

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

原文作者：colmtuite

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

作者：colmtuite

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

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

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