入行以來接觸了幾款B端系統(tǒng)，包括CRM、信息管理系統(tǒng)和CMS，提煉出通用的部分，并總結(jié)出“點(diǎn)”、“線”、“面”的B端產(chǎn)品設(shè)計(jì)方式。

B端產(chǎn)品重業(yè)務(wù)是眾所周知的，業(yè)務(wù)邏輯要清晰，業(yè)務(wù)流程耦合低是一句實(shí)用的秘訣。所以在收集需求的時(shí)候一定要和對接的人深入溝通，有條件的話甚至可以去輪崗體驗(yàn)。收集完需求后要分類，去掉偽需求，產(chǎn)品的功能模塊設(shè)計(jì)這些就不一一細(xì)說了。重點(diǎn)是：在設(shè)計(jì)產(chǎn)品前，最好畫流程圖、泳道圖以避免后期邏輯混亂，還有就是能更好的向開發(fā)表達(dá)你的想法。

一、“點(diǎn)”——字段

從調(diào)研、內(nèi)部各個(gè)部門收集而來的業(yè)務(wù)信息，提煉出相關(guān)的字段。再根據(jù)之前設(shè)計(jì)好的功能模塊，在確定每個(gè)功能模塊需要哪些信息的前提下，對各個(gè)字段進(jìn)行分類。以一個(gè)簡單的CRM為例：與客服人員的溝通中，收集到的有效字段有客服部門、客服姓名、工作編號，聯(lián)系方式等，然后將這些字段整理出來分配到相關(guān)的模塊中。除此以外，我們還要根據(jù)實(shí)際需求添加必要的字段，如在權(quán)限設(shè)置模塊中，還需要添加“用戶狀態(tài)”字段，表明該客服在職離職狀態(tài)。

切記，添加的字段必須必須是與該模塊的業(yè)務(wù)相關(guān)的，否則就會(huì)變成冗余數(shù)據(jù)。

二、“線”——局部設(shè)計(jì)

字段是“點(diǎn)”，那產(chǎn)品設(shè)計(jì)中的“線”就是兩個(gè)或以上組件的組合，但還沒構(gòu)成整個(gè)頁面。如一個(gè)字段加上一個(gè)文本框可以是“線”，整個(gè)導(dǎo)航區(qū)、檢索區(qū)也可以是“線”。

1、導(dǎo)航的類型按照方向分類

導(dǎo)航分為三種：水平型導(dǎo)航、垂直型導(dǎo)航、混合型導(dǎo)航。后臺(tái)系統(tǒng)多數(shù)采用混合型導(dǎo)航。

混合型導(dǎo)航中，水平導(dǎo)航菜單上主要有使用說明（幫助中心）、消息提醒和個(gè)人中心。使用說明是為了給用戶可以隨時(shí)查詢系統(tǒng)的操作流程。雖然公司可能會(huì)有內(nèi)部培訓(xùn)，B端產(chǎn)品的使用人員也要求必須要熟悉流程，但無法避免有時(shí)候可能會(huì)遺忘一些操作細(xì)節(jié)，所以使用說明是提高工作效率的實(shí)用方法之一。消息提醒就是一個(gè)便簽的功能，提醒用戶哪些事情要處理、已經(jīng)處理完成等，特別是在一些復(fù)雜的系統(tǒng)中，此功能必不可少。相對簡單的后臺(tái)系統(tǒng)，消息提醒還可以直接作為首頁，讓用戶一目了然所有信息。個(gè)人中心模塊由于使用權(quán)限的限制，多數(shù)只有退出和登陸的功能。水平導(dǎo)航想要更豐富些的可以加上搜索、系統(tǒng)設(shè)置、全屏切換等功能。垂直導(dǎo)航菜單上就是各個(gè)功能模塊，菜單最多兩級，再細(xì)分可以在右邊頁面放局部導(dǎo)航。如果右邊的頁面內(nèi)容太多，可以加一個(gè)按鈕將左側(cè)導(dǎo)航隱藏起來。

下圖引用了Ant Design的后臺(tái)模版：

2、導(dǎo)航區(qū)完成就到了內(nèi)容區(qū)

“點(diǎn)”的階段確立好字段，在檢索區(qū)還要篩選出關(guān)鍵的、用戶重視的字段，因?yàn)椴皇撬械男畔⒍夹枰粰z索。如圖書館信息管理系統(tǒng)為例，在圖書借還記錄頁，工作人員可能更需要知道的是圖書的借還時(shí)間，圖書的名稱，讀者名稱，而不會(huì)關(guān)心圖書的出版日期。所以檢索字段的選擇需要結(jié)合頁面的需求慎重考慮。

檢索的輸入方式有很多種，每一種情況都要再細(xì)分討論，然后立規(guī)則。文本框輸入的需要考慮是否保存輸入記錄和是否對字符進(jìn)行限制，是否區(qū)分大小寫字母等，目的是在無法正常復(fù)制粘貼的情況下減少用戶輸入出錯(cuò)的概率和快速準(zhǔn)確的定位到用戶需要的信息，如在檢索聯(lián)系方式時(shí)就可以限定字符的個(gè)數(shù)。單選檢索的要確定默認(rèn)選項(xiàng)，以及選項(xiàng)展開后的排序。默認(rèn)選項(xiàng)可以是空，也可以是最常用的選項(xiàng)。

下圖引用了Ant Design的后臺(tái)模版。

3、在列表的設(shè)計(jì)上，先確定列表的形式

列表的設(shè)計(jì)除了普通的表格之外，Ant Design中還有卡片式列表。小型的商品管理系統(tǒng)可以嘗試用卡片式列表，但是龐大而復(fù)雜的系統(tǒng)還是采用普通的表格式列表更加保險(xiǎn)，避免過大的數(shù)據(jù)減緩頁面加載的速度。接著是篩選表頭字段，將這些字段再分類排序，如訂單列表中，商品編號，商品名稱為一類是不能分開的，中間不能隔著支付時(shí)間、支付金額，否則會(huì)影響閱讀。如果表頭的列數(shù)太多時(shí)，可以先隱藏或者折疊，讓用戶自定義哪些顯示出來。

4、接著到列表的數(shù)據(jù)排序

排序需要根據(jù)頁面模塊來建立規(guī)則。如圖書館信息管理系統(tǒng)借還記錄列表可以按照更新時(shí)間的倒序排列，讀者信息列表可以按照創(chuàng)建時(shí)間的倒序排列。合理的排列順序可以提高用戶的工作效率，因?yàn)橛脩糇⒁饬ψ罴械挠肋h(yuǎn)是排在前面的數(shù)據(jù)。

5、分頁

由于后臺(tái)管理系統(tǒng)的數(shù)據(jù)都是海量的，所以不適合下拉加載更多的形式加載數(shù)據(jù)，分頁最好。分頁設(shè)計(jì)時(shí)，要考慮不同情況，比如事先規(guī)定每頁有20條數(shù)據(jù)，要分兩種情況考慮：第一，小于等于20條數(shù)據(jù)的時(shí)候頁碼部分只有當(dāng)前頁，第二，大于20條數(shù)據(jù)的時(shí)候，頁碼部分需要有首頁、末頁。當(dāng)有大量的數(shù)據(jù)時(shí)，就要設(shè)置快速跳轉(zhuǎn)到某一頁。

三、“面”——頁面布局

“點(diǎn)”、“線”設(shè)計(jì)結(jié)束后，就要組合構(gòu)成“面”，即網(wǎng)頁。作為產(chǎn)品在這里考慮的主要是頁面布局，每個(gè)功能模塊要擺放的位置，特別是大的系統(tǒng)，涉及的業(yè)務(wù)繁多，要求也更加嚴(yán)謹(jǐn)。原型圖可以畫的很簡單，絕大多數(shù)時(shí)候線框圖就夠用了，這樣可以避免影響UI的設(shè)計(jì)思路。B端產(chǎn)品用戶多數(shù)是公司的內(nèi)部自己員工，人數(shù)相對固定，需求也容易把控。設(shè)計(jì)原則是要求功能完整、實(shí)用性強(qiáng)。

（還是借用了Ant Design的后臺(tái)模版）

例如用戶登陸進(jìn)來首先關(guān)注的應(yīng)該是自己手頭上的工作，所以“進(jìn)行中的項(xiàng)目”要比“動(dòng)態(tài)”對用戶來說更重要，布局設(shè)計(jì)的時(shí)候就應(yīng)該在頁面前部分占主要位置。

初來乍到，不足之處各位請噴。

本文由 @Chloe 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議