今天從以下 4 個方面，結(jié)合 7 年 B 端設(shè)計工作經(jīng)驗，為大家分享原子設(shè)計理論和中后臺設(shè)計系統(tǒng)搭建的應(yīng)用實踐。

一、搭建設(shè)計規(guī)范的意義

分別站在整個產(chǎn)品設(shè)計研發(fā)流程中各個角色的不同角度，在工作中可能會有以下“抱怨時刻”：

由此，體現(xiàn)出搭建設(shè)計規(guī)范的作用和意義：

搭建設(shè)計規(guī)范的意義

產(chǎn)品側(cè)

?個產(chǎn)品不同分支多個團隊完成的時候，可以保證產(chǎn)品團隊使用同一份設(shè)計規(guī)范快速完成產(chǎn)品原型設(shè)計。

保證可復(fù)用模塊的交互體驗的?致性。

設(shè)計側(cè)

通過設(shè)計規(guī)范去解決大部分需求，極大提高效率解放雙手，讓設(shè)計師能去做一些更發(fā)揮創(chuàng)意和想象力的設(shè)計。

開發(fā)側(cè)

形成開發(fā)資產(chǎn)，可以提升研發(fā)效率，降低維護成本。開發(fā)工程師無需再重復(fù)開發(fā)同?個組件，只需要去組件庫里調(diào)用即可，配合業(yè)務(wù)邏輯，高效完成界面開發(fā)，做到開箱即用。

測試側(cè)

標準化的設(shè)計規(guī)范，是測試人員最喜歡看到的。例如，設(shè)計規(guī)范規(guī)定彈窗 footer 區(qū)按鈕組居右，那么測試人員只要測到不居右，就可以給產(chǎn)品提優(yōu)化建議了。

二、原子設(shè)計理論

設(shè)計規(guī)范中具像化的環(huán)節(jié)是設(shè)計組件化，最早可以追溯到工業(yè)革命時期，福特創(chuàng)造的流水線生產(chǎn)方式。福特將汽車分解成零部件，再把零部件模塊化組裝，這?創(chuàng)舉極大的提高了生產(chǎn)效率。

根據(jù)資料顯示，T型車是世界第一款大量使用通用零部件，并進行大規(guī)模流水線裝配的汽車。這種方式極大地提高了T型車生產(chǎn)效率，降低了生產(chǎn)成本。1914年，福特已經(jīng)可以做到93分鐘生產(chǎn)一輛汽車，而同期其他所有汽車廠商的生產(chǎn)能力總和也不及于此。到了1920年代，T型車的價格甚至降到300美元一輛（問世之初T型車的售價僅需850美元，而同期的競爭對手則通常為2000-3000美元一輛）。

原子設(shè)計理論最初來源于化學(xué)領(lǐng)域，這一點從名字可以聽出來。在化學(xué)中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機物，最終形成了宇宙萬物。

2013年前端工程師BradForst將此理論運用在界面設(shè)計中，形成一套設(shè)計系統(tǒng)，包含5個層面：原子、分子、組織、模板、頁面。

當公司的業(yè)務(wù)產(chǎn)品逐漸擴大時，我們就需要制定一套完整的設(shè)計系統(tǒng)，提升設(shè)計和開發(fā)的協(xié)作效率，統(tǒng)一所有設(shè)計師的輸出物。

總之，將設(shè)計拆分成一些基本元素，例如一個按鈕、一個彈窗，再根據(jù)業(yè)務(wù)需求、產(chǎn)品邏輯重新組裝，形成最終的產(chǎn)品，這就是原子設(shè)計理論（組件化設(shè)計），區(qū)別于整體設(shè)計制造的一種新的工作流程。

1. 設(shè)計系統(tǒng)搭建—原子

原子是物質(zhì)的基礎(chǔ)組成部分，是構(gòu)成設(shè)計系統(tǒng)的最基礎(chǔ)元素。

在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、陰影等。

后臺設(shè)計規(guī)范-原子級規(guī)范

2. 色彩體系

中后臺產(chǎn)品的色彩體系主要分為3類：品牌色、功能色、中性色。

色彩體系

1. 品牌色：大型公司往往都會有專屬色號的品牌色，比如阿里橙色、美團黃色和騰訊藍色，以體現(xiàn)產(chǎn)品特性、傳播理念。在界面中主要體現(xiàn)在關(guān)鍵行動點、選中狀態(tài)、重要信息和插畫元素等。
2. 功能色：旨在表示某種狀態(tài)提示，這類顏色往往是深入人心的，比如綠色代表成功，紅色代表失敗等等。
3. 中性色：還有一種是不需要傳遞顏色代表的特殊含義的，稱為中性色，即黑白灰。B 端網(wǎng)站體現(xiàn)理性和效率特性，往往會使中性色占據(jù)九成以上，應(yīng)用在背景、邊框、文本和分割線。

下圖為顏色定義示例（考慮暗色模式）。

色彩體系示意

3. 文字體系

B端產(chǎn)品的文字系統(tǒng)設(shè)計目標：增強閱讀體驗、提升信息獲取效率，字體是體系化界面設(shè)計中最基本的構(gòu)成之一。

字體的大小、字重、色彩區(qū)分體現(xiàn)界面信息的層級關(guān)系。

文字體系

1. 整體思路：在同一個系統(tǒng)的UI設(shè)計中先建立體系化的設(shè)計思路，對主、次、輔助、標題、展示等類別的字體做統(tǒng)一的規(guī)劃，再落地到具體場景中進行微調(diào)，最終確定建立體系化的設(shè)計思路，有助于強化字體落地的一致性。
2. 少即是多：在視覺展現(xiàn)上能夠用盡量少的樣式去實現(xiàn)設(shè)計目的。避免毫無意義的使用大量字階、顏色、字重強調(diào)視覺重點或?qū)Ρ汝P(guān)系，提高字體應(yīng)用的性價比，減少不必要的樣式浪費。
3. 拉開對比：在需要拉開差距的時候可以嘗試在字階表中跳躍地選擇字體大小，會令字階之間產(chǎn)生一種微妙的韻律感。

下圖為字階應(yīng)用規(guī)范示意：

字階應(yīng)用規(guī)范示意

4. 陰影、圓角、線條

陰影：在B端界面中，有些特殊的元素會使用到陰影，從陰影中我們可以看出物體距離平面的高度，距離平面越高的物體陰影越大；

圓角：從直角到圓角給人帶來從嚴謹冰冷到柔和親切的心理感受，在B端界面中，常用2-8px圓角；

線條：分割模塊及輔助定位。

5. 后臺設(shè)計系統(tǒng)搭建—分子

在界面中，分子是按照規(guī)律組合起來的元素，如：按鈕、搜索框、選擇器等。

以按鈕為例，文字、色塊、圖標和間距這些抽象的原子產(chǎn)生關(guān)聯(lián)組合成分子：圖標、文字傳達含義；顏色、圓角傳遞特性；間距、尺寸定義規(guī)范。

6. 后臺設(shè)計系統(tǒng)搭建—組織

分子+原子組合成更復(fù)雜和可拓展的組織（區(qū)塊組件），如搜索區(qū)、卡片列表區(qū)、表單區(qū)、數(shù)據(jù)統(tǒng)計區(qū)等。

7. 后臺設(shè)計系統(tǒng)搭建—模板

由原子+分子+組織構(gòu)成的更復(fù)雜更專注頁面底層架構(gòu)，并非具體頁面。

8. 后臺設(shè)計系統(tǒng)搭建—頁面

帶業(yè)務(wù)邏輯的場景案例，如標注場景、權(quán)限管理、詳情設(shè)置等，將頁面模板填充真實的文字、圖片后形成頁面，即帶交互邏輯的高保真原型圖，真實內(nèi)容使設(shè)計系統(tǒng)有了“生命”。

三、Design Token

雖然通過設(shè)計規(guī)范可以對產(chǎn)研流程提效，但在開發(fā)還原中還是會經(jīng)常遇到一些棘手的問題。

1. 開發(fā)還原準確度難以保證，走查幾輪還有有細節(jié)問題沒有修復(fù)；
2. 領(lǐng)導(dǎo)要求開發(fā)暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；
3. 設(shè)計一處變更，涉及多個頁面模塊，維護工作量大。

為了解決和優(yōu)化上述的問題，DesignToken應(yīng)運而生。它可以解決產(chǎn)品設(shè)計和開發(fā)過程中的細節(jié)、變更和風(fēng)格一致性的問題，有效提高產(chǎn)研團隊設(shè)計質(zhì)量和協(xié)作效率。

1. Design Token 介紹

“Token”原本的意思是“令牌，指令”，與Design連在一起指“設(shè)計變量”。在工程邏輯中用于用戶身份與服務(wù)器端進行驗證，而在設(shè)計體系中，DesignToken則可以簡單理解為封裝的視覺樣式參數(shù)。它通過規(guī)定樣式參數(shù)，并通過一套符合設(shè)計師、工程師理解的統(tǒng)一的命名規(guī)則，為這些樣式參數(shù)的定義名稱。

2. Design Token 優(yōu)勢

① 設(shè)計語義更易理解

幫助設(shè)計師和開發(fā)建立統(tǒng)一語言，設(shè)計方案更加一致。

從下到上的Design Token 命名思路

②主題皮膚一鍵替換

主題皮膚的替換可以用在兩個維度，一是淺色模式和暗色模式的替換，二是不同品牌色之間的替換。我們可以將不同主題的同一個場景下的顏色使用同一個Token命名，達到一鍵換膚的效果適配不同客戶方案。

③設(shè)計變更高效維護

替代傳統(tǒng)工作流一鍵替換效果。例如修改二級文本的顏色，傳統(tǒng)工作流需要先修改設(shè)計規(guī)范，修改設(shè)計稿，然后輸出給開發(fā)，開發(fā)逐一更新代碼，完成后提交給設(shè)計師進行走查驗收。而當使用Token之后，只需要更新Token參數(shù)，就可以直接導(dǎo)出JSON給開發(fā)，一鍵自動更新。提高效率不止一點點。

④設(shè)計效果精準還原

代碼編輯器自動化提示顏色選擇，如不正確則產(chǎn)生報錯。

使用Token開發(fā)和傳統(tǒng)開發(fā)的對比

總結(jié)一下使用 Token 開發(fā)的優(yōu)勢：

1. 設(shè)計語言 更易理解
2. 主題皮膚 一鍵替換
3. 設(shè)計變更 高效維護
4. 設(shè)計成果 精準還原

3. Design Token 應(yīng)用流程

第一步：提煉 token 元素；第二步：定義命名規(guī)則；第三步：整理 Design Token 資產(chǎn)表；第四步：開發(fā)與應(yīng)用。

Design Token 應(yīng)用實踐

接下來具體說說如何為 Design Token 命名，命名方式目前并沒有絕對統(tǒng)一的要求，不過有一定的邏輯規(guī)則，可以由設(shè)計師找前端開發(fā)一起商量出一個都能通俗易懂便于理解的命名規(guī)則，舉個例子：

1. Token 名稱由大到小排序，中間用“-”分隔；
2. Token 前綴可自定義添加公司簡稱，如“--el-xx” 、“--ant-xx”、“--td-xx”。

命名規(guī)則示意

為了更好的統(tǒng)一規(guī)范，應(yīng)用 Token，建議成熟的互聯(lián)網(wǎng)公司設(shè)計團隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。

圖為騰訊開箱即用中后臺設(shè)計平臺

如果有任何問題，歡迎一起交流討論。

作者：史宏爽