導語：B端產品的首頁不僅僅是展示產品價值和導航，更多的是需要幫助提升效率，快速觸達各角色的業務。本篇文章中，作者為我們分享了他關於後台首頁設計的一些看法，快來拓展你的設計思路吧。

後台產品中，首頁其實是一個非常重要的功能，系統首頁相當於這個產品的臉面，用戶登錄後，首先看到的是系統的首頁，才會看到其他的系統功能，但在很多產品中又很容易把它忽略，尤其是內部使用的後台產品。

其實B端產品的首頁設計是比較難的，因為很多時候，是沒有需求來表明首頁做什麼。更多的時候是需要產品經理，根據產品的價值和業務自己判斷，首頁應該有哪些內容，而且B端產品和C端產品在首頁設計有很大不同。

C端產品可以使用數據驗證和優化首頁的設計，B端產品因為用戶規模較少，所以不太適用。

一、後台首頁分類

1. 按使用對象分類

對於業務型系統，首頁一般會給兩大類角色看，分別是領導和普通員工，領導縱覽公司、部門、業務等整體情況，員工主要看本部門的工作、業務情況。

在設計首頁時，領導和普通員工的展示界面，會有一些差別。

但也並不是所有系統會區分領導和員工的首頁，像OA、財務報銷系統、輿情預警系統，首頁不會區分領導和普通員工，大家看到的首頁都一樣。

2. 按系統類型分類

按後台系統類型，可以分為：

• 客戶系統
• 電商系統
• 工單系統
• 充值系統
• 商戶系統
• 銷售系統
• 會員系統
• 等等……

文中最後將展示這些系統的部分原型。

二、後台首頁設計

1. 設計原則

在設計之前，儘可能的進行用戶訪談，深入各角色的場景，分析其業務重心和痛點，了解客戶各角色對於產品的期望。

1）梳理業務和功能架構

首頁與導航一起構成了產品的門面。在設計首頁之前，需要先完成業務和功能的架構設計，以及導航欄的設計，根據整個產品的架構明確首頁的核心需求。

2）以價值和效率驅動

從重要信息觸達的角度分析，首頁可以作某些重要內容信息的展示；從產品門麵價值的角度分析，首頁可以作為某些數據的展示；從產品業務架構的角度分析，首頁可以作為導航欄的補充；從產品工作效率的角度分析，首頁可以作為工作台。

3）聚焦到業務本身

在設計產品首頁時，首先需要結合角色和業務，敲定首頁的展示內容。

優先選擇所有角色通用且重要的內容，選取角色高度關注的數據，聚焦角色高度關注的業務，提煉角色高頻使用的功能，設計快捷功能區。

4）規範的排版設計

選取好功能和數據後，開始針對內容設計排版樣式，B端產品首頁通常採用卡片式布局。卡片式布局的優勢是可以方便排列組合，多種類型的內容。

2. 設計思路

在設計首頁的時候，需要把各種展示內容以合理的方式呈現，考驗的是一個人從不同角度去分析、組合信息內容的能力。

通過上述分析，在後台首頁中，一般是由以下幾種類型的模塊構成首頁，根據實際業務情況進行選取組合。數據、內容模塊、快捷工作台、功能導航、個人信息。

1）數據模塊

數據模塊可以從總體指標、業務變化、業務分布、業務轉化等維度進行展開分析提煉核心指標：

• 場景：查看業務的核心指標
• 作用：幫助使用者快速了解核心業務指標

所謂的核心指標，指的是每個使用者最關心的、業務中最核心的數據。

使用者登錄系統，需要第一時間查看核心指標。通過對數據的分析，從而統籌安排後續的工作。所以核心指標即需要有及時性，又需要有統籌性。

常見的展示形式是統計卡：

業務變化及趨勢

• 場景：分析業務的趨勢情況
• 作用：可以了解業務在一定範圍內的變化趨勢

通過對業務趨勢的分析，我們可以查看公司業務的連貫性。通常情況下，都是查看某一時間段內的業務變化趨勢。

通過直觀的數據走勢，我們可以有針對性的找出問題，分析對策。通過對變化節點的觀察，再結合行業趨勢、公司實際運營狀態，找出業務增長的規律，發現業務減少的原因，為後續業務的開展提供方向。

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

另外對於核心數據指標的變化情況通常用變化率或變化量直接展示：

業務分布

業務分布統計：

通過對業務分布的分析，我們可以了解公司業務的分布情況。

通常情況下，可以按照渠道、業務線、來源這幾個維度進行分析，通過對各業務的分布情況分析，可以發現業務中的優勢和薄弱業務。針對優勢業務，繼續保持。針對薄弱業務，重點提高。

常見的展現形式有柱狀圖、條形圖：

業務佔比統計：

• 場景：分析業務的佔比情況。
• 作用：通過佔比分析，可以了解每個維度的貢獻情況。

業務佔比和上面的業務分布，都是查看現有業務的布局情況。

當然了，兩者側重點有所不同：業務分布，主要是為未來布局做準備；業務佔比，主要是分析現有業務情況。所以，我們在進行數據分析的時候，需要結合分布和佔比兩種方式，這樣才能得到全面的內容。

常見的展現形式是餅狀圖：

地域分布統計：

• 場景：分析業務的地域分布情況；
• 作用：通過區域數據分析，宏觀了解地區分布情況。

通過區域數據分析，宏觀了解地區分布情況：一來可以了解現有業務的實際數據，二來可以幫助進行戰略布局。

通常情況下，有地域分布的需求，都是需要進行戰略布局的考慮。所以我們在設計的時候，一般考慮的指標就是銷量、人數、銷售額。

常見的展現形式是地圖：

業務轉化：

• 場景：分析業務的轉化情況。
• 作用：通過路徑分析，可以了解不同階段的轉化情況，針對異常路徑進行優化。

通過業務轉化分析，可以了解不同階段的轉化情況，針對異常路徑進行優化。

比如CRM系統中，會進行會員生命周期分析。互聯網行業中，會進行客戶路徑分析。業務轉化圖表，能夠十分直觀的了解到是哪個環節出了問題，這樣就更有針對性的提出優化意見。

常見的展現形式是漏斗圖：

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

排行榜展現形式一般是表格：

2）內容模塊

內容指的資訊、通知消息、公告等，這些內容一般以列表的形式在首頁展示。資訊一般是作為協調版面的作用，本身的價值十分有限。通知消息和公告這類重要信息，比較適合設計在導航欄上。

如果需要展示內容的詳情，則才會考慮設計在首頁。

快捷工作台：是作為角色重要功能的簡化版本，設計的目標是讓用戶快速觸達功能和業務，提升用戶的效率。該功能板塊需要根據角色的業務來進行設計，在該功能區中，不易設計過於複雜的功能，儘可能簡化設計。

快捷工作台的功能應該都是角色高頻或日常使用的功能，比如CRM系統的今日回訪客服、OA的待審批內容。主要類型有待辦事項，流程進度等。

功能導航：如果系統功能較多時，可以考慮在首頁上，展示一些重要或高頻使用功能的導航，作為導航欄的補充。設計，比較適合圖標的形式。

個人信息：是作為一小塊信息，展示登錄賬戶信息，或者賬戶主體信息。當導航欄沒有空間留給標識當前登錄賬戶信息或者主體信息，但用戶又需要通過該信息進行角色區別時，可以在主頁上設計個人信息板塊。

三、後台首頁展示

1. 客戶管理類

2. 電商管理類

3. 會員管理類

4. 充值系統類

5. 商戶系統類

四、總結

首頁相當於這個產品的臉面，後台產品也不例外。後台產品首頁設計考驗產品經理的歸納總結、重點提煉的能力，需要產品經理對產品價值和業務有深入的理解並做決策判斷。

• 設計基本原則：深入業務場景，梳理業務和功能架構；以價值和效率驅動；聚焦業務本身；最後進行規範的排榜設計；
• 設計思路：可以從數據模塊、內容模塊、快捷工作台、功能導航、個人信息五個維度進行思考並進行信息的組合設計。

註：日常可以多關注一些設計類網站，積累設計素材，拓展設計思路。