起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識PC端系統首頁的設計手冊
大多數產品經理在畫一個從0-1的產品原型或者要優化原有產品的時候，會遇到系統首頁如何設計的問題，有哪些需要注意的問題呢？
系統首頁很重要，系統首頁相當于這個產品的臉面，用戶登錄系統后，首先看到的是系統的首頁，才會看到其他的系統功能。
無論是人還是系統，都看顏值。
一個排版布局漂亮的首頁讓人眼前一亮，可以提升產品的level，一個設計簡陋和丑陋的首頁，會降低用戶對這個產品的心理預期。
我從事產品幾年來，看過及參與設計過很多系統的首頁，今天對于系統首頁設計做一個小結。
一、系統首頁設計有哪些？
- 文字型
- 表格型
- 文字和表格結合
- 純圖形
- 表格和圖形結合
- 綜合以上
二、首頁給誰看？
了解了系統首頁的類型后，我們再來思考一下首頁主要是給誰看的。
對于業務型系統，首頁一般會給兩大類角色看，分別是領導和普通員工，領導縱覽公司、部門、業務等整體情況，員工主要看本部門的工作、業務情況。
在設計首頁時，領導和普通員工的展示界面，會有一些差別。
并不是所有系統會區分領導和員工的首頁，像OA、財務報銷系統、輿情預警系統，首頁不會區分領導和普通員工，大家看到的首頁都一樣。
三、首頁看什么？
首頁展示的內容可以分為三類：重要內容、待辦內容、消息通知。
第一，重要內容是整個系統抽取出重要和關鍵的內容，并經過統計分析得出的內容，讓用戶登錄系統后能快速了解的內容。
比如一個物流系統的客戶端，重要內容會有賬戶余額、預報包裹的數量、異常包裹的數量等等。
重要內容需要產品經理結合實際業務去提取。
第二，待辦內容是指需要待辦的事項，用戶登錄系統除了看一些信息，可能還會要做一些處理工作，首頁提供一個待辦入口，很方便用戶去做處理。
一般系統中涉及到流程，會產生待辦內容。
第三，消息通知指一些通知、公告或其他文字性提醒的內容，如果有一些重大的消息，用戶在首頁可以馬上了解。
四、首頁有什么？
在設計首頁的時候，需要把各種展示內容以合理的方式呈現，考驗的是一個人從不同角度去分析、組合信息內容的能力。
這些角度大致上有以下幾種：
1. 總體分析
總體分析主要是對某事物總體情況進行統計，比如電商賣家管理平臺，待收付款金額、待發貨數量、退款/售后數量、物流異常數量。
用戶看總體分析能非?？焖俦憬莸牧私庾约旱臉I務整體。
總體分析的展現形式一般有數字綜述、儀表盤、柱狀圖進行展示。
2. 對比統計不同類型、不同時間、不同區域的數量表現
用戶看完整體，會去詳細看部分情況，對于部分，通?？梢詮念愋汀r間、區域等去分析展示。
不同類型之間的數量/占比、不同時間段內的數量/占比、不同區域之間的數量/占比等等。
展現形式一般有餅圖、環形圖、柱狀圖、條形圖等。
3. 趨勢
用戶除了關注當前業務的情況，還關注一段時間內某事物的變化情況，即趨勢。
比如近30日內成交金額的趨勢、近30日人均瀏覽量趨勢。
趨勢的展現形式一般有折線圖、面積圖。
4. 任務進度
任務進度一般是通過進度條的形式展現不同對象之間的數量對比。
比如領導在首頁可以查看下屬之間任務完成情況的對比。
5. 分布
除了同對象不同類型、時間、區域的比較，以及不同對象之間的比較，還有區域、行業等分布概況。
區域分布圖展現形式以地圖方式展現，行業分布圖展現形式可以以柱狀圖方式展現。
6. 排行榜
排行榜展示前X的對象，比如TOP10商品銷量、TOP5輿情新聞。
排行榜展現形式一般是表格。
7. 變化量/變化率
首頁上告訴用戶當前是什么很必要，有時候告訴用戶某事物跟前一次比發生了變化，這個變化是多少，變化是什么也很重要。
五、首頁的展現形式
當我們已經想好首頁要放哪些內容，哪些維度，這時就要去想如何去展現更為直觀。
文字？表格？圖形？什么圖形？
展現形式有很多，下面羅列了一些。
- 柱狀圖
- 條形圖
- 餅圖
- 玫瑰餅圖
- 環形圖
- 折線圖
- 面積圖
- 雷達圖
- 儀表盤
- 散點圖
- 漏斗圖
- 詞云圖
- 表格
- 數字綜述
- 中國地圖
Echarts上面有很多圖形展現方式，在設計首頁的時候可以參考。
我認為設計首頁最重要的是去分析、提取首頁展示的內容，分析用戶在首頁要看什么，想看什么，什么信息對用戶有用，什么信息是最有價值。其次，是從哪些維度去展示，最后才是畫圖，前面的東西思考清楚了，畫圖就很簡單。
#專欄作家#
Vi-Vi-Fu，微信公眾號：vivifu12，人人都是產品經理專欄作家。杭州某不知名公司需求分析師。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
如果針對每種類型，有比較，更實用
如果可以放一些截圖的話，會更加生動