大多數產品經理在畫一個從0-1的產品原型或者要優化原有產品的時候，會遇到系統首頁如何設計的問題，有哪些需要注意的問題呢？

系統首頁很重要，系統首頁相當于這個產品的臉面，用戶登錄系統后，首先看到的是系統的首頁，才會看到其他的系統功能。

無論是人還是系統，都看顏值。

一個排版布局漂亮的首頁讓人眼前一亮，可以提升產品的level，一個設計簡陋和丑陋的首頁，會降低用戶對這個產品的心理預期。

我從事產品幾年來，看過及參與設計過很多系統的首頁，今天對于系統首頁設計做一個小結。

一、系統首頁設計有哪些？

• 文字型
• 表格型
• 文字和表格結合
• 純圖形
• 表格和圖形結合
• 綜合以上

二、首頁給誰看？

了解了系統首頁的類型后，我們再來思考一下首頁主要是給誰看的。

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

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

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

三、首頁看什么？

首頁展示的內容可以分為三類：重要內容、待辦內容、消息通知。

第一，重要內容是整個系統抽取出重要和關鍵的內容，并經過統計分析得出的內容，讓用戶登錄系統后能快速了解的內容。

比如一個物流系統的客戶端，重要內容會有賬戶余額、預報包裹的數量、異常包裹的數量等等。

重要內容需要產品經理結合實際業務去提取。

第二，待辦內容是指需要待辦的事項，用戶登錄系統除了看一些信息，可能還會要做一些處理工作，首頁提供一個待辦入口，很方便用戶去做處理。

一般系統中涉及到流程，會產生待辦內容。

第三，消息通知指一些通知、公告或其他文字性提醒的內容，如果有一些重大的消息，用戶在首頁可以馬上了解。

四、首頁有什么？

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

這些角度大致上有以下幾種：

1. 總體分析

總體分析主要是對某事物總體情況進行統計，比如電商賣家管理平臺，待收付款金額、待發貨數量、退款/售后數量、物流異常數量。

用戶看總體分析能非?？焖俦憬莸牧私庾约旱臉I務整體。

總體分析的展現形式一般有數字綜述、儀表盤、柱狀圖進行展示。

2. 對比統計不同類型、不同時間、不同區域的數量表現

用戶看完整體，會去詳細看部分情況，對于部分，通?？梢詮念愋?、時間、區域等去分析展示。

不同類型之間的數量/占比、不同時間段內的數量/占比、不同區域之間的數量/占比等等。

展現形式一般有餅圖、環形圖、柱狀圖、條形圖等。

3. 趨勢

用戶除了關注當前業務的情況，還關注一段時間內某事物的變化情況，即趨勢。

比如近30日內成交金額的趨勢、近30日人均瀏覽量趨勢。

趨勢的展現形式一般有折線圖、面積圖。

4. 任務進度

任務進度一般是通過進度條的形式展現不同對象之間的數量對比。

比如領導在首頁可以查看下屬之間任務完成情況的對比。

5. 分布

除了同對象不同類型、時間、區域的比較，以及不同對象之間的比較，還有區域、行業等分布概況。

區域分布圖展現形式以地圖方式展現，行業分布圖展現形式可以以柱狀圖方式展現。

6. 排行榜

排行榜展示前X的對象，比如TOP10商品銷量、TOP5輿情新聞。

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

7. 變化量/變化率

首頁上告訴用戶當前是什么很必要，有時候告訴用戶某事物跟前一次比發生了變化，這個變化是多少，變化是什么也很重要。

五、首頁的展現形式

當我們已經想好首頁要放哪些內容，哪些維度，這時就要去想如何去展現更為直觀。

文字？表格？圖形？什么圖形？

展現形式有很多，下面羅列了一些。

• 柱狀圖
• 條形圖
• 餅圖
• 玫瑰餅圖
• 環形圖
• 折線圖
• 面積圖
• 雷達圖
• 儀表盤
• 散點圖
• 漏斗圖
• 詞云圖
• 表格
• 數字綜述
• 中國地圖

Echarts上面有很多圖形展現方式，在設計首頁的時候可以參考。

我認為設計首頁最重要的是去分析、提取首頁展示的內容，分析用戶在首頁要看什么，想看什么，什么信息對用戶有用，什么信息是最有價值。其次，是從哪些維度去展示，最后才是畫圖，前面的東西思考清楚了，畫圖就很簡單。

#專欄作家#

Vi-Vi-Fu，微信公眾號：vivifu12，人人都是產品經理專欄作家。杭州某不知名公司需求分析師。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。