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

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

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

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

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

1. 樣式指南

通常包含顏色、排版、商標、字體等，重點放在品牌層面。

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

早期的樣式指南規(guī)范可以追溯到 NASA 圖形標準手冊，其中已經(jīng)提供了非?，F(xiàn)代化的視覺示例、顏色配對指南等。

2. 組件庫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首當其沖，設(shè)計工具無法很好地向工程師傳達設(shè)計邏輯。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

設(shè)計系統(tǒng)因為要兼容盡可能多的業(yè)務(wù)領(lǐng)域，這決定了它們的組件、模式必須要有足夠強的適應(yīng)性，但也導(dǎo)致了它們的平庸。

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

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

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