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

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

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

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

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

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

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

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

1. 待辦事項(xiàng)模塊

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

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

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

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

3. 常見功能模塊

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

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

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

二、操作頁面

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

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

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

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

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

1. 樹狀圖

針對(duì)層級(jí)關(guān)系的問題，我們?cè)O(shè)計(jì)了樹狀圖的視圖形式。用來明確工作事項(xiàng)的層級(jí)關(guān)系。

2. 甘特圖

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

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

甘特圖可以幫助管理者弄清項(xiàng)目的剩余任務(wù)，評(píng)估工作進(jìn)度。

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

3. 看板

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

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

三、配置頁面

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

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

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

四、總結(jié)

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