一、搭建設計規范的意義

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

由此，體現出搭建設計規范的作用和意義：

搭建設計規范的意義

產品側：?個產品不同分支多個團隊完成的時候，可以保證產品團隊使用同一份設計規范快速完成產品原型設計。保證可復用模塊的交互體驗的?致性。

設計側：通過設計規范去解決大部分需求，極大提高效率解放雙手，讓設計師能去做一些更發揮創意和想象力的設計。

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

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

二、原子設計理論

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

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

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

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

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

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

1. 設計系統搭建—原子

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

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

2. 色彩體系

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

色彩體系

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

3. 文字體系

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

字體的大小、字重、色彩區分體現界面信息的層級關系。

文字體系

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

4. 陰影、圓角、線條

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

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

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

5. 后臺設計系統搭建—分子

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

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

6. 后臺設計系統搭建—組織

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

7. 后臺設計系統搭建—模板

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

8. 后臺設計系統搭建—頁面

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

三、Design Token

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

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

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

1. Design Token 介紹

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

2. Design Token 優勢

① 設計語義更易理解

幫助設計師和開發建立統一語言，設計方案更加一致。

從下到上的Design Token 命名思路

②主題皮膚一鍵替換

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

③設計變更高效維護

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

④設計效果精準還原

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

使用Token開發和傳統開發的對比

總結一下使用 Token 開發的優勢：

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

3. Design Token 應用流程

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

Design Token 應用實踐

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

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

命名規則示意

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

轉載自優設網

蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。