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

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

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

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

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

產品側

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

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

設計側

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

開發(fā)側

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

測試側

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

二、原子設計理論

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

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

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

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

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

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

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

原子是物質的基礎組成部分，是構成設計系統(tǒng)的最基礎元素。

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

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

2. 色彩體系

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

色彩體系

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

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

色彩體系示意

3. 文字體系

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

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

文字體系

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

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

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

4. 陰影、圓角、線條

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

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

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

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

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

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

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

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

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

由原子+分子+組織構成的更復雜更專注頁面底層架構，并非具體頁面。

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

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

三、Design Token

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

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

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

1. Design Token 介紹

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

2. Design Token 優(yōu)勢

① 設計語義更易理解

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

從下到上的Design Token 命名思路

②主題皮膚一鍵替換

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

③設計變更高效維護

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

④設計效果精準還原

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

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

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

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

3. Design Token 應用流程

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

Design Token 應用實踐

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

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

命名規(guī)則示意

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

圖為騰訊開箱即用中后臺設計平臺

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

作者：史宏爽