提起設(shè)計系統(tǒng)，別再只會說組件了！

在旁聽一些分享、復(fù)盤、匯報時發(fā)現(xiàn)很多設(shè)計師總把設(shè)計系統(tǒng)掛在嘴邊，但談來談去都還是“組件”那套，什么設(shè)計模式、原子設(shè)計、design token 講來講去最后都是在講“組件”。設(shè)計系統(tǒng)或者設(shè)計語言就像人類的自然語言，是一個由字、詞、句、語法組成的溝通系統(tǒng)，只有組件就好像只有字詞，無法達(dá)到理想的溝通效果。這也是為什么我們總說設(shè)計系統(tǒng)（或組件）是為了提高生產(chǎn)效率、降低溝通成本，而實際上使用時卻常常成為設(shè)計絆腳石的原因之一。這次，我們想認(rèn)真地、系統(tǒng)地、深入地來聊聊設(shè)計系統(tǒng)。

以下內(nèi)容參考《設(shè)計系統(tǒng)》、部分網(wǎng)絡(luò)文章（文末附）及個人工作經(jīng)驗，如有異議，歡迎探討

更多設(shè)計系統(tǒng)探討：

設(shè)計系統(tǒng)（Design System）是為了實現(xiàn)數(shù)字產(chǎn)品而組織起來的一套相互關(guān)聯(lián)的模式和共享實踐。設(shè)計系統(tǒng)由設(shè)計原則（Design Principal）、模式（Pattern）、組件（Component）和指令（Token）組成，它們可以被簡單地歸類為下圖：

下面分別講講這幾個概念：

一、設(shè)計原則（Principle）

設(shè)計原則指的并不是對比、對齊、強調(diào)、重復(fù)...而是團隊對于好設(shè)計的理解，這里的團隊包括了產(chǎn)品、開發(fā)等與產(chǎn)品的創(chuàng)建直接相關(guān)的人，目的就是讓團隊內(nèi)部對于什么是好的設(shè)計有一致的標(biāo)準(zhǔn)，并提供一些可執(zhí)行的指南。換句話說，我們也可以稱設(shè)計原則為設(shè)計理念，因此：

1. 設(shè)計原則的受眾是同事

設(shè)計原則是為同事而寫，尤其是設(shè)計師、產(chǎn)品經(jīng)理、開發(fā)人員、內(nèi)容運營等與產(chǎn)品的創(chuàng)建直接相關(guān)的人員，而非用戶視角。當(dāng)團隊內(nèi)對于好設(shè)計的理念達(dá)成共識，就可以力往一處使，減少許多爭論。所以當(dāng)你不知道如何建立自身產(chǎn)品的設(shè)計原則時，不妨做做“用戶調(diào)研”，收集一下設(shè)計原則的“用戶”——即團隊成員對于自身產(chǎn)品的理解和愿景，然后試著總結(jié)一下什么樣的原則能夠遵循產(chǎn)品的定位，傳遞產(chǎn)品的精神，實現(xiàn)產(chǎn)品的愿景。

2. 提供可操作的建議

我們很常見到這樣的原則：“簡單的”“易用的”“令人愉悅的”，這樣的原則就如“上次見面還是上次”一樣是正確的廢話，我們總不會認(rèn)為復(fù)雜的、無用的、令人煩躁的是好的設(shè)計吧？將正確的廢話變得正確需要提供可操作的、能實際幫助解決設(shè)計問題的指導(dǎo)。例如，如果我們只說設(shè)計要“簡單”，那什么是簡單呢？蘋果公司的設(shè)計原則中就有簡潔性（Simplicity）這一條，并且在原則中提供了實用建議：“專注產(chǎn)品的核心需求，消除不必要的細(xì)節(jié)，只保留最基本的元素”。因此當(dāng)產(chǎn)品或設(shè)計師做設(shè)計的時候，就可以思考每一個元素是否是必要的，一定要加上這個邊框嗎？不加可以不可以呢？再比如，我們說設(shè)計原則是“一致的”，那怎么做才能做到一致的呢？Airbnb 的設(shè)計原則給出了實用了建議：“每一個小設(shè)計都應(yīng)該是更大的整體的一部分，應(yīng)該在系統(tǒng)規(guī)模上產(chǎn)生積極的影響，不應(yīng)該是特殊的或異常的”。因此當(dāng)產(chǎn)品或設(shè)計師做設(shè)計的時候，就可以思考這個設(shè)計在今后的產(chǎn)品發(fā)展中是否可被復(fù)用，現(xiàn)有的設(shè)計系統(tǒng)中是否已有設(shè)計樣式可以解決這個需求？

3. 設(shè)計原則是有觀點的，且要平衡沖突的價值觀

好的設(shè)計原則應(yīng)該是有觀點的。例如在如何處理“一致性”問題上，我們上文提到 Airbnb 的觀點是不應(yīng)該有異常和特殊值，而 Medium 在設(shè)計原則中對一致性問題提出了不一樣的觀點：“適當(dāng)?shù)亩皇且恢碌模ˋppropriate over Consistent）：如果它更適合操作系統(tǒng)、設(shè)備或上下文場景，我們愿意打破一致性”。這兩個原則代表的觀點很難說孰是孰非，但都能表示清楚各自在對待某個設(shè)計問題時候的處理方式，這種方式可以幫助我們在日常設(shè)計中提供解決思路：當(dāng)某個需求需要你做一個新的設(shè)計時，如果你在 airbnb 工作，那你就得謹(jǐn)慎思考這個新的設(shè)計是否可被現(xiàn)有設(shè)計系統(tǒng)里某個組件替代，或者這個新設(shè)計可以成為一個新的組件被復(fù)用，而如果你在 Medium 工作，那你只需要確認(rèn)這個新的設(shè)計在當(dāng)前的需求場景中是合適的就可以。換句話說，設(shè)計原則不應(yīng)該是和稀泥的，今天追求一致性，明天追求差異化，好的設(shè)計原則應(yīng)該能在實際工作中幫助我們確定優(yōu)先級和平衡點。例如 Lightning 的設(shè)計原則是“清晰、高效、一致、美觀”且強調(diào)這些原則按優(yōu)先級排序。因此當(dāng)“美觀”與“高效”沖突時，Lightning 的設(shè)計師應(yīng)該選擇“高效”，在任何時候“清晰”應(yīng)該始終放在第一位。按照這種方式建立原則可以讓團隊在做設(shè)計決策時明確哪些東西應(yīng)該優(yōu)先考慮。

4. 將原則與真實案例結(jié)合起來

一千個讀者眼中有一千個哈姆雷特，即使是文學(xué)大師寫的原則仍然有許多種解讀方式。避免誤解的做法是將原則與實際案例結(jié)合起來，例如：

你可以從你的產(chǎn)品中尋找可以體現(xiàn)設(shè)計原則的地方，再將這些真實的例子和原則放在一起，幫助團隊更好地理解設(shè)計原則。

二、設(shè)計模式（Pattern）VS 設(shè)計組件（Component）

之所以模式和組件一起講，是因為這兩個概念經(jīng)常被混淆，事實上很多一線的互聯(lián)網(wǎng)公司也沒有明確區(qū)分這兩個概念，而蘋果和 Material design 設(shè)計官網(wǎng)上有對 Pattern 和 Compinent 做出區(qū)分。

我們先來說說模式和組件分別是什么：

①模式（Pattern）是一種用于解決特定設(shè)計問題的可復(fù)現(xiàn)、可復(fù)用的方案；

②組件（Components）是一系列基礎(chǔ)原件；

單純看概念可能有些難理解，我們舉個例子進一步說明，比如 loading 是一種模式，在蘋果官網(wǎng)中，對 loading 模式的定義是：“在加載內(nèi)容時使用，避免顯示空白或靜態(tài)頁面，這可能會讓人們認(rèn)為您的應(yīng)用或游戲運行緩慢或死機”，在這個定義中設(shè)計問題被明確為加載時的空白或靜態(tài)頁面，那么可復(fù)用的解決方案是什么，蘋果是這么建議的：

③盡快顯示內(nèi)容：預(yù)加載內(nèi)容，或在內(nèi)容尚不可用的地方顯示占位符，并在加載時替換這些元素；

④清楚地傳達(dá)內(nèi)容正在加載以及可能需要多長時間才能完成：對于加載時間超過 1、2 分鐘的情況，使用進度指示器來顯示內(nèi)容正在加載

⑤....

在組件（component）部分，蘋果對進度指示器的設(shè)計又做出了說明，包含了 loading 條、全頁面加載、下拉刷新加載和條形指示器與旋轉(zhuǎn)指示器。也就是說，模式為問題提供解決方案，方案中會使用到組件。如果以建房子為例，模式就是設(shè)計圖紙，組件就是磚。

當(dāng)然，無論是加載模式還是 toast 組件，都是互聯(lián)網(wǎng)的古早設(shè)計了。不同的產(chǎn)品在發(fā)展過程中會產(chǎn)生不同的模式和組件。我們在很早的一篇文章中提過直播的發(fā)展史，這么多年來，直播間也早已可以被提煉為一種模式，我們可以發(fā)現(xiàn)雖然市面上的直播間設(shè)計各不相同，但模式確實趨同的：

在這個直播間模式的設(shè)計圖紙下，當(dāng)業(yè)務(wù)想要拓展直播類目，例如電商直播，我們需要為電商直播增加購物車時，就清楚需要加在互動操作區(qū)；當(dāng)直播間需要增加互動能力，例如投票時，就清楚功能會出現(xiàn)在直播間活動區(qū)，當(dāng)我們要對在線觀眾新增榜單時，就自然而然地把功能設(shè)置在觀眾席區(qū)。

這也就回到了為什么說模式要和產(chǎn)品聊，因為模式包含了對特定業(yè)務(wù)的理解，一旦設(shè)計和產(chǎn)品達(dá)成共識，可以免去在方案討論中的許多無意義的爭論。比如，如果產(chǎn)品和設(shè)計都認(rèn)可直播間活動區(qū)應(yīng)該置于直播間左上角，那么新加入團隊的產(chǎn)品就知道不能在直播間的右上角或右下角把投票能力做大做強。一方面避免了功能在頁面中毫無邏輯的堆砌，另一方面也能讓用戶形成穩(wěn)定的認(rèn)知，當(dāng)產(chǎn)品上線新功能或用戶需要尋找什么功能時，可以順著使用產(chǎn)品過程中形成的思路找到。

順著這個案例講，我們也可以把直播間的評論消息氣泡做成組件，消息氣泡一般由直播等級、用戶昵稱、和評論信息組成：

但是只定義到這里是不夠的。作為設(shè)計方案里的磚， 需要具備靈活性和穩(wěn)定性，才能便于我們復(fù)用組件節(jié)約成本。其中的靈活性體現(xiàn)在對組件的變體的設(shè)計（例如：支持兩行評論情況、有無直播等級情況、直播等級圖標(biāo)可替換）、組件的各種交互狀態(tài)（例如：是否存在點按狀態(tài)、可點擊或不可點擊態(tài)）、對機型、字符長度、明暗模式的適配方式（例如，昵稱最多展示到 7 個字、小機型一行最多 12 個字）...穩(wěn)定性體現(xiàn)在組件中不支持被修改的部分，例如：間距、字色、動畫等，可以減少一些由“設(shè)計師 A 覺得間距 2 好看，設(shè)計師 B 覺得間距 4 好看”引起的爭論，也讓開發(fā)有據(jù)可依。我們需要定義清楚組件里的每一個細(xì)節(jié)，才能保證設(shè)計一致性，提高開發(fā)效率， 減少重復(fù)工作量。

設(shè)計好直播間評論氣泡組件，當(dāng)其他場景有需要的時候，就可以使用組件搭建方案，我們已經(jīng)非常熟悉了，就不贅述了。

在大團隊中一般由平臺設(shè)計組負(fù)責(zé)整理諸如 loading 模式、toast 組件這種基礎(chǔ)的設(shè)計語言，由跟進具體業(yè)務(wù)的設(shè)計組例如直播設(shè)計組負(fù)責(zé)整理諸如直播間模式、評論氣泡組件這類垂直領(lǐng)域下的設(shè)計語言。

我們試著做個簡單的總結(jié)，設(shè)計模式是針對常見設(shè)計問題的解決方案，是一種思想和方法，設(shè)計組件是解決單點問題的基礎(chǔ)元素，是具體的應(yīng)用工具。

三、設(shè)計指令（Token）

Design Token，可以被翻譯為“設(shè)計符號”、“設(shè)計令牌”或“設(shè)計記號”，我習(xí)慣翻譯為設(shè)計指令，它是指在設(shè)計系統(tǒng)中的某些具體設(shè)計數(shù)值，例如顏色（品牌色、警告色、輔助色）、字體（正文字體、標(biāo)題字體）、間距等。它可以將各種設(shè)計元素標(biāo)準(zhǔn)化、系統(tǒng)化，且給每個取值一個功用，讓元素更加具有目的性或者意向性，比如當(dāng)我們想“彰顯重要性”時，我們使用品牌色。同時也便于這些元素在不同的設(shè)計項目中被共用和重復(fù)使用。具體怎么用？舉個例子，假如產(chǎn)品的品牌色是#3D7FFF，那么我們就會有一條設(shè)計指令是 Brand Coler=#3D7FFF。當(dāng)我們輸出標(biāo)注或者開發(fā)實現(xiàn)時，不需要擔(dān)心設(shè)計師 A 記錯品牌色為#3D7FFC，也不需要擔(dān)心開發(fā) B 手抖把品牌色打成#3D8FFF，只要統(tǒng)一語言、引用語言，就可以達(dá)到一致。

設(shè)計指令（Token）在實現(xiàn)上的另一個好處是，當(dāng)我們要進行品牌設(shè)計升級的時候，能減少很多工作量。品牌設(shè)計是由許多小的、重復(fù)的設(shè)計點堆砌成的，例如大圓角設(shè)計可以給人年輕、包容的感受，小圓角設(shè)計給人正式、官方的感受。

因此，當(dāng)我們需要進行品牌升級的時候，往往需要對全平臺重復(fù)使用到的基礎(chǔ)設(shè)計元素如圓角、顏色、間距進行全面修改，此時如果我們使用設(shè)計指令（Token），只需要修改指令對應(yīng)的數(shù)值即可實現(xiàn)，而如果使用普通標(biāo)注方式，就需要遍歷所有頁面逐一修改。我們僅拿 token、彈窗、及卡片信息流場景舉例，來感受下工作量差異。不同標(biāo)注方式如下圖所示：

當(dāng)需要進行改版工作時，不使用 token 的情況需要在所有場景中逐一修改圓角和色值，但使用 token 的情況只需要修改指令對應(yīng)的數(shù)值，如下圖所示：

感受到工作量差異了嗎？日常開發(fā)可不止圓角與遮罩兩種變量，設(shè)計、開發(fā)、走查工作量將指數(shù)級翻倍。參考一下 Lightning 定義的一套 token，包含了以下幾類屬性：

不同的產(chǎn)品可以結(jié)合自身業(yè)務(wù)特點和 CSS 中的屬性值定義自己的 token 范圍和具體取值。總之，token 的使用有利于品牌塑造，幫助設(shè)計與開發(fā)更好地溝通，解決多端統(tǒng)一和設(shè)計還原問題。

小結(jié)

設(shè)計原則（Principle）、設(shè)計模式（Pattern）、設(shè)計組件（Component）、設(shè)計指令（Token），從概念到落地，無論是原子設(shè)計、設(shè)計規(guī)范還是其他概念理論，設(shè)計系統(tǒng)基本就是由這四個層級組成的（雖然可能不同的產(chǎn)品或理念對這四個層級的叫法不一，但劃分范圍大差不差都能被這四個層級包含進去）。設(shè)計系統(tǒng)看似給設(shè)計制定了限制與邊界，實際上因為設(shè)計是主觀的，對好的設(shè)計的理解也是主觀的，所以有邊界的設(shè)計比無邊界的設(shè)計更好做。以上只是設(shè)計系統(tǒng)靜態(tài)的部分，動態(tài)部分還包含了如何維護、迭代、在團隊中運轉(zhuǎn)起來，篇幅有限，下次再聊。

歡迎關(guān)注作者微信公眾號：「白話說交互」