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

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

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

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

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

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

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

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

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

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

樣式庫設(shè)計

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

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

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

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

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

顏色

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

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

品牌色彩

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

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

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

極淺的背景灰

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

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

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

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

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

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

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

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

陰影

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

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

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

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

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

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

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

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

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

Type Scale

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

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

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

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

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

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

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

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

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

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

邊框?qū)傩?/b>

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

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

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

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

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

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

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

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

間距

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

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

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

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

文字間距

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

創(chuàng)建組件庫

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

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

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

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

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

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

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

常見的按鈕組件

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

其它組件

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

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

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

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

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

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

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

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

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

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

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

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

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

作者：Colm Tuite

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

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