如何構建設計系統—技巧分享: 快速搭建一致統一的設計系統

1 人贊了文章

以下內容由摹客團隊翻譯整理，僅供學習交流，摹客設計系統是國內獨家設計規範製作平台。

事實上，過去的幾年裡，我時常會被問及各種設計系統相關問題。在經過長時間的深思熟慮之後，對於如何設計，構建和呈現產品（例如Marvel， Bantam and Modulz）相關設計系統方面,有了一些自己的想法和心得。這裡就和大家分享一下。希望對大家的設計系統搭建有所幫助：

首先，什麼是設計系統？

眾所周知，設計師們都喜歡挑選各種優質的UI工具包來完成他們的產品設計。然而，不同於將各種UI工具包和樣式指南機械的堆放在一起，現今，越來越多的設計師們開始專註於構建一致統一的設計系統，希望將各類旗下產品或產品UI 部件更加協調的融合在一起。

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

設計系統（作為一種設計相關的技術產品），不僅僅只是一個設計框架，UI工具包或組件庫。亦或是一套樣式指南或代碼指南。實際上，它所涵蓋的內容要遠遠多於以上設計內容的總和。那它究竟是什麼呢？具體包含哪些內容呢？很簡單。設計系統是一個不斷更新變化的設計規範集，能夠及時地幫助設計師控制和規範產品的各種組件和構成。

一個優質實用的設計系統包含了方方面面的內容——從公司文化/使命，到品牌，文案，組件庫以及其它設計語言等等。更進一步的分析，對於設計系統的重要部分的討論，雖然設計師們觀點不一，爭議不斷，但就我而言，更偏向於從公司的角度來分析：好的設計系統應該是能夠讓用戶輕鬆了解到：什麼公司？其使命是什麼？其產品外觀如何，給人的感覺以及功能如何等等。

只有真正認識到這些相關關鍵因素，才能夠更加輕鬆的將這些內容信息轉化成直觀連續且易讀的設計語言，向用戶傳達必要的產品信息。

樣式庫設計

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

如圖，簡單的標題組件，經過分解，也僅僅只是多種可復用樣式的集合而已。

同理，設計師們也需要將UI設計中的各部件，分解到不能再分為止：即僅僅包含一些最基本的組件風格樣式。而這方面，一大訣竅就是根據各頁面的CSS樣式屬性列表進行分解。通常，這些列表包含的絕大部分屬性都只需接受固定值。所以它們能夠被應用到各種在線網頁中。當然，也有一部分屬性，僅需接受自定義值。也因此，它們也最終成為區分不同網路產品重要因素。也恰巧是這些屬性的自定義值決定著產品的全局樣式庫。最終，全局樣式庫也同樣將為設計師們設計和搭建產品的方方面面提供便利。

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

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

顏色

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

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

品牌色彩

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

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

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

極淺的背景灰 深一度且常用於邊框、線條、筆劃或分隔線的灰色 副標題和輔助正文文本的中灰 主標題，正文以及背景的深灰色

當然，實際的設計中，設計師可能需要更多的灰色。比如，一些設計師喜歡在設計中會運用3種灰色，以調節正文文本陰影。而一些設計師則更偏愛於使用兩種不同的筆畫陰影，來突出文本重點。當然，這一切，都可根據具體設計需求和設計師的喜好來決定。但這裡需要強調的是：設計師需要預先定義好可能涉及的各種色彩樣式，從而能夠在後面的產品設計中直接重用。

最後，在樣式庫設計的過程中，也可為各類顏色添加色調或陰影的變化。如此，在實際的產品UI設計中，需要為組件添加淺色背景或深色線條時，這類預定義色板將會非常實用。

最終製作完成的調色板

而這方面，無論是品牌主題色的選擇，還是色板或其他組件色彩樣式的定義，我們這裡用摹客在線設計系統為例，它提供了非常強大的色彩選擇，方便設計師根據各種UI設計需求，通過其「標準色」設計模塊，使用RGB顏色值， 16進位顏色碼以及拾色器，輕鬆定製各類調色板。如圖：

陰影

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

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

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

淺色陰影以突出互動式組件，提升其可供性 更深的陰影以突出組件懸停效果 強烈對比的陰影為下拉列表/彈出窗口和其它類似的組件打造獨特的視角 明顯區別的陰影突出頁面模態組件

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

而摹客設計系統平台也為設計師提供了專門的「陰影」模塊，以預定義各種陰影樣式。如圖：

字體尺寸

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

就像樂曲中的音符，需要遵循一定的音階一樣。如此，才能夠確保音樂保有穩定的垂直節奏。儘管，這聽起來可能有些嚇人。但幸運的是，一些優秀的前輩已經幫助我們解決了這些問題，做出了一定的示範。例如， Tim Brown已經非常成功的通過創建網站為我們展示各種類型輸入文本的尺寸大小設計範圍。

而後，就需要設計師決定設計中可能涉及的文本字體大小，定義出大致的設計範圍：

默認值為（1em）的標準文本，在營銷類網站或UI設計中是非常常見的字體尺寸。而16PX則是常見的瀏覽器字體尺寸 博客中較大正文文本字體的尺寸 更大的標題或副標題尺寸 超大的章節標題尺寸 大到離譜的價格頁面價格文本尺寸 當然，設計中，也會涉及一些更小的組件尺寸，例如用於更小的正文文本，輸入暗示以及其他輔助文本設計的尺寸等。

而使用摹客設計系統過程中，頁面文本字體屬性的定義，也非常方便。如圖：

邊框屬性

現在，我們一起來了解另一種需要接受自定義值的樣式屬性——邊框屬性

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

針對小組件（比如複選框，標籤和Tags之類組件）的較小邊框圓角值 針對按鈕和輸入框之類組件的中等邊框圓角值 針對卡片，模塊以及其他大組件的較大邊框圓角值

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

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

而這一方面，使用摹客設計系統時，設計師可以根據設計需求，簡單快捷定義和定製需要的圓角值，尺寸以及間距等。如圖：

間距

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

如輸入文本組件尺寸範圍定義一樣，設計師需要在頁面設計中，堅持一定的組件間距，以確保整款設計界面每個組件和布局之間的間距都是統一的。而我最常用的間距比例尺寸是Material Design設計規範的8dp網格尺寸。

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

當然，設計師也可通過這些已定的間距值定義一定的寬度、高度和行高，以便可以在設計和調整按鈕、輸入表單、頭像和其他類似組件時，重用這些尺寸大小。而且，因為這些組件在Web網頁中經常一起出現，如若能在設計中遵循相同的尺寸大小範圍， 將能夠非常有效的避免UI設計中出現一些不必要的差異性設計。

文字間距

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

創建組件庫

到此，設計師就已然完成全局樣式庫的定義，就可以輕鬆通過以上已經搭建好的樣式屬性，開始構建組件庫。誠然，大多數情況下，組件庫搭建並不是一個創造性的過程——因為搭建過程需要的只是：將已定義的樣式運用到各種組件中而已。

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

例如，Dave Rupert最近在Twitter上進行了一項民意調查，詢問，當按鈕位於模態組件中時，應該在哪裡放置能夠覆蓋按鈕組件樣式的代碼。

不管最終的結果如何，我個人認為：整個討論是完全沒有必要的。

試想，當設計師們設計出一個希望能夠在全局範圍內多次重用的組件，但實際卻只在產品設計中某些部分編輯使用，這本身就是矛盾而不合理的。而且，它首先就與創建全局組件庫的初衷相悖的。加之，在實際的設計中，只有當設計師在設計初期沒有進行全面宏觀規劃時，才需要運用全新的樣式重寫預定義的樣式，讓組建融入相對緊湊的頁面空間或直接採用一些組件變體進行設計。

因為當設計師每次嘗試利用新的樣式重寫預定義的全局組件時，也同時會影響到整個設計系統的一致性。針對分散在產品設計中的各種組件的修改，哪怕微乎其微，都意味著設計系統就已經不再如希望的那樣一致統一了。總之，只是掛在嘴邊的一致統一，而事實卻不然。

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

常見的按鈕組件

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

其它組件

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

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

當設計和構建一些組件時，設計師也可以組合多個組件來創建更複雜的部件，如圖下拉菜單組件：

該下拉菜單組件並未使用預定義的樣式庫之外的任何樣式。同理，設計師也能創建整個組件庫，然後將它們運用到更廣泛的頁面布局中，最終擴展到網頁或App UI設計全局中。

設計系統創建小貼士：

某些需要自定義數值的組件並不會在樣式板中提前定義，例如側邊欄的寬度。因為這些組件數值定義都是約定俗成，無需特別提出。例如，側邊欄的寬度一般定義為視口寬度大小的1/3。又或者，僅僅因為這些組件的數值本身就是任意且不可重用的，不預先定義，反而使用會更方便。所以，在預先進行組件樣式定義時，關鍵是要考慮哪些樣式會大量重用，而哪些則不會重用。如此，能夠極大地提升工作效率。 讓各類組件發揮其應有的作用。不要嘗試為按鈕、輸入框、標題或其它組件添加邊距。就組件而言，設計師只需要為其定義一致的樣式，方便後期直接運用到各種設計實例中，以保證界面的統一。由於頁邊距在不同的案例中設置有所不同，因此設計師最好還是在頁面樣式表中使用「div」和「wrapper」代碼單獨進行定義。

總之，設計系統的預先創建，能夠極大的提升設計師工作效率，輕鬆保證網頁或App產品界面的一致性。

摹客設計系統—— 輕鬆定製，管理和優化你的設計規範系統

最後推薦一下摹客設計推出的在線設計系統，是一個管理和優化的在線設計平台。

支持設計師根據具體的Web或App UI 設計需求，定義各種設計規範系統，例如對Logo, 色彩，字體大小，圖標，組件，圖片，弧度，間距，尺寸和陰影等等設計樣式進行預先定義。

更有團隊協作功能，方便公司企業設計團隊，共同打造符合產品品牌形象的設計系統。

其Sketch和摹客原型工具插件，對於設計團隊通過Sketch和摹客原型工具，實現設計規範系統的定製，匯總，優化以及同步自動更新，也是非常實用。