1. 初識B端產品和C端產品
C端 Consumer，表示為消費者、個人用戶或終端用戶設計，直接面向普通用戶提供服務來幫助他們實現(xiàn)個人需求。B端 Business，它面對商業(yè)和企業(yè)，是為幫助企業(yè)集團等實現(xiàn)商業(yè)目的而設計的軟件、工具或者平臺。
在我們日常生活中，在手機上使用的大多是 C 端產品，單一的 C 端產品通常是為了實現(xiàn)單一的需求。比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產品的核心功能。
而面向 B 端的產品，我個人稱之為「暗渡陳倉」，當個人用戶為實現(xiàn)個人需求產生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即 C 端產品的后臺產品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業(yè)、業(yè)務部門提供的企業(yè)級服務產品，以及面對企業(yè)或者個人提供的平臺級工具產品等。
雖說我們日常使用的更多是 C 端產品，但是 B 端產品對我們的影響也是時時刻刻存在著。C 端產品在明，逐漸改變著現(xiàn)代人的生活方式，B 端產品在暗，間接服務于用戶，讓一切流程化秩序化，并且具有多個主要功能點。
2. B端和C端產品的區(qū)別
在我看來，C 端產品以消費互聯(lián)網為主，B 端產品以產業(yè)互聯(lián)網為主，C 端更感性，而B 端更理性。
從使用者的角度來說：
-
C 端產品關鍵詞包括免費使用、迅速上手、體驗為王、你能讓我做什么；
-
B 端產品的關鍵詞則是付費購買、上手緩慢、效率第一、你能為我做什么。
從開發(fā)的角度來說：
-
C端周期短，B端周期長；
-
C端用戶多，B端用戶少；
-
C端邏輯簡單，B端邏輯復雜；
-
C端競品較多，B端競品較少；
-
C端主戰(zhàn)場是移動端，B端則是 PC 端；
-
C端是用戶體驗驅動，B端是解決問題驅動；
-
C端產品的使用決策權在用戶手中，而B端產品的使用決策權則在客戶手中（B端客戶不一定是用戶）；
-
C端產品除了產品的體驗以外，也要讓產品更美觀，讓活動更有趣，讓用戶更舒服，產品經理有很強的同理心。B端產品的實用性大于美觀性，能切實解決問題、配置資源的 B 端產品才是一個好的 B 端產品，產品經理要具有更強的邏輯思維能力。
3. 后臺產品常見分類
后臺產品按其作用可大致分為兩類，一是支撐前臺產品，二是管理各種資源。我認為后臺產品應當是囊括在 B 端產品的范圍之內的，常見的類型包括：
-
C 端產品的后臺產品線，如淘寶商家版，餓了么商家版，對訂單和用戶進行管理，支持 C 端產品的業(yè)務進展。
-
平臺級工具產品，如微信公眾平臺，對文章和讀者的數(shù)據統(tǒng)計和管理；各大互聯(lián)網公司的開放平臺，如微博開放平臺等。
-
企業(yè)級服務產品，虛擬主機系統(tǒng)（VMware），云主機管理系統(tǒng)（深信服、xensystem、騰訊云）以及各種云SaaS。
-
企業(yè)的業(yè)務處理平臺，對內有考勤、報銷等 OA辦公系統(tǒng)，對外有 CRM 客戶管理系統(tǒng)，ERP 資源及供應鏈管理系統(tǒng)。
1. 初識后臺產品設計
說起后臺產品，很容易想到復雜、龐大、邏輯縝密，而作為設計師，則苦于競品短缺、架構復雜，設計的前期工作比設計本身要復雜得多等問題。
后臺產品不同于普通用戶所使用的 APP，它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的 app，再給他幾個其他的音樂 APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。
對于后臺產品來說，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產品的使用者一般都是在該行業(yè)沉淀了很久，所以要對后臺產品進行設計就需要同樣了解該行業(yè)，甚至更能洞察該行業(yè)，業(yè)務本身的復雜性質決定了后臺產品架構也會比較龐大；然后，無論是工廠商家的進銷存管理，還是政府醫(yī)院的工作流和業(yè)務流，乃至企業(yè)內部的產品，除了不同行業(yè)都有門檻外，對信息和產品也有「保密協(xié)議」的使命感，所謂「隔行如隔山」，在后臺產品更是如此；最后，后臺產品設計往往沒有固定的功能架構和商業(yè)模式，對于產品經理的邏輯思維能力要求更高，設計師不僅僅是做界面、優(yōu)化流程，也要主動和產品經理溝通交流，并對產品進行思考和探索。
2. 后臺UI設計工作流程
后臺 UI 設計的工作，大體分為三個部分：需求分析、設計執(zhí)行、數(shù)據分析。
在需求分析階段，要對產品本身和行業(yè)本身有一些基本的認知。要了解產品的基本情況，比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。做這個產品是為了解決什么問題？想實現(xiàn)什么目標？使用這個系統(tǒng)的用戶有哪些？不同角色的用戶有哪些具體的權限？是否需要對每一個用戶的行為都生成操作日志？產品有哪些主要的功能模塊？產品的業(yè)務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？成功地做出大而全的后臺產品，是整個設計團隊和開發(fā)團隊能力的體現(xiàn)，而對很多小團隊來說，只能做一些大團隊不愿去做的產品，或另辟蹊徑在某些方面做專做精。
在設計執(zhí)行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關注的有當前版本規(guī)劃、功能模塊、功能類型、功能描述、任務優(yōu)先級、完成時間等，交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內容。原型設計完成，開始做 UI 視覺方面的設計，而這時后端同步構思需求的實現(xiàn)方案。UI 設計師向前端了解實現(xiàn)框架，方便交接和溝通。當界面實現(xiàn)，UI 設計師應該是最早進行測試的，力求視覺設計和代碼實現(xiàn)無誤差。在完成設計執(zhí)行后，從信息層級、文字、圖標、圖片等方面進行設計走查，進行多次設計驗證與測試。
數(shù)據分析是產品優(yōu)化迭代的重要依據。進行多番測試和評審后交付客戶（或內部）使用，根據產生的具體問題進行不斷迭代，且觀察產品能否通過準確的數(shù)據反映問題、體現(xiàn)能力，應虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優(yōu)化產品的重要途徑。只有達到了管理和運營的指標，后臺產品才是真正產生了價值。
3. 制定設計規(guī)范的作用
為后臺產品制定設計規(guī)范有哪些作用和好處呢？簡單來說就是對產品好、對自己好、對團隊好、對客戶好。
-
對產品：在項目完成第一版較為穩(wěn)定的版本時，著手制定設計標準，統(tǒng)一公司視覺設計規(guī)范及某些特定交互設計規(guī)范。同一個項目會有多個設計師的參與，規(guī)范化的設計語言，避免因設計控件混亂而影響設計輸出。
-
對自己：組件化同類元素，提高工作效率，建立公司產品的組件庫，以便不同項目的復用及設計延展。在同一個項目中也能更好的把控該項目的視覺規(guī)范，提率。
-
對團隊：設計規(guī)范的制定，規(guī)范了設計團隊的輸出，同時方便了與開發(fā)團隊的交接和協(xié)作。通過設計規(guī)范的制定，前端實現(xiàn)也能擁有一套可供復用和擴展的組件庫，助力上下游交接及團隊協(xié)作。
-
對客戶：制定設計規(guī)范的同時需要考慮設計延展性，為不同客戶的定制化需求提供更的輸出。同時在進行產品迭代時，設計規(guī)范的組件化調整也大大提高了工作效率。
以下數(shù)值為參考，請結合特定產品靈活運用。
1. 頁面布局
統(tǒng)一尺寸
據統(tǒng)計，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設計的話，向上適配或者向下適配誤差會比較小。
適配方案：面向多個客戶，后臺產品設計功能型頁面的尺寸統(tǒng)一為 1440*900，按照柵格系統(tǒng)原則向上或向下適配。展示型頁面以 1440*900 為主，同時設計出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實現(xiàn)前端實現(xiàn)效果和高保真設計圖誤差最小。面向公司內部的后臺系統(tǒng)，由于各個職工電腦屏幕是統(tǒng)一采購、統(tǒng)一尺寸，所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進行設計，這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。
頁面框架
頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側菜單欄、主體內容三大區(qū)域，其中頂部菜單欄、左側菜單欄為固定結構，右側主體內容根據分辨率進行動態(tài)縮放；上下欄布局包括頂部菜單欄和主體內容兩大區(qū)域，其中頂部菜單欄為固定結構，主體內容進行動態(tài)縮放且需定義主體內容左右兩邊空白區(qū)域最小值；左右欄布局時，左側菜單可收縮展開，收縮狀態(tài)下固定寬度。
柵格布局
柵格系統(tǒng)的使用是為了解決自適應和響應式問題，從而更好地進行產品設計和產品開發(fā)。響應式柵格采用 24 列柵格系統(tǒng)實現(xiàn)，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進行動態(tài)縮放。
需要柵格化處理的內容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。
谷歌規(guī)定模塊和結構之間要以 8px 為基準，布局間相對間距可采用 8px 以及 8 的倍數(shù)，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準。柵格布局是為了輔助設計，靈活運用，不要被它所局限。
尺寸設定
一般在整體區(qū)域左上角放置產品 LOGO 及產品名稱，大部分系統(tǒng)頂部欄高度 48+8n，側邊欄寬度 200+8n。我常用的是頂部欄高度 56px，側邊欄寬度 200px，側邊欄收縮狀態(tài)寬度 56px，右側的側浮窗寬度 400px。
相對間隔
定義主體內容的上下左右邊距，定義主體區(qū)域內各模塊的邊距及安全寬度，超出內容區(qū)域的部分采用區(qū)域內滾動或整屏滾動，視情況固定導航欄。
2. 標準色
顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求，可能也會將統(tǒng)計圖、標簽等進行統(tǒng)一標準色設定。
品牌色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應用場景包括操作狀態(tài)、按鈕色、可操作圖標等。
輔助色用于提示其他場景，比如成功、失敗、警告、無效等。
中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現(xiàn)不同的層級結構。
其他色如統(tǒng)計圖、數(shù)據可視化、多個標簽的不同配色方案根據項目情況單獨設定。
3. 標準字
后臺系統(tǒng)常用的字體：windows 系統(tǒng)，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。
后臺系統(tǒng)中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。
行高設定，根據文字大小及使用場景設置行高，一般行高=文字大小+6px/8px。
4. 圖標
圖標是 UI 設計中重要組成部分，一般分為功能圖標和應用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協(xié)調美觀。在后臺產品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。
除了某些常用的圖標，有一些專業(yè)性的操作和詞匯則需要設計師進行繪制，現(xiàn)在比較方便的方法是在 iconfont 提供的圖標模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標尺寸按照 8 的倍數(shù)進行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調用，調整大小和顏色更為方便，且能夠優(yōu)化系統(tǒng)內存和性能。
5. 按鈕
按鈕是后臺產品進行交互設計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態(tài)包括默認、懸停、點擊和不可用。
按鈕根據需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照 8 的倍數(shù)設定。如高度分別設定為 24、32、40px。
規(guī)范整理時要規(guī)定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態(tài)展現(xiàn)出來。
填充按鈕之間間距最小為 10px。
6. 導航
導航的類型有很多種，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數(shù)等。
各類導航中的字體大小可進行統(tǒng)一設定。
頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。
側欄菜單為垂直導航菜單，可以內嵌子菜單。
下拉菜單的觸發(fā)方式一般有鼠標懸停和鼠標點擊兩種。
步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。
分頁的高度設定為 24px、30px、32px，根據應用場景適當增減內容，比如設定每頁展示數(shù)據的條數(shù)、跳轉至指定頁等。
面包屑用于說明層級結構，使用戶明確當前所在位置，并且可以回到任一上級頁面。
徽標數(shù)用來通知用戶當前有未讀消息，一般出現(xiàn)在圖標的右上角或者跟在文字后面。
7. 表單
表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。
字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經常應用在登錄注冊，雖然減少了面積，但是增加了理解難度。
輸入框的交互狀態(tài)包括默認、輸入結果、提示錯誤、禁用、獲取焦點。
輸入框的尺寸可按照8的倍數(shù)進行設定，比如 24px、32px，也可根據系統(tǒng)實際情況進行設定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為 20px，有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側（預留出位置）。
表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內正文字體 14px，文字和左右兩邊邊框的邊距 10px。
選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復選框多為方形。
搜索框和選擇框的高度為 30px 或按照 8 的倍數(shù)自行設定，通常和輸入框保持一致。搜索框距離右側按鈕 4px，內部文字 14px。
單選多選框尺寸 16*16px，多個選項橫向排列間距 16px，縱向排列間距 8px。
開關按鈕外框 40*20px，內部圓形 16*16px。
8. 表格
表格在后臺產品 UI 設計中占比非常大，用來展示數(shù)據、統(tǒng)一管理、作為詳情入口，是最清晰、的形式之一。在設計規(guī)范中需設定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。
表格主要分為五大區(qū)域：選擇搜索區(qū)、操作區(qū)、表頭、正文、底欄。選擇搜索區(qū)放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區(qū)指各種對表格內容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數(shù)據，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內操作；底欄顯示分頁、總數(shù)統(tǒng)計等。
表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數(shù)據在第一列增加多選框。
行高
表格行高可設置為表格內字體高度的 2~3 倍，主表格會間隔顯示不同顏色，用于區(qū)分不同行數(shù)據、加強視覺流引導，展開單行的內置表格可采用純色，選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區(qū)分。表格行高可采用 36、40、48、60 等。
行數(shù)
表格行數(shù)太多加載速度會降低，延長用戶等待時間；行數(shù)太少會導致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數(shù)是 20 或 50，用戶可以根據自己需求選擇默認的行數(shù)。設定行數(shù)之后，如果每頁行數(shù)多于每屏行數(shù)，可在表格內引入滾動條，這時可以固定表頭滾動內容。
列寬
列寬根據內容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內容的長度固定時，列寬應大于固定寬度（比如時間、MD5、SHA1）；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以「…」展示，鼠標懸停出現(xiàn)完整內容（比如詳情、描述）。
列數(shù)
表格列不應過多，列數(shù)比較多的情況下應該合理進行合并、隱藏、刪除或進行優(yōu)先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
對齊方式
表格內的文本應按照文本類型不同進行統(tǒng)一規(guī)范，如金額類數(shù)值保留相同位數(shù)小數(shù)，SHA1 雖然是一串數(shù)字但是其實那并不是數(shù)據而是一串編碼，所以可以像文本一樣左對齊。根據文本內容不同，對齊方式也應靈活調整，可采用文本左對齊、數(shù)據右對齊、金額小數(shù)點對齊的方式。數(shù)據前面有標簽的，將標簽前置對齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據產品需要在文本前面增加「復制」圖標，方便用戶調用。
詳情入口
表格內部數(shù)據的詳情入口，將能點擊下鉆查看詳情的內容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。
9. 反饋
包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態(tài)等。分為模態(tài)框和非模態(tài)框，區(qū)別是是否會打斷用戶工作流。
彈框又稱對話框，是疊加在應用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。
彈框
彈框出現(xiàn)時，主題內容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時采用有關閉圖標的彈框和無關閉圖標的彈框，引導用戶對內容進行正確操作。如果設定系統(tǒng)內所有彈框均可以點擊彈框外區(qū)域關閉， 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框，或者再次進行交互梳理。
側滑框
側滑框又稱抽屜，出現(xiàn)在右側，固定寬度 400px，高度覆蓋在主題內容之上，點擊側滑框以外的區(qū)域則收起側滑框。
骨架屏
為某些特定數(shù)據提供數(shù)據加載等待時的占位圖形組合。
全局提示
建議停留時間 3s，可根據文字字數(shù)調整停留時間，文字內容限制在 30 以內。
警告提示
用不同顏色和樣式展示需要關注的信息。
通知提醒
消息通知和警告信息用通知提醒框，單個消息從頁面右側以抽屜的方式劃出，用戶可手動關閉，或停留 3s 后自動關閉。
10. 缺省狀態(tài)
繪制不同類型的情感化插畫表示缺省狀態(tài)，如404、500、暫時沒有數(shù)據、沒有新消息等。
頁面需要一個默認的底色，錯誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。
11. 數(shù)據可視化
數(shù)據可視化部分可能是后臺產品中對視覺設計要求較高的部分，使用情境為各類統(tǒng)計圖、大屏展示頁面等。
功能型頁面的數(shù)據可視化可以引入圖形化設計組件，Echarts、G2、d3等；展示型頁面的數(shù)據可視化則可以做得更有趣，比如立體的統(tǒng)計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。
考慮到數(shù)據可視化可能會需要深色淺色不同的背景，在數(shù)據可視化統(tǒng)計圖的色彩搭配上要注意顏色的拓展性。
1. 設計前端一家親
2. 書籍推薦
-
《B端產品經理必修課》
-
《交互設計精髓》
-
《U一點料·Ⅱ》
-
《簡約至上：交互式設計四策略》
3. 文章和作品推薦
不管是做 C 端產品還是 B 端產品，都是為了實現(xiàn)用戶的需求、幫用戶解決問題。
剛接觸后臺產品的時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發(fā)現(xiàn)項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多，對一些公司來說、專門去制定一套自己的后臺設計規(guī)范不免顯得費時費力，合理引入 antdesign 和 element 等開源的設計組件，會使得設計師以及前端事半功倍，有助于設計師把更多的精力投入到沉淀行業(yè)知識、研究產品架構、梳理交互方式和創(chuàng)新視覺表現(xiàn)上。
在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業(yè)務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現(xiàn)價值。
藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
備注（本分享中所有的圖只用作于文字說明，不產生任何商業(yè)用途）
