入行以來接觸了幾款B端系統，包括CRM、信息管理系統和CMS，提煉出通用的部分，並總結出“點”、“線”、“面”的B端產品設計方式。
B端產品重業務是眾所周知的，業務邏輯要清晰，業務流程耦合低是一句實用的秘訣。所以在收集需求的時候一定要和對接的人深入溝通，有條件的話甚至可以去輪崗體驗。收集完需求後要分類，去掉偽需求，產品的功能模塊設計這些就不一一細說了。重點是：在設計產品前，最好畫流程圖、泳道圖以避免後期邏輯混亂，還有就是能更好的向開發表達你的想法。
一、“點”——字段
從調研、內部各個部門收集而來的業務信息，提煉出相關的字段。再根據之前設計好的功能模塊，在確定每個功能模塊需要哪些信息的前提下，對各個字段進行分類。以一個簡單的CRM為例：與客服人員的溝通中，收集到的有效字段有客服部門、客服姓名、工作編號，聯繫方式等，然後將這些字段整理出來分配到相關的模塊中。除此以外，我們還要根據實際需求添加必要的字段，如在權限設置模塊中，還需要添加“用戶狀態”字段，表明該客服在職離職狀態。
切記，添加的字段必須必須是與該模塊的業務相關的，否則就會變成冗餘數據。
二、“線”——局部設計
字段是“點”，那產品設計中的“線”就是兩個或以上組件的組合，但還沒構成整個頁面。如一個字段加上一個文本框可以是“線”，整個導航區、檢索區也可以是“線”。
1、導航的類型按照方向分類
導航分為三種：水平型導航、垂直型導航、混合型導航。後臺系統多數採用混合型導航。
混合型導航中，水平導航菜單上主要有使用說明（幫助中心）、消息提醒和個人中心。使用說明是為了給用戶可以隨時查詢系統的操作流程。雖然公司可能會有內部培訓，B端產品的使用人員也要求必須要熟悉流程，但無法避免有時候可能會遺忘一些操作細節，所以使用說明是提高工作效率的實用方法之一。消息提醒就是一個便籤的功能，提醒用戶哪些事情要處理、已經處理完成等，特別是在一些複雜的系統中，此功能必不可少。相對簡單的後臺系統，消息提醒還可以直接作為首頁，讓用戶一目瞭然所有信息。個人中心模塊由於使用權限的限制，多數只有退出和登陸的功能。水平導航想要更豐富些的可以加上搜索、系統設置、全屏切換等功能。垂直導航菜單上就是各個功能模塊，菜單最多兩級，再細分可以在右邊頁面放局部導航。如果右邊的頁面內容太多，可以加一個按鈕將左側導航隱藏起來。
下圖引用了Ant Design的後臺模版：
2、導航區完成就到了內容區
“點”的階段確立好字段，在檢索區還要篩選出關鍵的、用戶重視的字段，因為不是所有的信息都需要被檢索。如圖書館信息管理系統為例，在圖書借還記錄頁，工作人員可能更需要知道的是圖書的借還時間，圖書的名稱，讀者名稱，而不會關心圖書的出版日期。所以檢索字段的選擇需要結合頁面的需求慎重考慮。
檢索的輸入方式有很多種，每一種情況都要再細分討論，然後立規則。文本框輸入的需要考慮是否保存輸入記錄和是否對字符進行限制，是否區分大小寫字母等，目的是在無法正常複製粘貼的情況下減少用戶輸入出錯的概率和快速準確的定位到用戶需要的信息，如在檢索聯繫方式時就可以限定字符的個數。單選檢索的要確定默認選項，以及選項展開後的排序。默認選項可以是空，也可以是最常用的選項。
下圖引用了Ant Design的後臺模版。
3、在列表的設計上，先確定列表的形式
列表的設計除了普通的表格之外，Ant Design中還有卡片式列表。小型的商品管理系統可以嘗試用卡片式列表，但是龐大而複雜的系統還是採用普通的表格式列表更加保險，避免過大的數據減緩頁面加載的速度。接著是篩選表頭字段，將這些字段再分類排序，如訂單列表中，商品編號，商品名稱為一類是不能分開的，中間不能隔著支付時間、支付金額，否則會影響閱讀。如果表頭的列數太多時，可以先隱藏或者摺疊，讓用戶自定義哪些顯示出來。
4、接著到列表的數據排序
排序需要根據頁面模塊來建立規則。如圖書館信息管理系統借還記錄列表可以按照更新時間的倒序排列，讀者信息列表可以按照創建時間的倒序排列。合理的排列順序可以提高用戶的工作效率，因為用戶注意力最集中的永遠是排在前面的數據。
5、分頁
由於後臺管理系統的數據都是海量的，所以不適合下拉加載更多的形式加載數據，分頁最好。分頁設計時，要考慮不同情況，比如事先規定每頁有20條數據，要分兩種情況考慮：第一，小於等於20條數據的時候頁碼部分只有當前頁，第二，大於20條數據的時候，頁碼部分需要有首頁、末頁。當有大量的數據時，就要設置快速跳轉到某一頁。
三、“面”——頁面佈局
“點”、“線”設計結束後，就要組合構成“面”，即網頁。作為產品在這裡考慮的主要是頁面佈局，每個功能模塊要擺放的位置，特別是大的系統，涉及的業務繁多，要求也更加嚴謹。原型圖可以畫的很簡單，絕大多數時候線框圖就夠用了，這樣可以避免影響UI的設計思路。B端產品用戶多數是公司的內部自己員工，人數相對固定，需求也容易把控。設計原則是要求功能完整、實用性強。
（還是借用了Ant Design的後臺模版）
例如用戶登陸進來首先關注的應該是自己手頭上的工作，所以“進行中的項目”要比“動態”對用戶來說更重要，佈局設計的時候就應該在頁面前部分佔主要位置。
初來乍到，不足之處各位請噴。
本文由 @Chloe 原創發佈於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
