大多數(shù)產(chǎn)品經(jīng)理在畫一個(gè)從0-1的產(chǎn)品原型或者要優(yōu)化原有產(chǎn)品的時(shí)候，會(huì)遇到系統(tǒng)首頁(yè)如何設(shè)計(jì)的問題，有哪些需要注意的問題呢？

系統(tǒng)首頁(yè)很重要，系統(tǒng)首頁(yè)相當(dāng)于這個(gè)產(chǎn)品的臉面，用戶登錄系統(tǒng)后，首先看到的是系統(tǒng)的首頁(yè)，才會(huì)看到其他的系統(tǒng)功能。

無(wú)論是人還是系統(tǒng)，都看顏值。

一個(gè)排版布局漂亮的首頁(yè)讓人眼前一亮，可以提升產(chǎn)品的level，一個(gè)設(shè)計(jì)簡(jiǎn)陋和丑陋的首頁(yè)，會(huì)降低用戶對(duì)這個(gè)產(chǎn)品的心理預(yù)期。

我從事產(chǎn)品幾年來(lái)，看過(guò)及參與設(shè)計(jì)過(guò)很多系統(tǒng)的首頁(yè)，今天對(duì)于系統(tǒng)首頁(yè)設(shè)計(jì)做一個(gè)小結(jié)。

一、系統(tǒng)首頁(yè)設(shè)計(jì)有哪些？

• 文字型
• 表格型
• 文字和表格結(jié)合
• 純圖形
• 表格和圖形結(jié)合
• 綜合以上

二、首頁(yè)給誰(shuí)看？

了解了系統(tǒng)首頁(yè)的類型后，我們?cè)賮?lái)思考一下首頁(yè)主要是給誰(shuí)看的。

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

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

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

三、首頁(yè)看什么？

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

第一，重要內(nèi)容是整個(gè)系統(tǒng)抽取出重要和關(guān)鍵的內(nèi)容，并經(jīng)過(guò)統(tǒng)計(jì)分析得出的內(nèi)容，讓用戶登錄系統(tǒng)后能快速了解的內(nèi)容。

比如一個(gè)物流系統(tǒng)的客戶端，重要內(nèi)容會(huì)有賬戶余額、預(yù)報(bào)包裹的數(shù)量、異常包裹的數(shù)量等等。

重要內(nèi)容需要產(chǎn)品經(jīng)理結(jié)合實(shí)際業(yè)務(wù)去提取。

第二，待辦內(nèi)容是指需要待辦的事項(xiàng)，用戶登錄系統(tǒng)除了看一些信息，可能還會(huì)要做一些處理工作，首頁(yè)提供一個(gè)待辦入口，很方便用戶去做處理。

一般系統(tǒng)中涉及到流程，會(huì)產(chǎn)生待辦內(nèi)容。

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

四、首頁(yè)有什么？

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

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

1. 總體分析

總體分析主要是對(duì)某事物總體情況進(jìn)行統(tǒng)計(jì)，比如電商賣家管理平臺(tái)，待收付款金額、待發(fā)貨數(shù)量、退款/售后數(shù)量、物流異常數(shù)量。

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

總體分析的展現(xiàn)形式一般有數(shù)字綜述、儀表盤、柱狀圖進(jìn)行展示。

2. 對(duì)比統(tǒng)計(jì)不同類型、不同時(shí)間、不同區(qū)域的數(shù)量表現(xiàn)

用戶看完整體，會(huì)去詳細(xì)看部分情況，對(duì)于部分，通?？梢詮念愋?、時(shí)間、區(qū)域等去分析展示。

不同類型之間的數(shù)量/占比、不同時(shí)間段內(nèi)的數(shù)量/占比、不同區(qū)域之間的數(shù)量/占比等等。

展現(xiàn)形式一般有餅圖、環(huán)形圖、柱狀圖、條形圖等。

3. 趨勢(shì)

用戶除了關(guān)注當(dāng)前業(yè)務(wù)的情況，還關(guān)注一段時(shí)間內(nèi)某事物的變化情況，即趨勢(shì)。

比如近30日內(nèi)成交金額的趨勢(shì)、近30日人均瀏覽量趨勢(shì)。

趨勢(shì)的展現(xiàn)形式一般有折線圖、面積圖。

4. 任務(wù)進(jìn)度

任務(wù)進(jìn)度一般是通過(guò)進(jìn)度條的形式展現(xiàn)不同對(duì)象之間的數(shù)量對(duì)比。

比如領(lǐng)導(dǎo)在首頁(yè)可以查看下屬之間任務(wù)完成情況的對(duì)比。

5. 分布

除了同對(duì)象不同類型、時(shí)間、區(qū)域的比較，以及不同對(duì)象之間的比較，還有區(qū)域、行業(yè)等分布概況。

區(qū)域分布圖展現(xiàn)形式以地圖方式展現(xiàn)，行業(yè)分布圖展現(xiàn)形式可以以柱狀圖方式展現(xiàn)。

6. 排行榜

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

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

7. 變化量/變化率

首頁(yè)上告訴用戶當(dāng)前是什么很必要，有時(shí)候告訴用戶某事物跟前一次比發(fā)生了變化，這個(gè)變化是多少，變化是什么也很重要。

五、首頁(yè)的展現(xiàn)形式

當(dāng)我們已經(jīng)想好首頁(yè)要放哪些內(nèi)容，哪些維度，這時(shí)就要去想如何去展現(xiàn)更為直觀。

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

展現(xiàn)形式有很多，下面羅列了一些。

• 柱狀圖
• 條形圖
• 餅圖
• 玫瑰餅圖
• 環(huán)形圖
• 折線圖
• 面積圖
• 雷達(dá)圖
• 儀表盤
• 散點(diǎn)圖
• 漏斗圖
• 詞云圖
• 表格
• 數(shù)字綜述
• 中國(guó)地圖

Echarts上面有很多圖形展現(xiàn)方式，在設(shè)計(jì)首頁(yè)的時(shí)候可以參考。

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

#專欄作家#

Vi-Vi-Fu，微信公眾號(hào)：vivifu12，人人都是產(chǎn)品經(jīng)理專欄作家。杭州某不知名公司需求分析師。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。