設(shè)計(jì)系統(tǒng)是為了實(shí)現(xiàn)產(chǎn)品的目的而組織起來(lái)的一套相互關(guān)聯(lián)的模式和共享實(shí)踐。設(shè)計(jì)系統(tǒng)需要承認(rèn)價(jià)值觀和公司文化的沖突，擁有共享詞匯表和設(shè)計(jì)系統(tǒng)的管理與協(xié)作方法等。不過(guò)目前存在設(shè)計(jì)與開(kāi)發(fā)協(xié)作的斷層，設(shè)計(jì)工具無(wú)法很好地向工程師傳達(dá)設(shè)計(jì)邏輯，設(shè)計(jì)師和工程師的工作環(huán)境也存在脫節(jié)現(xiàn)象。這些問(wèn)題，讓我們看看作者是怎么看待及解決的吧~

一、什么是設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)（也有人稱之為設(shè)計(jì)體系）是為了實(shí)現(xiàn)產(chǎn)品的目的而組織起來(lái)的一套相互關(guān)聯(lián)的模式和共享實(shí)踐。用于解決團(tuán)隊(duì)協(xié)作、業(yè)務(wù)拓展、設(shè)計(jì)與開(kāi)發(fā)規(guī)?；桓兜葐?wèn)題。

按照目前主流的認(rèn)知，設(shè)計(jì)系統(tǒng)主要包含以下部分：

1. 樣式指南；
2. 組件庫(kù)；
3. 設(shè)計(jì)原則與協(xié)作流程。

1. 樣式指南

通常包含顏色、排版、商標(biāo)、字體等，重點(diǎn)放在品牌層面。

在 web社區(qū)，可能還會(huì)包含交互、動(dòng)畫(huà)、語(yǔ)氣和文案等，這在《Design Systems》（Alla Kholmatova著）中被統(tǒng)稱為感知性模式。

早期的樣式指南規(guī)范可以追溯到 NASA 圖形標(biāo)準(zhǔn)手冊(cè)，其中已經(jīng)提供了非常現(xiàn)代化的視覺(jué)示例、顏色配對(duì)指南等。

2. 組件庫(kù)

包含預(yù)置的、可復(fù)用的 UI 元素，包含組件名稱、描述、屬性、狀態(tài)等，工程化的組件還需要代碼片段，用于更直觀地表達(dá)交互和響應(yīng)式。某些設(shè)計(jì)系統(tǒng)甚至?xí)峁┥澈协h(huán)境來(lái)嘗試不同的組件定制方案。

與組件庫(kù)類似的，還有模式庫(kù)（pattern library）這一概念。

設(shè)計(jì)模式最早在建筑領(lǐng)域被提出，指代反復(fù)出現(xiàn)的特定問(wèn)題及其解決方案。

在后面出現(xiàn)的數(shù)字產(chǎn)品領(lǐng)域，也有過(guò)不少經(jīng)典的書(shū)籍，如《Designing Interfaces》中總結(jié)了大量的設(shè)計(jì)模式，作為一本入門(mén)讀物非常合適。

3. 設(shè)計(jì)原則和協(xié)作流程

主流認(rèn)知中的設(shè)計(jì)系統(tǒng)通常還會(huì)包含設(shè)計(jì)原則（design principles）。比如尼爾森可用性原則、格式塔、錨定效應(yīng)等，這在設(shè)計(jì)界已經(jīng)被熟知。在構(gòu)建界面、設(shè)計(jì)走查時(shí)通常也將這些原則作為參考。

但正是因?yàn)檫@些原則過(guò)于“通用且正確”，即使被納入設(shè)計(jì)系統(tǒng)，它們也難以提供有效的設(shè)計(jì)決策。而設(shè)計(jì)價(jià)值觀（Design Philosophy）則可以更好地在設(shè)計(jì)系統(tǒng)中找到自己的定位。

在設(shè)計(jì)系統(tǒng)中需要承認(rèn)價(jià)值觀的沖突：

• 更多使用嚴(yán)肅的說(shuō)明文字還是有趣的插圖？
• 從一開(kāi)始就防止用戶犯錯(cuò)，還是當(dāng)用戶犯錯(cuò)后進(jìn)行糾正？
• 系統(tǒng)復(fù)雜度守恒又必須增加功能時(shí)，將復(fù)雜度轉(zhuǎn)移至其他功能、用戶或是開(kāi)發(fā)？

設(shè)計(jì)價(jià)值觀作為設(shè)計(jì)系統(tǒng)的核心，可以很好地為設(shè)計(jì)提供指導(dǎo)，形成可復(fù)用的設(shè)計(jì)決策，為后續(xù)的設(shè)計(jì)評(píng)審提供統(tǒng)一的判斷標(biāo)準(zhǔn)。

還有一些內(nèi)容可能在各系統(tǒng)中散落在不同章節(jié)，但又確實(shí)是設(shè)計(jì)系統(tǒng)不可分割的一部分，以下列舉部分：

1. 共享詞匯表幫助團(tuán)隊(duì)內(nèi)部建立統(tǒng)一的設(shè)計(jì)語(yǔ)言，畢竟誰(shuí)也不想同時(shí)聽(tīng)到“蒙層、蒙板、浮層、遮罩層”這些五花八門(mén)的稱呼；
2. 建立設(shè)計(jì)系統(tǒng)的管理與協(xié)作方法，安排專人負(fù)責(zé)設(shè)計(jì)系統(tǒng)的維護(hù)？還是所有設(shè)計(jì)師都有編輯權(quán)限？若是后者，還需要建立相應(yīng)的評(píng)審機(jī)制，否則設(shè)計(jì)系統(tǒng)將會(huì)變得越來(lái)越臃腫且難以維護(hù)和使用；
3. 設(shè)計(jì)資產(chǎn)如何維護(hù)，產(chǎn)生的更新如何通知到工作流的上下游，版本的管理如何進(jìn)行…

二、設(shè)計(jì)與開(kāi)發(fā)協(xié)作的斷層

當(dāng)團(tuán)隊(duì)建立一套設(shè)計(jì)系統(tǒng)后，大部分設(shè)計(jì)交付都可以用設(shè)計(jì)系統(tǒng)中的樣式、組件、模板進(jìn)行拼接。

例如色板中的基礎(chǔ)色號(hào)、全局的登錄組件、列表頁(yè)的篩選器等，這也是設(shè)計(jì)系統(tǒng)最直接的價(jià)值所在。

然而當(dāng)進(jìn)行設(shè)計(jì)交付時(shí)，設(shè)計(jì)師與前端工程師的協(xié)作方式對(duì)設(shè)計(jì)系統(tǒng)的支持并不夠友好。

首當(dāng)其沖，設(shè)計(jì)工具無(wú)法很好地向工程師傳達(dá)設(shè)計(jì)邏輯。

Sketch、Figma這樣的圖形化工具都支持樣式和組件的綁定與調(diào)用，這是復(fù)用思想的體現(xiàn)。甚至有插件或第三方標(biāo)注工具幫助展示元素代碼，這樣看起來(lái)工程師似乎只需要復(fù)制粘貼代碼即可。

然而實(shí)際情況卻是，設(shè)計(jì)稿無(wú)法體現(xiàn)出這種設(shè)計(jì)邏輯，比如頁(yè)面元素的響應(yīng)方案、多設(shè)備切換、視圖滾動(dòng)和元素間的依賴關(guān)系等。

另一方面，設(shè)計(jì)師與工程師的工作環(huán)境完全脫節(jié)。

設(shè)計(jì)師在畫(huà)板中對(duì)元素進(jìn)行拖拉拽，而不是真正對(duì)組件進(jìn)行設(shè)計(jì)。這導(dǎo)致設(shè)計(jì)師需要花費(fèi)很大的努力才能遍歷組件的所有狀態(tài)。

即使所有的狀態(tài)都被考慮到，也不得不為此展示大量相似的頁(yè)面或冗長(zhǎng)的設(shè)計(jì)說(shuō)明，這對(duì)前端工程師的工作體驗(yàn)非常不友好。

工程化的設(shè)計(jì)系統(tǒng)由設(shè)計(jì)師和工程師共同構(gòu)建，而到了設(shè)計(jì)執(zhí)行階段，現(xiàn)有的工作流程又將設(shè)計(jì)和開(kāi)發(fā)拆開(kāi)，這看來(lái)是非?；恼Q的。

綜合前面提到的兩個(gè)問(wèn)題，設(shè)想一個(gè)這樣的資源倉(cāng)庫(kù)，組件接口暴露給開(kāi)發(fā)，由開(kāi)發(fā)負(fù)責(zé)功能邏輯的實(shí)現(xiàn)，搭建組件的骨架，設(shè)計(jì)師只需要考慮組件的樣式和設(shè)計(jì)邏輯。

在這樣的平臺(tái)中，由設(shè)計(jì)師賦予設(shè)計(jì)變量，比如圓角、尺寸與間距、顏色、定位等（實(shí)際上設(shè)計(jì)師已經(jīng)在Figma中做了這些努力，但是無(wú)法很高效地傳達(dá)給開(kāi)發(fā)）。將這些變量提交后，所有使用了這一變量的套件都將被同步更新。

一些低代碼平臺(tái)已經(jīng)在進(jìn)行這方面的嘗試，這似乎可以填平設(shè)計(jì)和開(kāi)發(fā)之間的鴻溝，成為一種新的協(xié)作模式。

三、設(shè)計(jì)模式的建立與維護(hù)

大部分設(shè)計(jì)系統(tǒng)的組件庫(kù)只會(huì)覆蓋到原子層級(jí)，各個(gè)設(shè)計(jì)系統(tǒng)對(duì)于這些基礎(chǔ)組件的定義大同小異，而只有設(shè)計(jì)模式（或者說(shuō)業(yè)務(wù)組件）才蘊(yùn)含了團(tuán)隊(duì)對(duì)業(yè)務(wù)的思考。

以“地圖模式”為例——打車(chē)軟件和導(dǎo)航軟件都會(huì)使用到“地圖”這一模式，其中包含了“地圖、起點(diǎn)終點(diǎn)錄入、重新定位按鈕”等組件。但由于業(yè)務(wù)重點(diǎn)不同，打車(chē)軟件會(huì)直接顯示“起始地與目的地”等為打車(chē)流程服務(wù)的元素，而導(dǎo)航軟件則在首頁(yè)僅展示“目的地錄入”。

當(dāng)?shù)貓D業(yè)務(wù)發(fā)生變化，理想情況下不再需要設(shè)計(jì)與開(kāi)發(fā)資源的介入，只需要負(fù)責(zé)設(shè)計(jì)模式的設(shè)計(jì)師（或業(yè)務(wù)）進(jìn)行修改。

舉個(gè)例子，當(dāng)業(yè)務(wù)側(cè)需要對(duì)“首頁(yè)是否展示目的地錄入”進(jìn)行調(diào)整，如果在后臺(tái)有這樣的接口暴露，便可以非常敏捷地進(jìn)行測(cè)試。

然而，這種抽象在前期是非常困難且無(wú)法預(yù)期（甚至無(wú)法枚舉）的，需要綜合考量其兼容性、拓展性與成本，以及以何種顆粒度進(jìn)行封裝。當(dāng)這種困難可以被設(shè)計(jì)系統(tǒng)優(yōu)雅解決時(shí)，設(shè)計(jì)系統(tǒng)的落地想必更具實(shí)際意義。

四、設(shè)計(jì)系統(tǒng)在細(xì)分領(lǐng)域的定制化

設(shè)計(jì)系統(tǒng)因?yàn)橐嫒荼M可能多的業(yè)務(wù)領(lǐng)域，這決定了它們的組件、模式必須要有足夠強(qiáng)的適應(yīng)性，但也導(dǎo)致了它們的平庸。

在特定領(lǐng)域，可能需要對(duì)組件和模式進(jìn)行定制才能滿足需求，比如找房類產(chǎn)品的篩選器中可能會(huì)包含“公司輻射范圍內(nèi)幾公里”這樣的接口，對(duì)比一下 Fusion的“業(yè)務(wù)組件、區(qū)塊”和 NutUI的“特色組件”章節(jié)就可以很直觀地看到這種區(qū)別。

再進(jìn)一步地，當(dāng)智慧大屏、車(chē)機(jī)、虛擬現(xiàn)實(shí)這樣的場(chǎng)景需要設(shè)計(jì)系統(tǒng)的指導(dǎo)時(shí)，可能需要連帶著設(shè)計(jì)價(jià)值觀一起全部推翻重建，在各自的細(xì)分領(lǐng)域產(chǎn)出適應(yīng)各自需求的設(shè)計(jì)系統(tǒng)。

當(dāng)設(shè)計(jì)系統(tǒng)足夠健壯時(shí)，新的業(yè)務(wù)需求可以直接從模式庫(kù)中找到解決方案，進(jìn)而將設(shè)計(jì)師從“接需求-畫(huà)稿子-接需求”的困境中解脫出來(lái)，轉(zhuǎn)而真正地去思考業(yè)務(wù)。