下面這篇文章的筆者整理分享的是關(guān)于B端典型頁面設(shè)計中的分發(fā)引導(dǎo)頁面、操作頁面、配置頁面得相關(guān)知識，有想了解的同學(xué)可以進來看看哦！

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

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

一、分發(fā)引導(dǎo)頁面

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

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

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

對于這樣的頁面，我們最好采用結(jié)構(gòu)模塊化的設(shè)計，如卡片分割，在內(nèi)容展現(xiàn)形式上采用可視化的設(shè)計，用色上大膽豐富以達到分發(fā)的效果。具體到常見的四個業(yè)務(wù)模塊，我會分別舉例分析：

1. 待辦事項模塊

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

2. 業(yè)務(wù)數(shù)據(jù)模塊

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

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

3. 常見功能模塊

工作臺中的常用功能一般使用icon+文字的形式展示，功能icon承載了表現(xiàn)產(chǎn)品視覺品牌質(zhì)感的責(zé)任，我們根據(jù)B端產(chǎn)品的業(yè)務(wù)屬性去設(shè)計。

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

消息通知若需展示在工作臺，可參考網(wǎng)頁類產(chǎn)品的新聞中心設(shè)計，根據(jù)消息屬性和通知優(yōu)先級進行分類展示。

二、操作頁面

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

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

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

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

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

1. 樹狀圖

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

2. 甘特圖

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

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

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

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

3. 看板

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

在 SRM 供應(yīng)商管理，看板不僅可用于管理供應(yīng)商，也可用于采購管理、產(chǎn)品管理、部門工作管理等多個場景。

三、配置頁面

配置頁面在B端中較為常見，是對功能的一種設(shè)置。例如系統(tǒng)中的菜單展示、權(quán)限控制等配置頁面。

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

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

四、總結(jié)

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