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

然后，其實(shí)也沒(méi)有什么然后了……

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

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

圖 1: 設(shè)計(jì)系統(tǒng)詞云圖

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

存在原因

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

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

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

我認(rèn)為，只有對(duì)于下面這幾條，你或團(tuán)隊(duì)有強(qiáng)烈的需求，才是生成一個(gè)設(shè)計(jì)系統(tǒng)的好時(shí)機(jī)。

• 以往的設(shè)計(jì)內(nèi)容總是需要被快速重復(fù)使用
• 需要釋放設(shè)計(jì)資源，讓人力更專注于更加復(fù)雜和有價(jià)值的問(wèn)題。
• 需要在多個(gè)團(tuán)隊(duì)或多個(gè)產(chǎn)品之間保持一致性
• 需要幫助初級(jí)設(shè)計(jì)師的產(chǎn)出迅速達(dá)到更高級(jí)的要求

沒(méi)有被需要的設(shè)計(jì)系統(tǒng)，就是未來(lái)束之高閣，等著落灰的一套“玄學(xué)”。

組成內(nèi)容

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

圖 2:設(shè)計(jì)系統(tǒng)的組成內(nèi)容

1. 設(shè)計(jì)原則

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

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

為了對(duì)抽象的設(shè)計(jì)原則有更具像化的體會(huì)，我們?cè)賮?lái)看看幾個(gè)比較有名的設(shè)計(jì)系統(tǒng)的原則。

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

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

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

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

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

我認(rèn)為它不是必須的。

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

正因?yàn)樵瓌t是設(shè)計(jì)系統(tǒng)高度抽象化的結(jié)晶，所以它需要基于大量實(shí)際設(shè)計(jì)經(jīng)驗(yàn)再去生成，不然，很難起到指導(dǎo)設(shè)計(jì)系統(tǒng)達(dá)到增加效率的目的。

2. 設(shè)計(jì)風(fēng)格和規(guī)范

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

圖 4: 設(shè)計(jì)規(guī)范

有了設(shè)計(jì)風(fēng)格和設(shè)計(jì)規(guī)范并不一定就能讓使用這個(gè)設(shè)計(jì)系統(tǒng)的產(chǎn)品建立統(tǒng)一的品牌調(diào)性，只有當(dāng)設(shè)計(jì)系統(tǒng)具有了一定辨識(shí)性的設(shè)計(jì)風(fēng)格，并在設(shè)計(jì)規(guī)范指導(dǎo)下進(jìn)行長(zhǎng)期的設(shè)計(jì)產(chǎn)出后，才能夠讓使用這個(gè)設(shè)計(jì)系統(tǒng)的產(chǎn)品形成統(tǒng)一的品牌調(diào)性。

3. 設(shè)計(jì)組件和模式

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

圖 5: UI kits

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

圖 6: 設(shè)計(jì)模式

簡(jiǎn)單點(diǎn)來(lái)說(shuō)，設(shè)計(jì)組件就是一些元素，主要給設(shè)計(jì)師用的，設(shè)計(jì)模式就是一些交互方式，主要給研發(fā)工程師看的。由于兩者很相似，如今更多的會(huì)把兩者合起來(lái)看。

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

當(dāng)然，由于各個(gè)產(chǎn)品的需求、場(chǎng)景和定位等不同，越大的合成組件將會(huì)越復(fù)雜。

圖 7: 原子設(shè)計(jì)理論

4. 內(nèi)容資產(chǎn)

在某些設(shè)計(jì)系統(tǒng)的定義里，可能會(huì)把內(nèi)容資產(chǎn)作為設(shè)計(jì)規(guī)范的一部分，但我這里想強(qiáng)調(diào)的是其作為資源的一部分。

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

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

圖 8: 內(nèi)容資產(chǎn)

5. 工具、流程

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

6. 設(shè)計(jì)語(yǔ)言和設(shè)計(jì)方針（guidelines）

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

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

設(shè)計(jì)指導(dǎo)方針（Design Guidelines）：按照中文翻譯理解，我認(rèn)為它是說(shuō)明、介紹設(shè)計(jì)系的文檔，沒(méi)有包含在設(shè)計(jì)系統(tǒng)內(nèi)。

常見(jiàn)問(wèn)題

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

圖 9: 設(shè)計(jì)組件復(fù)盤 workshop

綜合來(lái)說(shuō)，設(shè)計(jì)系統(tǒng)常見(jiàn)的問(wèn)題有三類：

1. 定義性問(wèn)題

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

2. 使用性問(wèn)題

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

3. 協(xié)作性問(wèn)題

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

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

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)