什么是B端產品經理？和C端產品經理有什么區別？
2025-3-24 天宇 B端ui設計文章及欣賞
在B端產品設計中，中后臺UI設計規范的建立對于提升設計效率、保證用戶體驗一致性以及優化開發流程至關重要。本文從設計規范的意義、原子設計理論、后臺設計系統搭建以及Design Token應用實踐四個方面，詳細總結了B端中后臺設計的要點和方法，供大家參考學習。
今天從以下4個方面，結合7年B端設計工作經驗，為大家分享原子設計理論和中后臺設計系統搭建的應用實踐。
分別站在整個產品設計研發流程中各個角色的不同角度，在工作中可能會有以下“抱怨時刻”：
由此，體現出搭建設計規范的作用和意義：
① 產品側
?個產品不同分?多個團隊完成的時候，可以保證產品團隊使?同?份設計規范快速完成產品原型設計。保證可復?模塊的交互體驗的?致性。
② 設計側
通過設計規范去解決?部分需求，極?提?效率解放雙?，讓設計師能去做?些更發揮創意和想象?的設計。
③ 開發側
形成開發資產，可以提升研發效率，降低維護成本。開發?程師?需再重復開發同?個組件，只需要去組件庫?調?即可，配合業務邏輯，?效完成界?開發，做到開箱即?。
④ 測試側
標準化的設計規范，是測試?員最喜歡看到的。例如，設計規范規定彈窗 footer 區按鈕組居右，那么測試?員只要測到不居右，就可以給產品提優化建議了。
設計規范中具像化的環節是設計組件化，最早可以追溯到?業?命時期，福特創造的流?線?產?式。福特將汽?分解成零部件，再把零部件模塊化組裝，這?創舉極?的提?了?產效率。
根據資料顯示，T型?是世界第?款?量使?通?零部件，并進??規模流?線裝配的汽?。這種?式極?地提?了T型??產效率，降低了?產成本。
1914年，福特已經可以做到93分鐘?產?輛汽?，?同期其他所有汽??商的?產能?總和也不及于此。
到了1920年代，T型?的價格甚?降到300美元?輛（問世之初T型?的售價僅需850美元，?同期的競爭對?則通常為2000-3000美元?輛）。
原子設計理論最初來源于化學領域，這一點從名字可以聽出來。在化學中，所有的物體都是由原?構成，原?組合構成分?，分?組合構成有機物，最終形成了宇宙萬物。
2013年前端?程師 Brad Forst將此理論運?在界?設計中，形成?套設計系統，包含 5 個層?：原?、分?、組織、模板、??。當公司的業務產品逐漸擴?時，我們就需要制定?套完整的設計系統，提升設計和開發的協作效率，統?所有設計師的輸出物。
總之，將設計拆分成?些基本元素，例如?個按鈕、?個彈窗，再根據業務需求、產品邏輯重新組裝，形成最終的產品，這就是原?設計理論（組件化設計），區別于整體設計制造的?種新的?作流程。
原?是物質的基礎組成部分，是構成設計系統的最基礎元素。
在界?中以「元素」的形式存在，例如：顏?、?字、圖標、分割線、間距、圓?、陰影等。
色彩體系
中后臺產品的?彩體系主要分為3類：品牌?、功能?、中性?。
B端網站體現理性和效率特性，往往會使中性色占據九成以上，應用在背景、邊框、文本和分割線。下圖為顏色定義示例（考慮暗色模式）。
文字體系
B端產品的?字系統設計?標：增強閱讀體驗、提升信息獲取效率，字體是體系化界?設計中最基本的構成之?。
字體的??、字重、?彩區分體現界?信息的層級關系。
下圖為字階應用規范示意：
陰影、圓角、線條
陰影：在B端界?中，有些特殊的元素會使?到陰影，從陰影中我們可以看出物體距離平?的?度，距離平?越?的物體陰影越?；
圓角：從直?到圓?給?帶來從嚴謹冰冷到柔和親切的?理感受，在B端界? 中，常?2-8px圓?；
線條：分割模塊及輔助定位。
在界?中，分?是按照規律組合起來的元素，如：按鈕、搜索框、選擇器等。
以按鈕為例，?字、?塊、圖標和間距這些抽象的原?產?關聯組合成分?：圖標、?字傳達含義；顏?、圓?傳遞特性；間距、尺?定義規范。
分?+原?組合成更復雜和可拓展的組織（區塊組件），如搜索區、卡?列表區、表單區、數據統計區等。
由原?+分?+組織構成的更復雜更具拓展性的模塊，構成了典型??模板，如列表?、詳情?、異常?、Dashboard等。模板在設計系統中承載的作?就是保證設計?案在原型各階段的?致性，專注??底層架構，并?具體??。
帶業務邏輯的場景案例，如標注場景、權限管理、詳情設置等，將??模板填充真實的?字、圖?后形成??，即帶交互邏輯的?保真原型圖，真實內容使設計系統有了“?命” 。
雖然通過設計規范可以對產研流程提效，但在開發還原中還是會經常遇到?些棘?的問題。
開發還原準確度難以保證，走查幾輪還有有細節問題沒有修復；
領導要求開發暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；
設計一處變更，涉及多個頁面模塊，維護工作量大。
為了解決和優化上述的問題，Design Token 應運??。它可以解決產品設計和開發過程中的細節、變更和?格?致性的問題，有效提?產研團隊設計質量和協作效率。
“Token”原本的意思是“令牌，指令”，與 Design 連在?起指“設計變量”。在?程邏輯中?于?戶身份與服務器端進?驗證，?在設計體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數。它通過規定樣式參數，并通過?套符合設計師、?程師理解的統?的命名規則，為這些樣式參數的定義名稱。
Design Token優勢
設計語義更易理解：幫助設計師和開發建?統?語?，設計?案更加?致。從下到上的Design Token命名思路。
主題?膚?鍵替換：主題?膚的替換可以?在兩個維度，?是淺?模式和暗?模式的替換，?是不同品牌?之間的替換。我們可以將不同主題的同?個場景下的顏?使?同?個 Token 命名，達到?鍵換膚的效果適配不同客戶?案。
設計變更?效維護：替代傳統?作流?鍵替換效果。例如修改二級文本的顏色，傳統工作流需要先修改設計規范，修改設計稿，然后輸出給開發，開發逐一更新代碼，完成后提交給設計師進行走查驗收。而當使用Token之后，只需要更新Token參數，就可以直接導出JSON給開發，一鍵自動更新。提高效率不止一點點。
設計效果精準還原：代碼編輯器?動化提示顏?選擇，如不正確則產?報錯。
總結一下使用Token開發的優勢：
第一步：提煉token元素；
第二步：定義命名規則；
第三步：整理Design Token資產表；
第四步：開發與應用。
接下來具體說說如何為Design Token命名，命名方式目前并沒有絕對統一的要求，不過有一定的邏輯規則，可以由設計師找前端開發一起商量出一個都能通俗易懂便于理解的命名規則，
舉個例子：
1.Token名稱由大到小排序，中間用“-”分隔；
2.Token前綴可自定義添加公司簡稱，如“–el-xx” 、“–ant-xx”、“–td-xx”。
為了更好的統一規范，應用Token，建議成熟的互聯網公司設計團隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。
以上就是從四個方面歸納的B端設計規范定義和總結，希望對你有所幫助！
本文由人人都是產品經理作者【Clippp】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan