以下內(nèi)容由摹客（https://www.mockplus.cn）團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流，摹客設(shè)計(jì)系統(tǒng)是國(guó)內(nèi)獨(dú)家設(shè)計(jì)規(guī)范制作平臺(tái)。

事實(shí)上，過去的幾年里，我時(shí)常會(huì)被問及各種設(shè)計(jì)系統(tǒng)相關(guān)問題。在經(jīng)過長(zhǎng)時(shí)間的深思熟慮之后，對(duì)于如何設(shè)計(jì)，構(gòu)建和呈現(xiàn)產(chǎn)品（例如Mockplus，Marvel， Bantam and Modulz）相關(guān)設(shè)計(jì)系統(tǒng)方面,有了一些自己的想法和心得。這里就和大家分享一下。希望對(duì)大家的設(shè)計(jì)系統(tǒng)搭建有所幫助：

首先，什么是設(shè)計(jì)系統(tǒng)？

眾所周知，設(shè)計(jì)師們都喜歡挑選各種優(yōu)質(zhì)的UI工具包來完成他們的產(chǎn)品設(shè)計(jì)。然而，不同于將各種UI工具包和樣式指南機(jī)械的堆放在一起，現(xiàn)今，越來越多的設(shè)計(jì)師們開始專注于構(gòu)建一致統(tǒng)一的設(shè)計(jì)系統(tǒng)，希望將各類旗下產(chǎn)品或產(chǎn)品UI 部件更加協(xié)調(diào)的融合在一起。

事實(shí)上，一些公司，比如全球知名的Shopify和Intercom，已然開始組件內(nèi)部團(tuán)隊(duì)，專門從事設(shè)計(jì)系統(tǒng)的構(gòu)建工作。顯然，公司企業(yè)以及設(shè)計(jì)師們已經(jīng)日漸認(rèn)識(shí)到設(shè)計(jì)系統(tǒng)的重要性。非常振奮人心，對(duì)吧？誰知道呢！或許，將來某一天，我們不再需要打開新文檔，從零開始設(shè)計(jì)，設(shè)計(jì)工具在手，一切皆可搞定！

設(shè)計(jì)系統(tǒng)（作為一種設(shè)計(jì)相關(guān)的技術(shù)產(chǎn)品），不僅僅只是一個(gè)設(shè)計(jì)框架，UI工具包或組件庫(kù)。亦或是一套樣式指南或代碼指南。實(shí)際上，它所涵蓋的內(nèi)容要遠(yuǎn)遠(yuǎn)多于以上設(shè)計(jì)內(nèi)容的總和。那它究竟是什么呢？具體包含哪些內(nèi)容呢？很簡(jiǎn)單。設(shè)計(jì)系統(tǒng)是一個(gè)不斷更新變化的設(shè)計(jì)規(guī)范集，能夠及時(shí)地幫助設(shè)計(jì)師控制和規(guī)范產(chǎn)品的各種組件和構(gòu)成。

例如Mockplus DS設(shè)計(jì)系統(tǒng)，就是一個(gè)能夠幫助設(shè)計(jì)師輕松定制和管理各種設(shè)計(jì)規(guī)范系統(tǒng)的絕佳設(shè)計(jì)工具。

(今賀設(shè)計(jì)規(guī)范利器——摹客設(shè)計(jì)系統(tǒng)上線，摹客邀你共享喜悅！三大福利，iPad Pro，Wacom手繪板，小米手環(huán)等你拿！)

一個(gè)優(yōu)質(zhì)實(shí)用的設(shè)計(jì)系統(tǒng)包含了方方面面的內(nèi)容——從公司文化/使命，到品牌，文案，組件庫(kù)以及其它設(shè)計(jì)語(yǔ)言等等。更進(jìn)一步的分析，對(duì)于設(shè)計(jì)系統(tǒng)的重要部分的討論，雖然設(shè)計(jì)師們觀點(diǎn)不一，爭(zhēng)議不斷，但就我而言，更偏向于從公司的角度來分析：好的設(shè)計(jì)系統(tǒng)應(yīng)該是能夠讓用戶輕松了解到：什么公司？其使命是什么？其產(chǎn)品外觀如何，給人的感覺以及功能如何等等。

只有真正認(rèn)識(shí)到這些相關(guān)關(guān)鍵因素，才能夠更加輕松的將這些內(nèi)容信息轉(zhuǎn)化成直觀連續(xù)且易讀的設(shè)計(jì)語(yǔ)言，向用戶傳達(dá)必要的產(chǎn)品信息。

樣式庫(kù)設(shè)計(jì)

在開始吸睛的頁(yè)面組件設(shè)計(jì)之前，設(shè)計(jì)師需要提前做一些準(zhǔn)備，即將產(chǎn)品界面分解成更簡(jiǎn)單，更基本的細(xì)小部分，奠定一定設(shè)計(jì)基礎(chǔ)。

如圖，簡(jiǎn)單的標(biāo)題組件，經(jīng)過分解，也僅僅只是多種可復(fù)用樣式的集合而已。

同理，設(shè)計(jì)師們也需要將UI設(shè)計(jì)中的各部件，分解到不能再分為止：即僅僅包含一些最基本的組件風(fēng)格樣式。而這方面，一大訣竅就是根據(jù)各頁(yè)面的CSS樣式屬性列表進(jìn)行分解。通常，這些列表包含的絕大部分屬性都只需接受固定值。所以它們能夠被應(yīng)用到各種在線網(wǎng)頁(yè)中。當(dāng)然，也有一部分屬性，僅需接受自定義值。也因此，它們也最終成為區(qū)分不同網(wǎng)絡(luò)產(chǎn)品重要因素。也恰巧是這些屬性的自定義值決定著產(chǎn)品的全局樣式庫(kù)。最終，全局樣式庫(kù)也同樣將為設(shè)計(jì)師們?cè)O(shè)計(jì)和搭建產(chǎn)品的方方面面提供便利。

而且，當(dāng)產(chǎn)品界面分解工作完成時(shí)，產(chǎn)品設(shè)計(jì)應(yīng)用到的相關(guān)元素，也應(yīng)該遵循樣式庫(kù)定義，不使用任何全局樣式庫(kù)之外的樣式對(duì)界面組件進(jìn)行定義。

下面我們就對(duì)設(shè)計(jì)系統(tǒng)中可能包含的樣式進(jìn)行預(yù)定義：

顏色

首先，我們從最常見的樣式屬性開始講解——一種被當(dāng)今設(shè)計(jì)工具所理解的唯一可以被命名、存儲(chǔ)和重用的屬性:顏色。

比如，假若我們將藍(lán)色定為品牌主題色時(shí)，在定義樣式庫(kù)時(shí)，其輔助色就可以選擇藍(lán)色的互補(bǔ)色：橙色。

品牌色彩

通過色彩來直觀傳達(dá)操作成功和失敗的反饋是UI設(shè)計(jì)中最常見的一種設(shè)計(jì)方式。而這一點(diǎn)上，設(shè)計(jì)師可以將綠色和紅色添加到色板中進(jìn)行定義，以達(dá)到提供一定色彩反饋的目的。當(dāng)然，除了紅色和綠色，其他顏色，例如黑色和黃色，也會(huì)是不錯(cuò)的選擇。

能夠直觀預(yù)示操作成功與失敗的色彩

最后，設(shè)計(jì)師可能還需要一些灰色。而大多UI設(shè)計(jì)都會(huì)涉及以下幾種灰色：

極淺的背景灰

深一度且常用于邊框、線條、筆劃或分隔線的灰色

副標(biāo)題和輔助正文文本的中灰

主標(biāo)題，正文以及背景的深灰色

當(dāng)然，實(shí)際的設(shè)計(jì)中，設(shè)計(jì)師可能需要更多的灰色。比如，一些設(shè)計(jì)師喜歡在設(shè)計(jì)中會(huì)運(yùn)用3種灰色，以調(diào)節(jié)正文文本陰影。而一些設(shè)計(jì)師則更偏愛于使用兩種不同的筆畫陰影，來突出文本重點(diǎn)。當(dāng)然，這一切，都可根據(jù)具體設(shè)計(jì)需求和設(shè)計(jì)師的喜好來決定。但這里需要強(qiáng)調(diào)的是：設(shè)計(jì)師需要預(yù)先定義好可能涉及的各種色彩樣式，從而能夠在后面的產(chǎn)品設(shè)計(jì)中直接重用。

最后，在樣式庫(kù)設(shè)計(jì)的過程中，也可為各類顏色添加色調(diào)或陰影的變化。如此，在實(shí)際的產(chǎn)品UI設(shè)計(jì)中，需要為組件添加淺色背景或深色線條時(shí)，這類預(yù)定義色板將會(huì)非常實(shí)用。

摹客設(shè)計(jì)系統(tǒng)上線了！三大福利送不停！

最終制作完成的調(diào)色板

而這方面，無論是品牌主題色的選擇，還是色板或其他組件色彩樣式的定義，Mockplus DS在線設(shè)計(jì)系統(tǒng)都提供了非常強(qiáng)大的色彩選擇，方便設(shè)計(jì)師根據(jù)各種UI設(shè)計(jì)需求，通過其“標(biāo)準(zhǔn)色”設(shè)計(jì)模塊，使用RGB顏色值， 16進(jìn)制顏色碼以及拾色器，輕松定制各類調(diào)色板。如圖：

陰影

陰影是UI設(shè)計(jì)中另一種常用的樣式屬性。在我看來，很多設(shè)計(jì)師在設(shè)計(jì)組件陰影時(shí)，大都根據(jù)喜好，即興創(chuàng)作。事實(shí)上，很多時(shí)候，大部分樣式屬性設(shè)計(jì)也是如此，全憑設(shè)計(jì)師當(dāng)時(shí)的心情和感覺。然而，如此這般完全主觀獨(dú)立性的設(shè)計(jì)，也時(shí)常會(huì)帶來頁(yè)面設(shè)計(jì)不一致的問題。

而且，退一步說，從我們?cè)谠O(shè)計(jì)中使用陰影的目的的角度進(jìn)行分析。我們總是試圖通過陰影的添加，為UI打造一定的頁(yè)面視角。但是，事實(shí)卻是，很多組件設(shè)計(jì)都可以通過同樣的方式來提升其視覺效果。所以，在實(shí)際的設(shè)計(jì)中，設(shè)計(jì)師們需要將陰影這一樣式屬性從單一的組件擴(kuò)展到整個(gè)全局樣式庫(kù)中，以提升整個(gè)產(chǎn)品頁(yè)面設(shè)計(jì)的視覺效果。

而以下四個(gè)陰影樣式設(shè)置就足以滿足設(shè)計(jì)系統(tǒng)中組件樣式庫(kù)的設(shè)計(jì)需求：

淺色陰影以突出交互式組件，提升其可供性

更深的陰影以突出組件懸停效果

強(qiáng)烈對(duì)比的陰影為下拉列表/彈出窗口和其它類似的組件打造獨(dú)特的視角

明顯區(qū)別的陰影突出頁(yè)面模態(tài)組件

陰影從淺到深的設(shè)計(jì)范圍展示

而Mockplus DS設(shè)計(jì)系統(tǒng)平臺(tái)也為設(shè)計(jì)師提供了專門的“陰影”模塊，以預(yù)定義各種陰影樣式。如圖：

Type Scale

為了打造一定的頁(yè)面視覺層次結(jié)構(gòu)，設(shè)計(jì)師還需要定義多樣的文本字體大小。

就像樂曲中的音符，需要遵循一定的音階一樣。如此，才能夠確保音樂保有穩(wěn)定的垂直節(jié)奏。盡管，這聽起來可能有些嚇人。但幸運(yùn)的是，一些優(yōu)秀的前輩已經(jīng)幫助我們解決了這些問題，做出了一定的示范。例如， Tim Brown已經(jīng)非常成功的通過創(chuàng)建網(wǎng)站為我們展示各種類型輸入文本的尺寸大小設(shè)計(jì)范圍。

而后，就需要設(shè)計(jì)師決定設(shè)計(jì)中可能涉及的文本字體大小，定義出大致的設(shè)計(jì)范圍：

默認(rèn)值為（1em）的標(biāo)準(zhǔn)文本，在營(yíng)銷類網(wǎng)站或UI設(shè)計(jì)中是非常常見的字體尺寸。而16PX則是常見的瀏覽器字體尺寸

博客中較大正文文本字體的尺寸

更大的標(biāo)題或副標(biāo)題尺寸

超大的章節(jié)標(biāo)題尺寸

大到離譜的價(jià)格頁(yè)面價(jià)格文本尺寸

當(dāng)然，設(shè)計(jì)中，也會(huì)涉及一些更小的組件尺寸，例如用于更小的正文文本，輸入暗示以及其他輔助文本設(shè)計(jì)的尺寸等。

而使用Mockplus DS設(shè)計(jì)系統(tǒng)過程中，頁(yè)面文本字體屬性的定義，也非常方便。如圖：

邊框?qū)傩?/b>

現(xiàn)在，我們一起來了解另一種需要接受自定義值的樣式屬性——邊框?qū)傩?/p>

對(duì)于組件邊框的圓角設(shè)計(jì)，一般包括以下邊框圓角值：

針對(duì)小組件（比如復(fù)選框，標(biāo)簽和Tags之類組件）的較小邊框圓角值

針對(duì)按鈕和輸入框之類組件的中等邊框圓角值

針對(duì)卡片，模塊以及其他大組件的較大邊框圓角值

2px,4px和8px的組件邊框圓角值展示

注意：我們還需要特別為一些圓角組件，例如頭像組件等，設(shè)置一個(gè)50%的邊框圓角值。

而這一方面，使用Mockplus DS設(shè)計(jì)系統(tǒng)時(shí)，設(shè)計(jì)師可以根據(jù)設(shè)計(jì)需求，簡(jiǎn)單快捷定義和定制需要的圓角值，尺寸以及間距等。如圖：

間距

幾乎所有設(shè)計(jì)中都會(huì)用到的一種樣式屬性——留白。無論是利用留白凸顯標(biāo)題中的鏈接，或是利用留白分隔網(wǎng)格中的項(xiàng)目，還是在頭像與鏈接或下拉組件之間添加一定空白等等，設(shè)計(jì)中的空白都不應(yīng)該是隨性無意義的，而應(yīng)該通過精心的設(shè)計(jì)和規(guī)劃，發(fā)揮其突出頁(yè)面部件的作用。

如輸入文本組件尺寸范圍定義一樣，設(shè)計(jì)師需要在頁(yè)面設(shè)計(jì)中，堅(jiān)持一定的組件間距，以確保整款設(shè)計(jì)界面每個(gè)組件和布局之間的間距都是統(tǒng)一的。而我最常用的間距比例尺寸是Material Design設(shè)計(jì)規(guī)范的8dp網(wǎng)格尺寸。

總之，堅(jiān)持使用8dp的增量設(shè)計(jì)，設(shè)計(jì)師們就能夠預(yù)定義一系列組件間距值， 從而能夠在后期設(shè)計(jì)中使用這些值來定義產(chǎn)品相關(guān)套件中的每一個(gè)組件和布局。

當(dāng)然，設(shè)計(jì)師也可通過這些已定的間距值定義一定的寬度、高度和行高，以便可以在設(shè)計(jì)和調(diào)整按鈕、輸入表單、頭像和其他類似組件時(shí)，重用這些尺寸大小。而且，因?yàn)檫@些組件在Web網(wǎng)頁(yè)中經(jīng)常一起出現(xiàn)，如若能在設(shè)計(jì)中遵循相同的尺寸大小范圍， 將能夠非常有效的避免UI設(shè)計(jì)中出現(xiàn)一些不必要的差異性設(shè)計(jì)。

文字間距

如前所述，字體大小不是定義文本組件所需的惟一樣式屬性。文字間距則是設(shè)置文本組件的另一個(gè)有效屬性，以達(dá)到收緊大標(biāo)題或間隔標(biāo)題的作用，避免頁(yè)面擁擠。如圖：文字之間應(yīng)保持一定的間距，使文本保持一定的可讀性：

創(chuàng)建組件庫(kù)

到此，設(shè)計(jì)師就已然完成全局樣式庫(kù)的定義，就可以輕松通過以上已經(jīng)搭建好的樣式屬性，開始構(gòu)建組件庫(kù)。誠(chéng)然，大多數(shù)情況下，組件庫(kù)搭建并不是一個(gè)創(chuàng)造性的過程——因?yàn)榇罱ㄟ^程需要的只是：將已定義的樣式運(yùn)用到各種組件中而已。

所以，在這個(gè)階段的設(shè)計(jì)中，設(shè)計(jì)師們并不會(huì)使用到任何未預(yù)定義的樣式庫(kù)樣式。而創(chuàng)造性的設(shè)計(jì)階段只發(fā)生在樣式庫(kù)預(yù)定義階段。而且，從這一刻開始，無論是色彩、字體大小、邊距/填充值、寬度/高度還是其它方面因素，設(shè)計(jì)師們使用的組件和布局樣式都應(yīng)該來自于已定義的樣式庫(kù)。無需再引入任何新內(nèi)容。盡管，這聽起來可能有些極端或不可理解。但在我看來，卻恰恰相反。正是由于在這方面的認(rèn)識(shí)不同，才使許多設(shè)計(jì)師誤入歧途，給產(chǎn)品UI設(shè)計(jì)帶來更多的問題。

例如，Dave Rupert最近在Twitter上進(jìn)行了一項(xiàng)民意調(diào)查，詢問，當(dāng)按鈕位于模態(tài)組件中時(shí)，應(yīng)該在哪里放置能夠覆蓋按鈕組件樣式的代碼。

不管最終的結(jié)果如何，我個(gè)人認(rèn)為：整個(gè)討論是完全沒有必要的。

試想，當(dāng)設(shè)計(jì)師們?cè)O(shè)計(jì)出一個(gè)希望能夠在全局范圍內(nèi)多次重用的組件，但實(shí)際卻只在產(chǎn)品設(shè)計(jì)中某些部分編輯使用，這本身就是矛盾而不合理的。而且，它首先就與創(chuàng)建全局組件庫(kù)的初衷相悖的。加之，在實(shí)際的設(shè)計(jì)中，只有當(dāng)設(shè)計(jì)師在設(shè)計(jì)初期沒有進(jìn)行全面宏觀規(guī)劃時(shí)，才需要運(yùn)用全新的樣式重寫預(yù)定義的樣式，讓組建融入相對(duì)緊湊的頁(yè)面空間或直接采用一些組件變體進(jìn)行設(shè)計(jì)。

因?yàn)楫?dāng)設(shè)計(jì)師每次嘗試?yán)眯碌臉邮街貙戭A(yù)定義的全局組件時(shí)，也同時(shí)會(huì)影響到整個(gè)設(shè)計(jì)系統(tǒng)的一致性。針對(duì)分散在產(chǎn)品設(shè)計(jì)中的各種組件的修改，哪怕微乎其微，都意味著設(shè)計(jì)系統(tǒng)就已經(jīng)不再如希望的那樣一致統(tǒng)一了?？傊?，只是掛在嘴邊的一致統(tǒng)一，而事實(shí)卻不然。

下面，我們使用上面的樣式庫(kù)中定義的樣式來構(gòu)建一些常見的組件：

常見的按鈕組件

下面我們從簡(jiǎn)單的按鈕組件開始，來說明如何使用在樣式庫(kù)中預(yù)先定義的樣式來構(gòu)建：

其它組件

同樣，以上提及的顏色、字體大小、陰影和填充值都可以直接通過上面預(yù)定義的樣式庫(kù)中的樣式設(shè)置而來。

也可以構(gòu)建一些更炫酷部件

當(dāng)設(shè)計(jì)和構(gòu)建一些組件時(shí)，設(shè)計(jì)師也可以組合多個(gè)組件來創(chuàng)建更復(fù)雜的部件，如圖下拉菜單組件：

該下拉菜單組件并未使用預(yù)定義的樣式庫(kù)之外的任何樣式。同理，設(shè)計(jì)師也能創(chuàng)建整個(gè)組件庫(kù)，然后將它們運(yùn)用到更廣泛的頁(yè)面布局中，最終擴(kuò)展到網(wǎng)頁(yè)或App UI設(shè)計(jì)全局中。

設(shè)計(jì)系統(tǒng)創(chuàng)建小貼士：

某些需要自定義數(shù)值的組件并不會(huì)在樣式板中提前定義，例如側(cè)邊欄的寬度。因?yàn)檫@些組件數(shù)值定義都是約定俗成，無需特別提出。例如，側(cè)邊欄的寬度一般定義為視口寬度大小的1/3。又或者，僅僅因?yàn)檫@些組件的數(shù)值本身就是任意且不可重用的，不預(yù)先定義，反而使用會(huì)更方便。所以，在預(yù)先進(jìn)行組件樣式定義時(shí)，關(guān)鍵是要考慮哪些樣式會(huì)大量重用，而哪些則不會(huì)重用。如此，能夠極大地提升工作效率。

讓各類組件發(fā)揮其應(yīng)有的作用。不要嘗試為按鈕、輸入框、標(biāo)題或其它組件添加邊距。就組件而言，設(shè)計(jì)師只需要為其定義一致的樣式，方便后期直接運(yùn)用到各種設(shè)計(jì)實(shí)例中，以保證界面的統(tǒng)一。由于頁(yè)邊距在不同的案例中設(shè)置有所不同，因此設(shè)計(jì)師最好還是在頁(yè)面樣式表中使用“div”和“wrapper”代碼單獨(dú)進(jìn)行定義。

總之，設(shè)計(jì)系統(tǒng)的預(yù)先創(chuàng)建，能夠極大的提升設(shè)計(jì)師工作效率，輕松保證網(wǎng)頁(yè)或App產(chǎn)品界面的一致性。

Mockplus DS設(shè)計(jì)系統(tǒng)——?輕松定制，管理和優(yōu)化你的設(shè)計(jì)規(guī)范系統(tǒng)

Mockplus DS設(shè)計(jì)系統(tǒng)，是由摹客設(shè)計(jì)推出的在線設(shè)計(jì)規(guī)范系統(tǒng)定制，管理和優(yōu)化的在線設(shè)計(jì)平臺(tái)。

支持設(shè)計(jì)師根據(jù)具體的Web或App UI 設(shè)計(jì)需求，定義各種設(shè)計(jì)規(guī)范系統(tǒng)，例如對(duì)Logo, 色彩，字體大小，圖標(biāo)，組件，圖片，弧度，間距，尺寸和陰影等等設(shè)計(jì)樣式進(jìn)行預(yù)先定義。

更有團(tuán)隊(duì)協(xié)作功能，方便公司企業(yè)設(shè)計(jì)團(tuán)隊(duì)，共同打造符合產(chǎn)品品牌形象的設(shè)計(jì)系統(tǒng)。

其Sketch和Mockplus原型工具插件，對(duì)于設(shè)計(jì)團(tuán)隊(duì)通過Sketch和Mockplus原型工具，實(shí)現(xiàn)設(shè)計(jì)規(guī)范系統(tǒng)的定制，匯總，優(yōu)化以及同步自動(dòng)更新，也是非常實(shí)用。

作者：Colm Tuite

原文鏈接:?https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117

學(xué)習(xí)工具，但不受限于某種工具。用摹客，建規(guī)范，現(xiàn)在試用，為你的團(tuán)隊(duì)定制設(shè)計(jì)規(guī)范。