導(dǎo)語：B端產(chǎn)品的首頁不僅僅是展示產(chǎn)品價(jià)值和導(dǎo)航，更多的是需要幫助提升效率，快速觸達(dá)各角色的業(yè)務(wù)。本篇文章中，作者為我們分享了他關(guān)于后臺(tái)首頁設(shè)計(jì)的一些看法，快來拓展你的設(shè)計(jì)思路吧。

后臺(tái)產(chǎn)品中，首頁其實(shí)是一個(gè)非常重要的功能，系統(tǒng)首頁相當(dāng)于這個(gè)產(chǎn)品的臉面，用戶登錄后，首先看到的是系統(tǒng)的首頁，才會(huì)看到其他的系統(tǒng)功能，但在很多產(chǎn)品中又很容易把它忽略，尤其是內(nèi)部使用的后臺(tái)產(chǎn)品。

其實(shí)B端產(chǎn)品的首頁設(shè)計(jì)是比較難的，因?yàn)楹芏鄷r(shí)候，是沒有需求來表明首頁做什么。更多的時(shí)候是需要產(chǎn)品經(jīng)理，根據(jù)產(chǎn)品的價(jià)值和業(yè)務(wù)自己判斷，首頁應(yīng)該有哪些內(nèi)容，而且B端產(chǎn)品和C端產(chǎn)品在首頁設(shè)計(jì)有很大不同。

C端產(chǎn)品可以使用數(shù)據(jù)驗(yàn)證和優(yōu)化首頁的設(shè)計(jì)，B端產(chǎn)品因?yàn)橛脩粢?guī)模較少，所以不太適用。

一、后臺(tái)首頁分類

1. 按使用對(duì)象分類

對(duì)于業(yè)務(wù)型系統(tǒng)，首頁一般會(huì)給兩大類角色看，分別是領(lǐng)導(dǎo)和普通員工，領(lǐng)導(dǎo)縱覽公司、部門、業(yè)務(wù)等整體情況，員工主要看本部門的工作、業(yè)務(wù)情況。

在設(shè)計(jì)首頁時(shí)，領(lǐng)導(dǎo)和普通員工的展示界面，會(huì)有一些差別。

但也并不是所有系統(tǒng)會(huì)區(qū)分領(lǐng)導(dǎo)和員工的首頁，像OA、財(cái)務(wù)報(bào)銷系統(tǒng)、輿情預(yù)警系統(tǒng)，首頁不會(huì)區(qū)分領(lǐng)導(dǎo)和普通員工，大家看到的首頁都一樣。

2. 按系統(tǒng)類型分類

按后臺(tái)系統(tǒng)類型，可以分為：

• 客戶系統(tǒng)
• 電商系統(tǒng)
• 工單系統(tǒng)
• 充值系統(tǒng)
• 商戶系統(tǒng)
• 銷售系統(tǒng)
• 會(huì)員系統(tǒng)
• 等等……

文中最后將展示這些系統(tǒng)的部分原型。

二、后臺(tái)首頁設(shè)計(jì)

1. 設(shè)計(jì)原則

在設(shè)計(jì)之前，盡可能的進(jìn)行用戶訪談，深入各角色的場(chǎng)景，分析其業(yè)務(wù)重心和痛點(diǎn)，了解客戶各角色對(duì)于產(chǎn)品的期望。

1）梳理業(yè)務(wù)和功能架構(gòu)

首頁與導(dǎo)航一起構(gòu)成了產(chǎn)品的門面。在設(shè)計(jì)首頁之前，需要先完成業(yè)務(wù)和功能的架構(gòu)設(shè)計(jì)，以及導(dǎo)航欄的設(shè)計(jì)，根據(jù)整個(gè)產(chǎn)品的架構(gòu)明確首頁的核心需求。

2）以價(jià)值和效率驅(qū)動(dòng)

從重要信息觸達(dá)的角度分析，首頁可以作某些重要內(nèi)容信息的展示；從產(chǎn)品門面價(jià)值的角度分析，首頁可以作為某些數(shù)據(jù)的展示；從產(chǎn)品業(yè)務(wù)架構(gòu)的角度分析，首頁可以作為導(dǎo)航欄的補(bǔ)充；從產(chǎn)品工作效率的角度分析，首頁可以作為工作臺(tái)。

3）聚焦到業(yè)務(wù)本身

在設(shè)計(jì)產(chǎn)品首頁時(shí)，首先需要結(jié)合角色和業(yè)務(wù)，敲定首頁的展示內(nèi)容。

優(yōu)先選擇所有角色通用且重要的內(nèi)容，選取角色高度關(guān)注的數(shù)據(jù)，聚焦角色高度關(guān)注的業(yè)務(wù)，提煉角色高頻使用的功能，設(shè)計(jì)快捷功能區(qū)。

4）規(guī)范的排版設(shè)計(jì)

選取好功能和數(shù)據(jù)后，開始針對(duì)內(nèi)容設(shè)計(jì)排版樣式，B端產(chǎn)品首頁通常采用卡片式布局?？ㄆ讲季值膬?yōu)勢(shì)是可以方便排列組合，多種類型的內(nèi)容。

2. 設(shè)計(jì)思路

在設(shè)計(jì)首頁的時(shí)候，需要把各種展示內(nèi)容以合理的方式呈現(xiàn)，考驗(yàn)的是一個(gè)人從不同角度去分析、組合信息內(nèi)容的能力。

通過上述分析，在后臺(tái)首頁中，一般是由以下幾種類型的模塊構(gòu)成首頁，根據(jù)實(shí)際業(yè)務(wù)情況進(jìn)行選取組合。數(shù)據(jù)、內(nèi)容模塊、快捷工作臺(tái)、功能導(dǎo)航、個(gè)人信息。

1）數(shù)據(jù)模塊

數(shù)據(jù)模塊可以從總體指標(biāo)、業(yè)務(wù)變化、業(yè)務(wù)分布、業(yè)務(wù)轉(zhuǎn)化等維度進(jìn)行展開分析提煉核心指標(biāo)：

• 場(chǎng)景：查看業(yè)務(wù)的核心指標(biāo)
• 作用：幫助使用者快速了解核心業(yè)務(wù)指標(biāo)

所謂的核心指標(biāo)，指的是每個(gè)使用者最關(guān)心的、業(yè)務(wù)中最核心的數(shù)據(jù)。

使用者登錄系統(tǒng)，需要第一時(shí)間查看核心指標(biāo)。通過對(duì)數(shù)據(jù)的分析，從而統(tǒng)籌安排后續(xù)的工作。所以核心指標(biāo)即需要有及時(shí)性，又需要有統(tǒng)籌性。

常見的展示形式是統(tǒng)計(jì)卡：

業(yè)務(wù)變化及趨勢(shì)

• 場(chǎng)景：分析業(yè)務(wù)的趨勢(shì)情況
• 作用：可以了解業(yè)務(wù)在一定范圍內(nèi)的變化趨勢(shì)

通過對(duì)業(yè)務(wù)趨勢(shì)的分析，我們可以查看公司業(yè)務(wù)的連貫性。通常情況下，都是查看某一時(shí)間段內(nèi)的業(yè)務(wù)變化趨勢(shì)。

通過直觀的數(shù)據(jù)走勢(shì)，我們可以有針對(duì)性的找出問題，分析對(duì)策。通過對(duì)變化節(jié)點(diǎn)的觀察，再結(jié)合行業(yè)趨勢(shì)、公司實(shí)際運(yùn)營狀態(tài)，找出業(yè)務(wù)增長的規(guī)律，發(fā)現(xiàn)業(yè)務(wù)減少的原因，為后續(xù)業(yè)務(wù)的開展提供方向。

常見的展示形式是折線圖以及由折線圖衍生出的相關(guān)圖形：

另外對(duì)于核心數(shù)據(jù)指標(biāo)的變化情況通常用變化率或變化量直接展示：

業(yè)務(wù)分布

業(yè)務(wù)分布統(tǒng)計(jì)：

• 場(chǎng)景：分析業(yè)務(wù)的分布情況
• 作用：可以了解業(yè)務(wù)的實(shí)際分布數(shù)據(jù)

通過對(duì)業(yè)務(wù)分布的分析，我們可以了解公司業(yè)務(wù)的分布情況。

通常情況下，可以按照渠道、業(yè)務(wù)線、來源這幾個(gè)維度進(jìn)行分析，通過對(duì)各業(yè)務(wù)的分布情況分析，可以發(fā)現(xiàn)業(yè)務(wù)中的優(yōu)勢(shì)和薄弱業(yè)務(wù)。針對(duì)優(yōu)勢(shì)業(yè)務(wù)，繼續(xù)保持。針對(duì)薄弱業(yè)務(wù)，重點(diǎn)提高。

常見的展現(xiàn)形式有柱狀圖、條形圖：

業(yè)務(wù)占比統(tǒng)計(jì)：

• 場(chǎng)景：分析業(yè)務(wù)的占比情況。
• 作用：通過占比分析，可以了解每個(gè)維度的貢獻(xiàn)情況。

業(yè)務(wù)占比和上面的業(yè)務(wù)分布，都是查看現(xiàn)有業(yè)務(wù)的布局情況。

當(dāng)然了，兩者側(cè)重點(diǎn)有所不同：業(yè)務(wù)分布，主要是為未來布局做準(zhǔn)備；業(yè)務(wù)占比，主要是分析現(xiàn)有業(yè)務(wù)情況。所以，我們?cè)谶M(jìn)行數(shù)據(jù)分析的時(shí)候，需要結(jié)合分布和占比兩種方式，這樣才能得到全面的內(nèi)容。

常見的展現(xiàn)形式是餅狀圖：

地域分布統(tǒng)計(jì)：

• 場(chǎng)景：分析業(yè)務(wù)的地域分布情況；
• 作用：通過區(qū)域數(shù)據(jù)分析，宏觀了解地區(qū)分布情況。

通過區(qū)域數(shù)據(jù)分析，宏觀了解地區(qū)分布情況：一來可以了解現(xiàn)有業(yè)務(wù)的實(shí)際數(shù)據(jù)，二來可以幫助進(jìn)行戰(zhàn)略布局。

通常情況下，有地域分布的需求，都是需要進(jìn)行戰(zhàn)略布局的考慮。所以我們?cè)谠O(shè)計(jì)的時(shí)候，一般考慮的指標(biāo)就是銷量、人數(shù)、銷售額。

常見的展現(xiàn)形式是地圖：

業(yè)務(wù)轉(zhuǎn)化：

• 場(chǎng)景：分析業(yè)務(wù)的轉(zhuǎn)化情況。
• 作用：通過路徑分析，可以了解不同階段的轉(zhuǎn)化情況，針對(duì)異常路徑進(jìn)行優(yōu)化。

通過業(yè)務(wù)轉(zhuǎn)化分析，可以了解不同階段的轉(zhuǎn)化情況，針對(duì)異常路徑進(jìn)行優(yōu)化。

比如CRM系統(tǒng)中，會(huì)進(jìn)行會(huì)員生命周期分析?；ヂ?lián)網(wǎng)行業(yè)中，會(huì)進(jìn)行客戶路徑分析。業(yè)務(wù)轉(zhuǎn)化圖表，能夠十分直觀的了解到是哪個(gè)環(huán)節(jié)出了問題，這樣就更有針對(duì)性的提出優(yōu)化意見。

常見的展現(xiàn)形式是漏斗圖：

排行榜等其他數(shù)據(jù)：排行榜展示前幾的對(duì)象，比如TOP10商品銷量/派送量等、TOP5輿情新聞。

排行榜展現(xiàn)形式一般是表格：

2）內(nèi)容模塊

內(nèi)容指的資訊、通知消息、公告等，這些內(nèi)容一般以列表的形式在首頁展示。資訊一般是作為協(xié)調(diào)版面的作用，本身的價(jià)值十分有限。通知消息和公告這類重要信息，比較適合設(shè)計(jì)在導(dǎo)航欄上。

如果需要展示內(nèi)容的詳情，則才會(huì)考慮設(shè)計(jì)在首頁。

快捷工作臺(tái)：是作為角色重要功能的簡(jiǎn)化版本，設(shè)計(jì)的目標(biāo)是讓用戶快速觸達(dá)功能和業(yè)務(wù)，提升用戶的效率。該功能板塊需要根據(jù)角色的業(yè)務(wù)來進(jìn)行設(shè)計(jì)，在該功能區(qū)中，不易設(shè)計(jì)過于復(fù)雜的功能，盡可能簡(jiǎn)化設(shè)計(jì)。

快捷工作臺(tái)的功能應(yīng)該都是角色高頻或日常使用的功能，比如CRM系統(tǒng)的今日回訪客服、OA的待審批內(nèi)容。主要類型有待辦事項(xiàng)，流程進(jìn)度等。

功能導(dǎo)航：如果系統(tǒng)功能較多時(shí)，可以考慮在首頁上，展示一些重要或高頻使用功能的導(dǎo)航，作為導(dǎo)航欄的補(bǔ)充。設(shè)計(jì)，比較適合圖標(biāo)的形式。

個(gè)人信息：是作為一小塊信息，展示登錄賬戶信息，或者賬戶主體信息。當(dāng)導(dǎo)航欄沒有空間留給標(biāo)識(shí)當(dāng)前登錄賬戶信息或者主體信息，但用戶又需要通過該信息進(jìn)行角色區(qū)別時(shí)，可以在主頁上設(shè)計(jì)個(gè)人信息板塊。

三、后臺(tái)首頁展示

1. 客戶管理類

2. 電商管理類

3. 會(huì)員管理類

4. 充值系統(tǒng)類

5. 商戶系統(tǒng)類

四、總結(jié)

首頁相當(dāng)于這個(gè)產(chǎn)品的臉面，后臺(tái)產(chǎn)品也不例外。后臺(tái)產(chǎn)品首頁設(shè)計(jì)考驗(yàn)產(chǎn)品經(jīng)理的歸納總結(jié)、重點(diǎn)提煉的能力，需要產(chǎn)品經(jīng)理對(duì)產(chǎn)品價(jià)值和業(yè)務(wù)有深入的理解并做決策判斷。

• 設(shè)計(jì)基本原則：深入業(yè)務(wù)場(chǎng)景，梳理業(yè)務(wù)和功能架構(gòu)；以價(jià)值和效率驅(qū)動(dòng)；聚焦業(yè)務(wù)本身；最后進(jìn)行規(guī)范的排榜設(shè)計(jì)；
• 設(shè)計(jì)思路：可以從數(shù)據(jù)模塊、內(nèi)容模塊、快捷工作臺(tái)、功能導(dǎo)航、個(gè)人信息五個(gè)維度進(jìn)行思考并進(jìn)行信息的組合設(shè)計(jì)。

注：日?？梢远嚓P(guān)注一些設(shè)計(jì)類網(wǎng)站，積累設(shè)計(jì)素材，拓展設(shè)計(jì)思路。

作者：小吳產(chǎn)品記，個(gè)人微信：wuhong_377

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

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