很多年前剛聽到這個概念的時候，一直覺得設計系統(tǒng)是個非常高大上和牛逼哄哄的事情，當時 Material Design 剛剛出來沒多久，蘋果的人機設計指南在設計圈稱王稱霸，雖然自己主要做的都是安卓系統(tǒng)，還是認真拜讀了 IOS 的 Human Interface Guidelines。

然后，其實也沒有什么然后了……

你怎么看待設計系統(tǒng)這件事呢？

關于設計系統(tǒng)，有的人會覺得類似于一種玄學，有的人認為它好是好，但容易被束之高閣，放著落灰，有的人認為它對于設計師是一種束縛……另外，還有很多和它相關的概念也經(jīng)常被混淆：設計語言、設計原則、設計規(guī)范、設計風格、設計組件……

圖 1: 設計系統(tǒng)詞云圖

為了理清設計系統(tǒng)到底是什么，我把上面的這些和設計系統(tǒng)經(jīng)常出現(xiàn)的詞語進行了分類。我認為，它們指出的，應該是基于不同角度對設計系統(tǒng)的解釋。在這些詞語里，有的解釋了設計系統(tǒng)存在的原因：追求效率，保持一致性、避免重復勞動，有助于數(shù)字產品形成整體性等。有的解釋了它的組成或者相關聯(lián)的內容：設計規(guī)范、設計語言、設計原則、設計規(guī)范、設計風格、設計組件等。有的解釋了設計系統(tǒng)容易出現(xiàn)的問題：玄學、束縛、高大上，理想化等。

存在原因

存在原因，也就是建設設計系統(tǒng)的目的，正是由于設計系統(tǒng)是為了幫助我們的工作工作更加有效率的一個整體工具，也就注定了設計系統(tǒng)的樣式、組成和運作方式不會一層不變，每個公司都需要自己找出適合自己團隊設計與開發(fā)之間最順暢的那個系統(tǒng)。

要知道，雖然設計系統(tǒng)聽起來很酷，但創(chuàng)建一個好的設計系統(tǒng)其實是非常消耗精力的。所以，設計系統(tǒng)的目的一定要清晰并且符合現(xiàn)狀需要。

為什么還要去創(chuàng)建設計系統(tǒng)呢？

我認為，只有對于下面這幾條，你或團隊有強烈的需求，才是生成一個設計系統(tǒng)的好時機。

• 以往的設計內容總是需要被快速重復使用
• 需要釋放設計資源，讓人力更專注于更加復雜和有價值的問題。
• 需要在多個團隊或多個產品之間保持一致性
• 需要幫助初級設計師的產出迅速達到更高級的要求

沒有被需要的設計系統(tǒng)，就是未來束之高閣，等著落灰的一套“玄學”。

組成內容

系統(tǒng)這個詞，是指由相互聯(lián)系的要素構成的有特定結構和功能的有機整體。設計系統(tǒng)，自然也是一個整體性的有機集合。

圖 2:設計系統(tǒng)的組成內容

1. 設計原則

設計原則是引導設計系統(tǒng)建設的指導思想和戰(zhàn)略方向，基于大量實際經(jīng)驗提煉的高度理論化概括。

設計原則這個概念并不是為了設計系統(tǒng)才出現(xiàn)的，從完形心理學流派運用過來的格式塔理論所包括的臨近性、相似性、封閉性、連續(xù)性等設計原則，還有以“如非必要，勿增實體”為核心的簡約設計原則，來自唐納德諾曼的概念模式、反饋、限制范圍、可感知的預設用途四條設計原則等等。

為了對抽象的設計原則有更具像化的體會，我們再來看看幾個比較有名的設計系統(tǒng)的原則。

• 蘋果公司：美學整體，一致性，直接的操作性，反饋，隱喻，用戶可控
• 微軟公司：自然而然的，符合直覺和有力的，引人入勝且沉浸
• 谷歌公司：材料是一種隱喻，明顯、圖形化和有目的性的，有意義的動效

圖 3: 三大設計系統(tǒng)的原則

突然發(fā)現(xiàn)就蘋果公司沒給自己的設計系統(tǒng)專門取一個名字啊～

可以發(fā)現(xiàn)，雖然三家公司的設計原則各有不同，但幾乎都是從通用的設計原則中提煉優(yōu)化的。

建設一個設計系統(tǒng)一定需要設定自己的設計原則嗎？

我認為它不是必須的。

雖然設計原則很重要，但在設計系統(tǒng)初期的時候，遵循現(xiàn)有基礎和通用的設計原則來指導建設整個系統(tǒng)也是可以的?？偤眠^隨隨便便從基礎通用的設計原則中拿出一些詞語潤色一下，簡單的堆砌一些高大上的詞語，空泛的放在那里，等著它們逐漸變成別人口中的“玄學”吧？

正因為原則是設計系統(tǒng)高度抽象化的結晶，所以它需要基于大量實際設計經(jīng)驗再去生成，不然，很難起到指導設計系統(tǒng)達到增加效率的目的。

2. 設計風格和規(guī)范

設計風格，是這個設計系統(tǒng)給人形成的一種代表性的圖形印象。設計規(guī)范，是用于協(xié)調統(tǒng)一性的規(guī)則和范式。在 60 年代的《美孚品牌手冊》和 70 年代的 《NASA 圖形使用規(guī)范》中，就已經(jīng)包含“顏色、字體、圖形、用法和示例”等內容。

圖 4: 設計規(guī)范

有了設計風格和設計規(guī)范并不一定就能讓使用這個設計系統(tǒng)的產品建立統(tǒng)一的品牌調性，只有當設計系統(tǒng)具有了一定辨識性的設計風格，并在設計規(guī)范指導下進行長期的設計產出后，才能夠讓使用這個設計系統(tǒng)的產品形成統(tǒng)一的品牌調性。

3. 設計組件和模式

對于設計系統(tǒng)里，我們最熟悉和常用的應該就是設計組件了，也就是 UI kits，包括輸入框、按鈕、文字、鏈接、下拉菜單等等。是組成界面的最小元素和這些元素的常用集合體。

圖 5: UI kits

設計模式，比元素更復雜一些，是完成任務所使用的一些基礎的、常用的交互方式，是可以解決問題的小型設計方案。比如 Material design 里的 Confirmation and acknowledgement，它提供的就是為機器在執(zhí)行操作之前向用戶確認的一系列設計方案。

圖 6: 設計模式

簡單點來說，設計組件就是一些元素，主要給設計師用的，設計模式就是一些交互方式，主要給研發(fā)工程師看的。由于兩者很相似，如今更多的會把兩者合起來看。

2013 年，前端工程師 Brad Forst 將原子理論運用在界面設計中，形成一套設計系統(tǒng)后，設計組件得到進一步擴展，可以形成比原來最初出現(xiàn)設計模式這個概念時更高層次的集合體，例如，大到幾個完整的頁面及其包含的交互方式，也可以成為某個設計系統(tǒng)的其中一個組件。

當然，由于各個產品的需求、場景和定位等不同，越大的合成組件將會越復雜。

圖 7: 原子設計理論

4. 內容資產

在某些設計系統(tǒng)的定義里，可能會把內容資產作為設計規(guī)范的一部分，但我這里想強調的是其作為資源的一部分。

由于設計系統(tǒng)是一個有機的整體，在它不斷的服務于各產品線的同時，也一定會需要不斷填充不同的內容，比如應用里使用的圖標、字體、插畫、模型等等，這些內容積累下來，也應該成為這個設計系統(tǒng)的一部分，如果有其他的應用或產品需要，就可以直接取用，從而提高整體的工作效率。

內容資產比較常見的有圖標庫、字體庫和音效庫，分別提供了多種圖標、多種字體和多種音效可以給不同的產品或應用使用。隨著插畫風格、三維風格的留下，未來必然還會出現(xiàn)隸屬于某個設計系統(tǒng)的插畫庫、模型庫，以及在產品里經(jīng)常使用的文案集合。

圖 8: 內容資產

5. 工具、流程

這兩塊主要是針對設計系統(tǒng)適用的具體環(huán)境，在協(xié)同性要求下我認為需要納入設計系統(tǒng)的內容。簡單的舉例來說，就是如果使用藍湖做自動化標注，就團隊統(tǒng)一使用藍湖，而不是有的人使用藍湖，有的人使用摹客。

6. 設計語言和設計方針（guidelines）

還有兩個經(jīng)常提到，但我剛才畫的設計系統(tǒng)圖示里沒有提到的概念。

設計語言：語言，是一個能夠達到相互交流的符號系統(tǒng)。人類學家索緒爾認為，語言能反映出多變言語活動背后的穩(wěn)定規(guī)律。所以，我認為這里的設計語言，應該等同于設計規(guī)范，是設計規(guī)范另一種表述。

設計指導方針（Design Guidelines）：按照中文翻譯理解，我認為它是說明、介紹設計系的文檔，沒有包含在設計系統(tǒng)內。

常見問題

最后，設計系統(tǒng)的詞云圖里出現(xiàn)的玄學、理論化、落灰、空中樓閣……這些都是創(chuàng)建設計系統(tǒng)時很容易遇到的一些問題，尤其是實用性最高的設計組件，更是首當其沖。之前我組織我們團隊的設計師做復盤性質的workshop，單就設計系統(tǒng)的設計組件部分，大家就提出了20多條問題。

圖 9: 設計組件復盤 workshop

綜合來說，設計系統(tǒng)常見的問題有三類：

1. 定義性問題

設計系統(tǒng)從大的框架性定義到具體設計組件的定義都不是件一蹴而就的事情，它從 0 開始，每一次的更新和迭代，對于當前的團隊來說都需要是既關鍵又有效的。關鍵是指設計系統(tǒng)當前定義下來的內容是后面的產品線經(jīng)常性使用的，有效是指這些定義確定下來的內容是可以使用現(xiàn)有的資源去完成的，即以現(xiàn)有團隊的能力、時間和設備是可以完成并達成其效果的。

2. 使用性問題

目錄不清晰，文檔說明不全，包含資源不完整，這些都是使用時的問題。如果把設計系統(tǒng)看作一個產品，讓用戶（設計師或研發(fā)人員）覺得好用，才是它不會被束之高閣的解決方法。

3. 協(xié)作性問題

不知道有更新，收不到反饋，不了解使用者的情況……協(xié)作性的問題催生了市面上諸如藍湖、摹客、墨刀、Codesign以及很多設計軟件的云服務功能等。

雖然現(xiàn)在市面上有非常多優(yōu)秀的設計系統(tǒng)可以參考，但正如在存在原因中提到的，由于它是為了幫助我們自己所在的團隊更有效率的工作，終究還是需要靠自己基于實際情況去做變化。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。

藍藍設計( bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務