以下內(nèi)容由摹客（https://www.mockplus.cn）團隊翻譯整理跋选，僅供學習交流粒褒，摹客設計系統(tǒng)是國內(nèi)獨家設計規(guī)范制作平臺。

事實上允耿，過去的幾年里，我時常會被問及各種設計系統(tǒng)相關問題爹梁。在經(jīng)過長時間的深思熟慮之后右犹，對于如何設計，構建和呈現(xiàn)產(chǎn)品（例如Mockplus姚垃，Marvel， Bantam and Modulz）相關設計系統(tǒng)方面,有了一些自己的想法和心得盼忌。這里就和大家分享一下积糯。希望對大家的設計系統(tǒng)搭建有所幫助：

首先，什么是設計系統(tǒng)谦纱？

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

事實上，一些公司亮瓷，比如全球知名的Shopify和Intercom琴拧，已然開始組件內(nèi)部團隊，專門從事設計系統(tǒng)的構建工作嘱支。顯然蚓胸，公司企業(yè)以及設計師們已經(jīng)日漸認識到設計系統(tǒng)的重要性。非常振奮人心除师，對吧沛膳？誰知道呢！或許汛聚，將來某一天锹安，我們不再需要打開新文檔，從零開始設計贞岭，設計工具在手八毯，一切皆可搞定！

設計系統(tǒng)（作為一種設計相關的技術產(chǎn)品）瞄桨，不僅僅只是一個設計框架话速，UI工具包或組件庫。亦或是一套樣式指南或代碼指南芯侥。實際上泊交，它所涵蓋的內(nèi)容要遠遠多于以上設計內(nèi)容的總和乳讥。那它究竟是什么呢？具體包含哪些內(nèi)容呢廓俭？很簡單云石。設計系統(tǒng)是一個不斷更新變化的設計規(guī)范集，能夠及時地幫助設計師控制和規(guī)范產(chǎn)品的各種組件和構成研乒。

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

一個優(yōu)質(zhì)實用的設計系統(tǒng)包含了方方面面的內(nèi)容——從公司文化/使命雹熬，到品牌宽菜，文案，組件庫以及其它設計語言等等竿报。更進一步的分析铅乡，對于設計系統(tǒng)的重要部分的討論，雖然設計師們觀點不一烈菌，爭議不斷阵幸，但就我而言，更偏向于從公司的角度來分析：好的設計系統(tǒng)應該是能夠讓用戶輕松了解到：什么公司芽世？其使命是什么挚赊？其產(chǎn)品外觀如何，給人的感覺以及功能如何等等捂襟。

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

樣式庫設計

在開始吸睛的頁面組件設計之前涨共，設計師需要提前做一些準備，即將產(chǎn)品界面分解成更簡單宠漩，更基本的細小部分举反，奠定一定設計基礎。

如圖扒吁，簡單的標題組件火鼻，經(jīng)過分解，也僅僅只是多種可復用樣式的集合而已雕崩。

同理魁索，設計師們也需要將UI設計中的各部件，分解到不能再分為止：即僅僅包含一些最基本的組件風格樣式盼铁。而這方面粗蔚，一大訣竅就是根據(jù)各頁面的CSS樣式屬性列表進行分解。通常饶火，這些列表包含的絕大部分屬性都只需接受固定值鹏控。所以它們能夠被應用到各種在線網(wǎng)頁中致扯。當然，也有一部分屬性当辐，僅需接受自定義值抖僵。也因此，它們也最終成為區(qū)分不同網(wǎng)絡產(chǎn)品重要因素缘揪。也恰巧是這些屬性的自定義值決定著產(chǎn)品的全局樣式庫耍群。最終，全局樣式庫也同樣將為設計師們設計和搭建產(chǎn)品的方方面面提供便利找筝。

而且世吨，當產(chǎn)品界面分解工作完成時，產(chǎn)品設計應用到的相關元素呻征，也應該遵循樣式庫定義，不使用任何全局樣式庫之外的樣式對界面組件進行定義罢浇。

下面我們就對設計系統(tǒng)中可能包含的樣式進行預定義：

顏色

首先陆赋，我們從最常見的樣式屬性開始講解——一種被當今設計工具所理解的唯一可以被命名、存儲和重用的屬性:顏色嚷闭。

比如攒岛，假若我們將藍色定為品牌主題色時，在定義樣式庫時胞锰，其輔助色就可以選擇藍色的互補色：橙色灾锯。

品牌色彩

通過色彩來直觀傳達操作成功和失敗的反饋是UI設計中最常見的一種設計方式。而這一點上嗅榕，設計師可以將綠色和紅色添加到色板中進行定義顺饮，以達到提供一定色彩反饋的目的。當然凌那，除了紅色和綠色兼雄，其他顏色，例如黑色和黃色帽蝶，也會是不錯的選擇赦肋。

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

最后，設計師可能還需要一些灰色励稳。而大多UI設計都會涉及以下幾種灰色：

極淺的背景灰

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

副標題和輔助正文文本的中灰

主標題驹尼，正文以及背景的深灰色

當然趣避，實際的設計中，設計師可能需要更多的灰色扶欣。比如鹅巍，一些設計師喜歡在設計中會運用3種灰色千扶，以調(diào)節(jié)正文文本陰影。而一些設計師則更偏愛于使用兩種不同的筆畫陰影骆捧，來突出文本重點澎羞。當然，這一切敛苇，都可根據(jù)具體設計需求和設計師的喜好來決定妆绞。但這里需要強調(diào)的是：設計師需要預先定義好可能涉及的各種色彩樣式，從而能夠在后面的產(chǎn)品設計中直接重用枫攀。

最后括饶，在樣式庫設計的過程中，也可為各類顏色添加色調(diào)或陰影的變化来涨。如此图焰，在實際的產(chǎn)品UI設計中，需要為組件添加淺色背景或深色線條時蹦掐，這類預定義色板將會非常實用技羔。

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

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

陰影

陰影是UI設計中另一種常用的樣式屬性。在我看來晶默，很多設計師在設計組件陰影時谨娜，大都根據(jù)喜好，即興創(chuàng)作磺陡。事實上趴梢，很多時候，大部分樣式屬性設計也是如此币他，全憑設計師當時的心情和感覺坞靶。然而，如此這般完全主觀獨立性的設計蝴悉，也時常會帶來頁面設計不一致的問題彰阴。

而且，退一步說拍冠，從我們在設計中使用陰影的目的的角度進行分析尿这。我們總是試圖通過陰影的添加簇抵，為UI打造一定的頁面視角。但是射众，事實卻是碟摆，很多組件設計都可以通過同樣的方式來提升其視覺效果。所以叨橱，在實際的設計中典蜕，設計師們需要將陰影這一樣式屬性從單一的組件擴展到整個全局樣式庫中，以提升整個產(chǎn)品頁面設計的視覺效果罗洗。

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

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

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

強烈對比的陰影為下拉列表/彈出窗口和其它類似的組件打造獨特的視角

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

陰影從淺到深的設計范圍展示

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

Type Scale

為了打造一定的頁面視覺層次結(jié)構轩缤，設計師還需要定義多樣的文本字體大小。

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

而后剪芥，就需要設計師決定設計中可能涉及的文本字體大小垄开，定義出大致的設計范圍：

默認值為（1em）的標準文本，在營銷類網(wǎng)站或UI設計中是非常常見的字體尺寸税肪。而16PX則是常見的瀏覽器字體尺寸

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

更大的標題或副標題尺寸

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

大到離譜的價格頁面價格文本尺寸

當然溉躲，設計中，也會涉及一些更小的組件尺寸益兄，例如用于更小的正文文本锻梳，輸入暗示以及其他輔助文本設計的尺寸等。

Type Scale

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

邊框?qū)傩?/b>

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

對于組件邊框的圓角設計荆永，一般包括以下邊框圓角值：

針對小組件（比如復選框废亭，標簽和Tags之類組件）的較小邊框圓角值

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

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

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

注意：我們還需要特別為一些圓角組件具钥，例如頭像組件等豆村，設置一個50%的邊框圓角值。

而這一方面氓拼，使用Mockplus DS設計系統(tǒng)時同衣，設計師可以根據(jù)設計需求，簡單快捷定義和定制需要的圓角值汇竭，尺寸以及間距等淘这。如圖：

間距

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

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

總之，堅持使用8dp的增量設計羹铅，設計師們就能夠預定義一系列組件間距值蚀狰， 從而能夠在后期設計中使用這些值來定義產(chǎn)品相關套件中的每一個組件和布局。

當然职员，設計師也可通過這些已定的間距值定義一定的寬度麻蹋、高度和行高，以便可以在設計和調(diào)整按鈕焊切、輸入表單扮授、頭像和其他類似組件時，重用這些尺寸大小专肪。而且糙箍，因為這些組件在Web網(wǎng)頁中經(jīng)常一起出現(xiàn)，如若能在設計中遵循相同的尺寸大小范圍牵祟， 將能夠非常有效的避免UI設計中出現(xiàn)一些不必要的差異性設計深夯。

?

文字間距

如前所述，字體大小不是定義文本組件所需的惟一樣式屬性。文字間距則是設置文本組件的另一個有效屬性咕晋，以達到收緊大標題或間隔標題的作用雹拄，避免頁面擁擠。如圖：文字之間應保持一定的間距掌呜，使文本保持一定的可讀性：

創(chuàng)建組件庫

到此滓玖，設計師就已然完成全局樣式庫的定義，就可以輕松通過以上已經(jīng)搭建好的樣式屬性质蕉，開始構建組件庫势篡。誠然，大多數(shù)情況下模暗，組件庫搭建并不是一個創(chuàng)造性的過程——因為搭建過程需要的只是：將已定義的樣式運用到各種組件中而已禁悠。

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

例如缠俺，Dave Rupert最近在Twitter上進行了一項民意調(diào)查，詢問贷岸，當按鈕位于模態(tài)組件中時壹士，應該在哪里放置能夠覆蓋按鈕組件樣式的代碼。

不管最終的結(jié)果如何偿警，我個人認為：整個討論是完全沒有必要的躏救。

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

因為當設計師每次嘗試利用新的樣式重寫預定義的全局組件時蔓纠，也同時會影響到整個設計系統(tǒng)的一致性辑畦。針對分散在產(chǎn)品設計中的各種組件的修改，哪怕微乎其微贺纲，都意味著設計系統(tǒng)就已經(jīng)不再如希望的那樣一致統(tǒng)一了航闺。總之猴誊，只是掛在嘴邊的一致統(tǒng)一潦刃，而事實卻不然。

下面懈叹，我們使用上面的樣式庫中定義的樣式來構建一些常見的組件：

常見的按鈕組件

下面我們從簡單的按鈕組件開始乖杠，來說明如何使用在樣式庫中預先定義的樣式來構建：

其它組件

同樣，以上提及的顏色澄成、字體大小胧洒、陰影和填充值都可以直接通過上面預定義的樣式庫中的樣式設置而來。

也可以構建一些更炫酷部件

當設計和構建一些組件時墨状，設計師也可以組合多個組件來創(chuàng)建更復雜的部件卫漫，如圖下拉菜單組件：

該下拉菜單組件并未使用預定義的樣式庫之外的任何樣式。同理肾砂，設計師也能創(chuàng)建整個組件庫列赎，然后將它們運用到更廣泛的頁面布局中，最終擴展到網(wǎng)頁或App UI設計全局中镐确。

?

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

某些需要自定義數(shù)值的組件并不會在樣式板中提前定義包吝，例如側(cè)邊欄的寬度。因為這些組件數(shù)值定義都是約定俗成源葫，無需特別提出诗越。例如，側(cè)邊欄的寬度一般定義為視口寬度大小的1/3息堂。又或者嚷狞，僅僅因為這些組件的數(shù)值本身就是任意且不可重用的，不預先定義，反而使用會更方便感耙。所以褂乍，在預先進行組件樣式定義時，關鍵是要考慮哪些樣式會大量重用即硼，而哪些則不會重用逃片。如此，能夠極大地提升工作效率只酥。

讓各類組件發(fā)揮其應有的作用褥实。不要嘗試為按鈕、輸入框裂允、標題或其它組件添加邊距损离。就組件而言，設計師只需要為其定義一致的樣式绝编，方便后期直接運用到各種設計實例中僻澎，以保證界面的統(tǒng)一。由于頁邊距在不同的案例中設置有所不同十饥，因此設計師最好還是在頁面樣式表中使用“div”和“wrapper”代碼單獨進行定義窟勃。

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

國內(nèi)有什么簡單且實用的設計系統(tǒng)創(chuàng)建工具呢蜒秤？

這里也為大家介紹一款簡單實用的設計系統(tǒng)創(chuàng)建工具——Mockplus DS設計系統(tǒng)汁咏。

Mockplus DS設計系統(tǒng)，是由摹客設計推出的在線設計規(guī)范系統(tǒng)定制作媚，管理和優(yōu)化的在線設計平臺攘滩。

支持設計師根據(jù)具體的Web或App UI 設計需求，定義各種設計規(guī)范系統(tǒng)纸泡，例如對Logo, 色彩漂问，字體大小，圖標弟灼，組件，圖片冒黑，弧度田绑，間距，尺寸和陰影等等設計樣式進行預先定義抡爹。

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

其Sketch和Mockplus原型工具插件欧穴，對于設計團隊通過Sketch和Mockplus原型工具民逼，實現(xiàn)設計規(guī)范系統(tǒng)的定制，匯總涮帘，優(yōu)化以及同步自動更新拼苍，也是非常實用。

作者：Colm Tuite

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

學習工具调缨，但不受限于某種工具疮鲫。用摹客，建規(guī)范弦叶，現(xiàn)在試用俊犯，為你的團隊定制設計規(guī)范。?