在B端產(chǎn)品設計中，中后臺UI設計規(guī)范的建立對于提升設計效率、保證用戶體驗一致性以及優(yōu)化開發(fā)流程至關重要。本文從設計規(guī)范的意義、原子設計理論、后臺設計系統(tǒng)搭建以及Design Token應用實踐四個方面，詳細總結了B端中后臺設計的要點和方法，供大家參考學習。

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

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

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

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

①?產(chǎn)品側

?個產(chǎn)品不同分?多個團隊完成的時候，可以保證產(chǎn)品團隊使?同?份設計規(guī)范快速完成產(chǎn)品原型設計。保證可復?模塊的交互體驗的?致性。

② 設計側

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

③ 開發(fā)側

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

做到这三点挑战，产品经理只会不断升值

好的产品经理是很稀缺的，懂用户、懂商业、懂数据的产品经理走出互联网，依然是抢手货。相反，如果只做简单传话、低效执行、浅层思考的产品经理，恐怕走不过未来3-5年的洪流。

查看详情 >

④ 測試側

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

02 原子設計理論

設計規(guī)范中具像化的環(huán)節(jié)是設計組件化，最早可以追溯到?業(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美元?輛）。

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

2013年前端?程師 Brad Forst將此理論運?在界?設計中，形成?套設計系統(tǒng)，包含 5 個層?：原?、分?、組織、模板、??。當公司的業(yè)務產(chǎn)品逐漸擴?時，我們就需要制定?套完整的設計系統(tǒng)，提升設計和開發(fā)的協(xié)作效率，統(tǒng)?所有設計師的輸出物。

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

03 后臺設計系統(tǒng)搭建

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

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

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

色彩體系

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

• 品牌色：大型公司往往都會有專屬色號的品牌色，比如阿里橙色、美團黃色和騰訊藍色，以體現(xiàn)產(chǎn)品特性、傳播理念。在界面中主要體現(xiàn)在關鍵行動點、選中狀態(tài)、重要信息和插畫元素等。
• 功能色：旨在表示某種狀態(tài)提示，這類顏色往往是深入人心的，比如綠色代表成功，紅色代表失敗等等。
• 中性色：還有一種是不需要傳遞顏色代表的特殊含義的，稱為中性色，即黑白灰。

B端網(wǎng)站體現(xiàn)理性和效率特性，往往會使中性色占據(jù)九成以上，應用在背景、邊框、文本和分割線。下圖為顏色定義示例（考慮暗色模式）。

文字體系

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

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

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

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

陰影、圓角、線條

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

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

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

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

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

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

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

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

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

由原?+分?+組織構成的更復雜更具拓展性的模塊，構成了典型??模板，如列表?、詳情?、異常?、Dashboard等。模板在設計系統(tǒng)中承載的作?就是保證設計?案在原型各階段的?致性，專注??底層架構，并?具體??。

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

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

04 Design Token應用實踐

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

開發(fā)還原準確度難以保證，走查幾輪還有有細節(jié)問題沒有修復；

領導要求開發(fā)暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；

設計一處變更，涉及多個頁面模塊，維護工作量大。

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

① Design Token介紹

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

Design Token優(yōu)勢

設計語義更易理解：幫助設計師和開發(fā)建?統(tǒng)?語?，設計?案更加?致。從下到上的Design Token命名思路。

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

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

設計效果精準還原：代碼編輯器?動化提示顏?選擇，如不正確則產(chǎn)?報錯。

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

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

② Design Token應用流程

第一步：提煉token元素；

第二步：定義命名規(guī)則；

第三步：整理Design Token資產(chǎn)表；

第四步：開發(fā)與應用。

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

舉個例子：

1.Token名稱由大到小排序，中間用“-”分隔；

2.Token前綴可自定義添加公司簡稱，如“–el-xx” 、“–ant-xx”、“–td-xx”。

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

最后

以上就是從四個方面歸納的B端設計規(guī)范定義和總結，希望對你有所幫助！