7年經(jīng)驗(yàn)總結(jié)！從4個(gè)方面聊聊UI設(shè)計(jì)規(guī)范

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

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

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

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

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

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

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

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

設(shè)計(jì)側(cè)

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

開發(fā)側(cè)

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

測試側(cè)

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

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

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

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

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

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

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

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

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

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

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

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

2. 色彩體系

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

色彩體系

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

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

色彩體系示意

3. 文字體系

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

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

文字體系

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

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

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

4. 陰影、圓角、線條

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

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

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

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

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

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

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

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

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

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

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

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

三、Design Token

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

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

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

1. Design Token 介紹

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

2. Design Token 優(yōu)勢

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

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

從下到上的Design Token 命名思路

②主題皮膚一鍵替換

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

③設(shè)計(jì)變更高效維護(hù)

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

④設(shè)計(jì)效果精準(zhǔn)還原

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

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

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

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

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

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

Design Token 應(yīng)用實(shí)踐

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

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

命名規(guī)則示意

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

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

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