原子設(shè)計(jì)系統(tǒng)（下均稱為設(shè)計(jì)系統(tǒng)）這個(gè)詞應(yīng)該已經(jīng)流行很久了，像螞蟻金服最近出的 Ant Design 3.0 也說是基于「設(shè)計(jì)系統(tǒng)」進(jìn)行構(gòu)建的。如果你沒有了解過原子設(shè)計(jì)系統(tǒng)，那么我建議先去對(duì)原子設(shè)計(jì)系統(tǒng)做一個(gè)初步的了解。因?yàn)檫@篇文章并不是原子設(shè)計(jì)系統(tǒng)的科普文。

雖然設(shè)計(jì)系統(tǒng)這個(gè)概念出現(xiàn)了很久，但是從設(shè)計(jì)師的角度來看，業(yè)界仍然存在大量的「偽」設(shè)計(jì)系統(tǒng)。為什么這么說？

設(shè)計(jì)系統(tǒng)是從 Style Guide 之上發(fā)展出來的一個(gè)設(shè)計(jì)方法論。所以設(shè)計(jì)系統(tǒng)其實(shí)并不是解決了「設(shè)計(jì)風(fēng)格」這個(gè)問題，而是在嘗試解決 Style Guide 在實(shí)踐中存在的諸多問題。

先來看看我們傳統(tǒng)運(yùn)用 Style Guide 中存在的問題。

當(dāng)明確一個(gè)設(shè)計(jì)需求后，我們根據(jù) Style Guide 進(jìn)行規(guī)范化的設(shè)計(jì)，輸出對(duì)應(yīng)的一系列組件。如果 Style Guide 中沒有明確定義的時(shí)候，可能就會(huì)自己創(chuàng)建一些樣式，最后交付開發(fā)，可能等到產(chǎn)品完全上線后，才會(huì)根據(jù)之前的設(shè)計(jì)結(jié)果修訂 Style Guide 或者組件庫。

整個(gè)實(shí)踐模式如下圖所示：

這種流程存在諸多問題，比如組件庫和 Style Guide 的更新往往因?yàn)轫?xiàng)目迭代速度快而滯后；新創(chuàng)建的組件與之前的 Style Guide 存在沖突；更新組件庫和 Style Guide 又要花費(fèi)不少時(shí)間…...

當(dāng)然我這邊說的基本都是中小型公司，像 BAT 這樣的大公司不能包含在內(nèi)——一旦人多了之后，任何設(shè)計(jì)上的問題就都只變成管理的問題了。

而正是因?yàn)檫@種實(shí)踐模式存在諸多問題，效率上有待提升， Brad Frost 才會(huì)提出設(shè)計(jì)系統(tǒng)這個(gè)概念。值得一提的是，Brad Frost 在 2013 年提出設(shè)計(jì)系統(tǒng)這個(gè)概念的時(shí)候， 他的團(tuán)隊(duì)只有 4 個(gè)人。我想也正是因?yàn)閳F(tuán)隊(duì)小，才更加需要效率的提升吧。

設(shè)計(jì)系統(tǒng)提出的一個(gè)實(shí)踐模式是先設(shè)計(jì)系統(tǒng)，而后根據(jù)設(shè)計(jì)系統(tǒng)來完成業(yè)務(wù)與組件庫。如下圖所示：

這個(gè)好處不言自明，組件庫與業(yè)務(wù)線可以同步更新，一次修改，便可以多端響應(yīng)。完美解決 Style Guide 模式中存在的種種問題。

但是問題又來了，怎么樣才可以實(shí)現(xiàn)這種實(shí)踐模式呢？用程序員的話說，設(shè)計(jì)系統(tǒng)應(yīng)該抽取哪些內(nèi)容，然后再分別讓業(yè)務(wù)與 Style Guide 繼承呢？

答案就是：模塊化，組件化，原子化 。這也是為什么設(shè)計(jì)系統(tǒng)被稱為原子設(shè)計(jì)的原因。

基于前面提到的，設(shè)計(jì)系統(tǒng)中必須做到的一點(diǎn)是：當(dāng)你改動(dòng)任何一個(gè)原子，你有自信其他所有依賴于這個(gè)原子的部件全部自動(dòng)更新。只有滿足了這一點(diǎn)，設(shè)計(jì)系統(tǒng)設(shè)想中的效率、解放生產(chǎn)力才會(huì)真正實(shí)現(xiàn)。

我個(gè)人猜測，Brad Frost 應(yīng)該受到過 React 的啟發(fā)，因?yàn)?React 作為前端模塊化開發(fā)的鼻祖，其開源時(shí)間為 2013年5月，與文章中提到的 2013 年吻合，同時(shí) Brad Frost 是前端開發(fā)者，想必很了解React。

設(shè)計(jì)系統(tǒng)的落地關(guān)鍵

理論的部分講完了，接下來是落地的關(guān)鍵。也只有到了這個(gè)地方，才能夠鑒別各種所謂的「設(shè)計(jì)系統(tǒng)」到底是不是真的設(shè)計(jì)系統(tǒng)。

還記得我們之前怎么說的嗎？修改設(shè)計(jì)系統(tǒng)中的任何一個(gè)原子，整個(gè)系統(tǒng)都應(yīng)該能夠被響應(yīng)到。

那么在 Sketch 中有什么方式可以達(dá)到這樣的效果？對(duì)，分享樣式與嵌套符號(hào)。

只有合理利用了這兩個(gè)功能，才能真正達(dá)到設(shè)計(jì)系統(tǒng)的效果。如果在 Sketch 中沒有實(shí)現(xiàn)樣式共享，仍然只是 Style Guide，算不上一個(gè)真正的設(shè)計(jì)系統(tǒng)。沒法全局響應(yīng)就意味著沒法執(zhí)行「先設(shè)計(jì)系統(tǒng)，后業(yè)務(wù)與組件庫」的流程。

讓我們來看下現(xiàn)在風(fēng)頭正盛的 Ant Design 組件庫。

可以看到，隨便選取的一個(gè)顏色并沒有任何共享樣式，這就意味著如果我去修改這些顏色，組件的樣式并不會(huì)跟著改變。

在查看完組件中的顏色、字體均沒有對(duì)應(yīng)的共享樣式后，基本可以斷定 Ant Design 的 Sketch 文件并沒有構(gòu)成真正意義上的設(shè)計(jì)系統(tǒng)。

憑我的主觀判斷，這么做的原因可能有兩個(gè)：

• Ant Design 團(tuán)隊(duì)內(nèi)部有一套設(shè)計(jì)系統(tǒng)更新的工具，可以快速對(duì) Sketch 已存在的原子進(jìn)行更新，但是并不會(huì)以共享樣式的方式保存。而因?yàn)榉N種原因，這個(gè)工具沒有對(duì)外發(fā)布。
• Sketch 文件發(fā)布之初就沒有想過原子層面的顏色、字體等還會(huì)被替換，因此沒有去設(shè)置共享樣式。我個(gè)人認(rèn)為這種可能性會(huì)更大一些。

但是不管我如何去揣測，一個(gè)無法全局更新的 Sketch 文件，哪怕具有再多的組件，對(duì)于設(shè)計(jì)師來說，直接使用價(jià)值也是非常有限的。 因?yàn)樵O(shè)計(jì)師沒法把這么多組件直接、快速地復(fù)用到自己的業(yè)務(wù)場景中，那么這些所謂的「設(shè)計(jì)系統(tǒng)」往往就變成了單純的「參考圖」，缺少工程使用價(jià)值。

實(shí)際上， Ant Design 對(duì)于開發(fā)者來說價(jià)值巨大，我個(gè)人在做開發(fā)的時(shí)候用起來也非常爽。但是對(duì)于設(shè)計(jì)師來說，真正的工程價(jià)值可能就只有「設(shè)置行間距的時(shí)候總是多個(gè) 16px 就好」之類的經(jīng)驗(yàn)了。

而且知乎上對(duì) Ant Design 予以好評(píng)的絕大部分都是開發(fā)者，而不是設(shè)計(jì)師。所以可見一斑。

「偽」設(shè)計(jì)系統(tǒng)

那除了 Ant Design 之外，還有哪些「偽」設(shè)計(jì)系統(tǒng)呢？我從全網(wǎng)找到了大概了10來份設(shè)計(jì)系統(tǒng)的 Sketch 文檔，一一做了檢查與測試。

1. IBM 的 Carbon Design

2. Shopify 的 Polaris

3. Salesforce 的 Lightning Design System

它只定義了一個(gè)主色，其他顏色和字體等等都沒有共享樣式。

4. Atlassian Design Language

他們沒有以 Design System 自稱，但是這里我也放上來了。

Sketch 文件中一樣沒有定義顏色的共享樣式。不過難得的是它做了字體和陰影樣式的定義。

以上都是大公司的 Sketch 文檔?？梢钥吹?，基本上放出來的設(shè)計(jì)系統(tǒng)都是「偽」設(shè)計(jì)系統(tǒng)，對(duì)原子做過良好定義的很少。我想究其原因還是因?yàn)椴粫?huì)考慮到供其他設(shè)計(jì)師「復(fù)用」這些資源供自己的項(xiàng)目使用吧。我更愿意把它們當(dāng)成是披著「設(shè)計(jì)系統(tǒng)的皮」的 Style Guide。

更多的設(shè)計(jì)系統(tǒng)可以從StyleGuide.io 這個(gè)網(wǎng)站上找，我不過是挑選了其中知名的一些來測試。

「真」設(shè)計(jì)系統(tǒng)

我相信接下來的內(nèi)容大家可能會(huì)更加關(guān)心，真正稱得上設(shè)計(jì)系統(tǒng)的有哪些呢？ 因?yàn)橹挥羞@些設(shè)計(jì)系統(tǒng)才能幫助提升我們?nèi)粘９ぷ鞯男剩屔钭兊酶佑鋹偂?/p>

1. UXPT

UXPT 全稱 UXPower Tools，應(yīng)該是市面上真正的設(shè)計(jì)系統(tǒng)中最完整的一家了，同時(shí)有 Web 、移動(dòng)端的設(shè)計(jì)系統(tǒng)，均可響應(yīng)原子操作。

我在前文提到的原子級(jí)的顏色、字體、陰影樣式等等這些都可以自定義，而且一次修改，所有組件能夠同步修改。

拿修改顏色舉個(gè)例子：

可以看到當(dāng)我修改樣式并進(jìn)行同步后，所有組件的樣式都進(jìn)行了修改。

UXPT 利用 Style Stacks? 的方式實(shí)現(xiàn)了一次修改顏色，多端修改的需求。簡單來說就是下圖所示的樣子。

另外還有幾個(gè)很不錯(cuò)的特性，比如內(nèi)容自適應(yīng)、自定義符號(hào)等等。

△ 內(nèi)容根據(jù)尺寸自適應(yīng)

△ 基于「分子」自定義頁面內(nèi)容

△ 陰影的樣式也可以做定義設(shè)置

還有開箱即用的 Style Guide ，既有白天模式，還有黑夜模式。

這個(gè)設(shè)計(jì)系統(tǒng)好是好，不過移動(dòng)端 + PC 的合集要 80 刀，還是稍微有點(diǎn)貴，在 Gumroad 上售賣。

2. Frames

Frames 是一個(gè)專門針對(duì) Web 的設(shè)計(jì)系統(tǒng)，同樣可以實(shí)現(xiàn)原子系統(tǒng)中的一次修改，多端復(fù)用。

我個(gè)人認(rèn)為它最大的優(yōu)勢(shì)就是提供了近百個(gè)模板網(wǎng)站的模板頁，可以非常迅速地出展示頁面。

△ 這個(gè)視頻展示的就是利用模板頁在短短幾分鐘內(nèi)完成一個(gè)主頁的設(shè)計(jì)。

Frames 中還提供了一些可視化的圖表，但是這部分的設(shè)計(jì)和復(fù)用性都不是特別出眾。

△ 圖表

這個(gè)設(shè)計(jì)系統(tǒng)賣 48 刀，也是在 Gumroad 上售賣。

3. Rojcyk 的 iOS Blueprint

iOS Blueprint 是一個(gè)專注于 iOS 的設(shè)計(jì)系統(tǒng)。在業(yè)界知名度蠻高的，連 Sketch 官方都有報(bào)道它。

同時(shí)它的使用指南做的非常呆萌。

除了基本的 Library 之外，也提供了一些預(yù)先通用的模板，比如登陸注冊(cè)、忘記密碼等等。改個(gè)顏色、改個(gè)名字基本上可以開箱即用了。

這個(gè)設(shè)計(jì)系統(tǒng)便宜一些，Gumroad 上賣 20 刀。

4. Cabana

Cabana 是針對(duì) Web 端的一個(gè)設(shè)計(jì)系統(tǒng)，我個(gè)人感覺它最大的特色是利用了 8 點(diǎn)網(wǎng)格系統(tǒng)。官網(wǎng)上這個(gè)特性也是第一個(gè)展示。這樣一來在進(jìn)行排版布局的時(shí)候能夠很好的節(jié)省時(shí)間與精力。

此外它還提供了一些圖像處理的濾鏡，可以對(duì)圖片進(jìn)行快速處理。

△ Cabana 的設(shè)計(jì)風(fēng)格略偏黑暗

我個(gè)人雖然不大喜歡 Cabana 的風(fēng)格，不過修改與自定義對(duì)于設(shè)計(jì)系統(tǒng)來說卻是小菜一碟。設(shè)計(jì)系統(tǒng)之所以為設(shè)計(jì)系統(tǒng)，就是能夠通過原子層面的調(diào)整，讓頁面呈現(xiàn)完全不一樣的效果。

Cabana 在 Gumroad 上賣 48 刀。

5. janlosert 的 Nested Symbols & Auto-Updating Styleguides

這個(gè)設(shè)計(jì)系統(tǒng)是網(wǎng)上已有的設(shè)計(jì)系統(tǒng)中唯一免費(fèi)的存在。我個(gè)人猜測作者可能是從 UXPT或者 Cabana 修改過來的。因?yàn)槠渲幸恍?biāo)注什么的都一樣......

△ 右側(cè)的 Overrides ，和 UXPT、Cabana 的標(biāo)注形式一模一樣

這個(gè)設(shè)計(jì)系統(tǒng)和其他相比，功能上其實(shí)沒有什么特別的。可能最大的特點(diǎn)就是「免費(fèi)」吧。

這個(gè)作者還配套提供了一份 React 的組件代碼，在 Gumroad 上賣 9 刀。

6. Predix

Predix 算是個(gè)大公司出品的設(shè)計(jì)系統(tǒng)，但是仍然是這些設(shè)計(jì)系統(tǒng)里面最不友好的一個(gè)。因?yàn)樗鼪]有提供自定義的「接口」，如果要去自定義就要自己找相應(yīng)的 Symbol 。

7. UIT

我厚著臉皮把自己基于 UXPT 修改的設(shè)計(jì)系統(tǒng)貼了上來。UIT 主要的貢獻(xiàn)是做了本地化處理以及提供了 Button 樣式設(shè)計(jì)的自定義。

△ 一些基本的樣式接口，直接修改幾個(gè)主色就可以產(chǎn)出不同的設(shè)計(jì)系統(tǒng)了

當(dāng)時(shí)還做了一下使用指南，后來因?yàn)楸容^忙就沒繼續(xù)做下去。不過使用方法其實(shí)和 UXPT 一樣。

UIT 基于 UXPT 修改，所以也沒法商用，一開始做出來也就是為了學(xué)習(xí)一下設(shè)計(jì)系統(tǒng)的設(shè)計(jì)流程。

我想以上這些設(shè)計(jì)系統(tǒng)對(duì)于小公司、獨(dú)立設(shè)計(jì)師以及新人的幫助會(huì)非常大。

一方面設(shè)計(jì)系統(tǒng)已經(jīng)完成了大部分組件的定制，在實(shí)現(xiàn)業(yè)務(wù)中就不需要多考慮按鈕圓角要多大，行間距要留多少，可以更加聚焦于業(yè)務(wù)邏輯本身，節(jié)省時(shí)間精力。

另一方面，設(shè)計(jì)系統(tǒng)具有原子級(jí)的樣式自定義能力，我們可以針對(duì)不同需求高效地產(chǎn)出對(duì)應(yīng)的設(shè)計(jì)系統(tǒng)，然后快速復(fù)用組件。

剛?cè)胄械男氯艘部梢酝ㄟ^這套設(shè)計(jì)系統(tǒng)去學(xué)習(xí)與研究設(shè)計(jì)的邏輯與其遵守的規(guī)范，了解一些背后的設(shè)計(jì)理念。

最后再說些別的感想吧。

其實(shí)我個(gè)人對(duì) Ant Design 的期望還是蠻高的，科學(xué)的設(shè)計(jì)方法與對(duì)細(xì)節(jié)的把控我都非常贊賞。不過可能也是因?yàn)槠谕酱?，失望也越大。AntD 對(duì)于開發(fā)者來說非常友好，開箱即用，但是從拿到的 Sketch 文件來看，團(tuán)隊(duì)似乎并沒有考慮過如何幫助非 AntD 的設(shè)計(jì)師提升工作效率，解放生產(chǎn)力。不知道還沒有發(fā)布的 Kitchen 會(huì)有哪些驚艷的表現(xiàn)呢。

另外，如果 AntD 要成為設(shè)計(jì)界的 Bootstrap ，可能未來需要做的就是能夠完成原子與分子間的綁定，讓設(shè)計(jì)師也能夠享受到「開箱即用」的體驗(yàn)。

相比起來，Airbnb 在「解放設(shè)計(jì)師生產(chǎn)力」這條路上走的會(huì)更遠(yuǎn)一些。有興趣的同學(xué)可以去翻一翻他們?cè)O(shè)計(jì)團(tuán)隊(duì)一篇《Sketch Interface》的文章，他們甚至在探索機(jī)器學(xué)習(xí)與設(shè)計(jì)系統(tǒng)的結(jié)合，最終達(dá)到繪制原型圖就能直接生成業(yè)務(wù)界面的目的。

之前在研究設(shè)計(jì)系統(tǒng)的時(shí)候，看到 Airbnb 的 Alex Schleifer 說的這句話，感觸很深刻：

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.

翻譯過來大致就是：這是一個(gè)很簡單的真理——如果不在方法層面有所創(chuàng)新，你就不可能在產(chǎn)品上有所創(chuàng)新。

我想我們研究設(shè)計(jì)系統(tǒng)也是如此，改變我們?cè)械脑O(shè)計(jì)思想、設(shè)計(jì)方式，我們才能夠以更加高效，更加優(yōu)雅地姿態(tài)去創(chuàng)造全新的產(chǎn)品吧。

在前端開發(fā)中有個(gè)詞叫做「技術(shù)選型」，如果大公司的設(shè)計(jì)系統(tǒng)能提供原子層面的自定義，說不定等到未來設(shè)計(jì)界也會(huì)出來一個(gè)「設(shè)計(jì)選型」這樣的詞吧。

歡迎關(guān)注作者的微信公眾號(hào)：arvindesign

「提高效率，如何搭建組件庫」

• 《網(wǎng)易設(shè)計(jì)師：超全面的交互規(guī)范設(shè)計(jì)流程》
• 《為什么我們都應(yīng)該學(xué)會(huì)組件化設(shè)計(jì)思維？》
• 《實(shí)用全面！教你用Sketch Libraries構(gòu)建組件庫/設(shè)計(jì)體系》
• 《設(shè)計(jì)實(shí)戰(zhàn)：教育產(chǎn)品組件化交互設(shè)計(jì)的實(shí)踐與思考》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com