下面這篇文章的筆者整理分享的是關于B端典型頁面設計中的分發引導頁面、操作頁面、配置頁面得相關知識，有想了解的同學可以進來看看哦！

在B端產品設計中，為用戶提高工作效率是每個產品設計師所追求的目標，也是企業主客戶對每個打工人的期望。本文介紹3種設計手法，通過提取B端產品中的典型頁面，來幫助B端設計師們提高頁面的操作效率。

對于B端產品的設計，相較于C端界面來說往往看起來很素。這是由于B端產品的重要目標就是要為用戶操作提效，所有的設計手法都應該遵循這個目標。在設計的時候我們可以根據用戶的專注度來區分頁面，進行相應設計。

一、分發引導頁面

在分發引導頁面中，用戶不需要專注于某一個具體的模塊或內容。而是需要通過這樣的頁面快速尋找到想要的內容并進入具體的操作頁面中，達到產品分發的功能。例如工作臺、概覽等頁面。

工作臺是B端產品的一大必備功能，高度聚合的作用讓它常常作為“門面”身份出現（用戶登錄后第一個看到的頁面）。

B端工作臺具有細分功能導航的作用，幫助用戶減少尋找功能的時間。當B端產品具有多個使用角色時，會根據業務屬性進行工作臺劃分，以此來滿足不同角色的使用訴求。

對于這樣的頁面，我們最好采用結構模塊化的設計，如卡片分割，在內容展現形式上采用可視化的設計，用色上大膽豐富以達到分發的效果。具體到常見的四個業務模塊，我會分別舉例分析：

1. 待辦事項模塊

典型的項目管理/待辦事項功能，常見于HRM系統中。模塊之間需要明確區分，采用加大加粗標題并且通過卡片的形式進行內容分割。色彩上重點突出重要的信息，使用顏色進行重要信息的展示。

2. 業務數據模塊

數據看板在分發引導頁面上占有重要位置，想做好界面上的數據模塊，當然要參考AntV、ECharts這類國內可視化組件庫。雖然看起來官方案例視覺效果并不理想，但是核心功能點是很“精致”的，經得起推敲。

我們可以借鑒功能框架，在此基礎上優化視覺，視覺來源可以參考國內的花瓣、國外的dribbble。前端工程師還可以直接利用可視化組件庫中的代碼進行改寫，不僅節省設計時間，還有效提升開發實現的效率。當然這里需要注意不同的圖形代表不同的數據含義，對比優先選擇柱狀圖，這里先不展開講了。

3. 常見功能模塊

工作臺中的常用功能一般使用icon+文字的形式展示，功能icon承載了表現產品視覺品牌質感的責任，我們根據B端產品的業務屬性去設計。

4. 消息通知模塊：新聞中心

消息通知若需展示在工作臺，可參考網頁類產品的新聞中心設計，根據消息屬性和通知優先級進行分類展示。

二、操作頁面

在操作頁面中，用戶為了完成某個業務操作準確和快捷，專注度是非常高的。同時這也是用戶使用頻率和使用時長最高的頁面，因此沉浸感的營造就尤為重要。例如創客帖操作詳情頁等頁面。

對于這樣的頁面，我們在設計上就要相對克制，減少過度的裝飾和顏色對信息獲取的干擾。同時在結構層級上下功夫，盡量做到清晰簡化，并且要突出關鍵操作節點。

不管是表格還是表單，所有的操作頁面都遵循以上的設計原則。

在實際工作場景中，操作頁面在操作前往往需要做到讓用戶快速感知內容，那么就需要從多維度去傳遞工作內容。

例如工作事項里的層級關系，項目的流程和總的進度，時間進度的把控，工作狀態的把控和流轉等。面對這些復雜的信息，單一維度的列表呈現方式就完全不能勝任了。我們需要多維度的設計展示。

1. 樹狀圖

針對層級關系的問題，我們設計了樹狀圖的視圖形式。用來明確工作事項的層級關系。

2. 甘特圖

針對時間進度展示的問題，我們設計了甘特圖的視圖形式。方便用戶在時間進度的維度來管理和決策。

甘特圖是項目/任務管理中非常常用的一種圖表類型，以圖示活動列表和時間刻度表示出項目的順序與持續時間。其通過條狀圖來顯示項目、進度、和其他時間相關的系統進展的內在關系隨著時間進展的情況，直觀表明計劃何時進行、進展與要求的對比。

甘特圖可以幫助管理者弄清項目的剩余任務，評估工作進度。

除此之外，甘特圖還可以應用在各類預約場景的數據展示，如會議室預約情況、課程預約情況等。

3. 看板

針對流轉狀態的問題，我們設計了看板的視圖形式。方便用戶管理決策，并且通過簡單的拖拽變更狀態，進一步助力用戶提效。

在 SRM 供應商管理，看板不僅可用于管理供應商，也可用于采購管理、產品管理、部門工作管理等多個場景。

三、配置頁面

配置頁面在B端中較為常見，是對功能的一種設置。例如系統中的菜單展示、權限控制等配置頁面。

在配置頁面中，雖然不是核心流程，用戶的專注度卻仍然較高，但使用頻率和使用時長不高，這就需要降低用戶的理解和使用成本。例如企業后臺管理系統配置等頁面。

對于這樣的頁面，我們同樣在設計上相對克制，重點突出關鍵操作點，可以多使用圖表或圖形化的設計來承載內容。

四、總結

在文章中，我們探討了如何利用設計手法設計一款適用于B端用戶的提效產品。通過三類B端中最常見的頁面，提出了不同類型頁面設計原則和技巧來助力產品。通過遵循這些原則和技巧，希望可以幫助大家打造出一個能夠幫助用戶提高效率，降低成本的高效產品。