后臺(tái)首頁(yè)應(yīng)該如何設(shè)計(jì)?
導(dǎo)語(yǔ):B端產(chǎn)品的首頁(yè)不僅僅是展示產(chǎn)品價(jià)值和導(dǎo)航,更多的是需要幫助提升效率,快速觸達(dá)各角色的業(yè)務(wù)。本篇文章中,作者為我們分享了他關(guān)于后臺(tái)首頁(yè)設(shè)計(jì)的一些看法,快來(lái)拓展你的設(shè)計(jì)思路吧。
后臺(tái)產(chǎn)品中,首頁(yè)其實(shí)是一個(gè)非常重要的功能,系統(tǒng)首頁(yè)相當(dāng)于這個(gè)產(chǎn)品的臉面,用戶(hù)登錄后,首先看到的是系統(tǒng)的首頁(yè),才會(huì)看到其他的系統(tǒng)功能,但在很多產(chǎn)品中又很容易把它忽略,尤其是內(nèi)部使用的后臺(tái)產(chǎn)品。
其實(shí)B端產(chǎn)品的首頁(yè)設(shè)計(jì)是比較難的,因?yàn)楹芏鄷r(shí)候,是沒(méi)有需求來(lái)表明首頁(yè)做什么。更多的時(shí)候是需要產(chǎn)品經(jīng)理,根據(jù)產(chǎn)品的價(jià)值和業(yè)務(wù)自己判斷,首頁(yè)應(yīng)該有哪些內(nèi)容,而且B端產(chǎn)品和C端產(chǎn)品在首頁(yè)設(shè)計(jì)有很大不同。
C端產(chǎn)品可以使用數(shù)據(jù)驗(yàn)證和優(yōu)化首頁(yè)的設(shè)計(jì),B端產(chǎn)品因?yàn)橛脩?hù)規(guī)模較少,所以不太適用。
一、后臺(tái)首頁(yè)分類(lèi)
1. 按使用對(duì)象分類(lèi)
對(duì)于業(yè)務(wù)型系統(tǒng),首頁(yè)一般會(huì)給兩大類(lèi)角色看,分別是領(lǐng)導(dǎo)和普通員工,領(lǐng)導(dǎo)縱覽公司、部門(mén)、業(yè)務(wù)等整體情況,員工主要看本部門(mén)的工作、業(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)銷(xiāo)系統(tǒng)、輿情預(yù)警系統(tǒng),首頁(yè)不會(huì)區(qū)分領(lǐng)導(dǎo)和普通員工,大家看到的首頁(yè)都一樣。
2. 按系統(tǒng)類(lèi)型分類(lèi)
按后臺(tái)系統(tǒng)類(lèi)型,可以分為:
- 客戶(hù)系統(tǒng)
- 電商系統(tǒng)
- 工單系統(tǒng)
- 充值系統(tǒng)
- 商戶(hù)系統(tǒng)
- 銷(xiāo)售系統(tǒng)
- 會(huì)員系統(tǒng)
- 等等……
文中最后將展示這些系統(tǒng)的部分原型。
二、后臺(tái)首頁(yè)設(shè)計(jì)
1. 設(shè)計(jì)原則
在設(shè)計(jì)之前,盡可能的進(jìn)行用戶(hù)訪談,深入各角色的場(chǎng)景,分析其業(yè)務(wù)重心和痛點(diǎn),了解客戶(hù)各角色對(duì)于產(chǎn)品的期望。
1)梳理業(yè)務(wù)和功能架構(gòu)
首頁(yè)與導(dǎo)航一起構(gòu)成了產(chǎn)品的門(mén)面。在設(shè)計(jì)首頁(yè)之前,需要先完成業(yè)務(wù)和功能的架構(gòu)設(shè)計(jì),以及導(dǎo)航欄的設(shè)計(jì),根據(jù)整個(gè)產(chǎn)品的架構(gòu)明確首頁(yè)的核心需求。
2)以?xún)r(jià)值和效率驅(qū)動(dòng)
從重要信息觸達(dá)的角度分析,首頁(yè)可以作某些重要內(nèi)容信息的展示;從產(chǎn)品門(mén)面價(jià)值的角度分析,首頁(yè)可以作為某些數(shù)據(jù)的展示;從產(chǎn)品業(yè)務(wù)架構(gòu)的角度分析,首頁(yè)可以作為導(dǎo)航欄的補(bǔ)充;從產(chǎn)品工作效率的角度分析,首頁(yè)可以作為工作臺(tái)。
3)聚焦到業(yè)務(wù)本身
在設(shè)計(jì)產(chǎn)品首頁(yè)時(shí),首先需要結(jié)合角色和業(yè)務(wù),敲定首頁(yè)的展示內(nèi)容。
優(yōu)先選擇所有角色通用且重要的內(nèi)容,選取角色高度關(guān)注的數(shù)據(jù),聚焦角色高度關(guān)注的業(yè)務(wù),提煉角色高頻使用的功能,設(shè)計(jì)快捷功能區(qū)。
4)規(guī)范的排版設(shè)計(jì)
選取好功能和數(shù)據(jù)后,開(kāi)始針對(duì)內(nèi)容設(shè)計(jì)排版樣式,B端產(chǎn)品首頁(yè)通常采用卡片式布局。卡片式布局的優(yōu)勢(shì)是可以方便排列組合,多種類(lèi)型的內(nèi)容。
2. 設(shè)計(jì)思路
在設(shè)計(jì)首頁(yè)的時(shí)候,需要把各種展示內(nèi)容以合理的方式呈現(xiàn),考驗(yàn)的是一個(gè)人從不同角度去分析、組合信息內(nèi)容的能力。
通過(guò)上述分析,在后臺(tái)首頁(yè)中,一般是由以下幾種類(lèi)型的模塊構(gòu)成首頁(yè),根據(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)行展開(kāi)分析提煉核心指標(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)。通過(guò)對(duì)數(shù)據(jù)的分析,從而統(tǒng)籌安排后續(xù)的工作。所以核心指標(biāo)即需要有及時(shí)性,又需要有統(tǒng)籌性。
常見(jiàn)的展示形式是統(tǒng)計(jì)卡:
業(yè)務(wù)變化及趨勢(shì)
- 場(chǎng)景:分析業(yè)務(wù)的趨勢(shì)情況
- 作用:可以了解業(yè)務(wù)在一定范圍內(nèi)的變化趨勢(shì)
通過(guò)對(duì)業(yè)務(wù)趨勢(shì)的分析,我們可以查看公司業(yè)務(wù)的連貫性。通常情況下,都是查看某一時(shí)間段內(nèi)的業(yè)務(wù)變化趨勢(shì)。
通過(guò)直觀的數(shù)據(jù)走勢(shì),我們可以有針對(duì)性的找出問(wèn)題,分析對(duì)策。通過(guò)對(duì)變化節(jié)點(diǎn)的觀察,再結(jié)合行業(yè)趨勢(shì)、公司實(shí)際運(yùn)營(yíng)狀態(tài),找出業(yè)務(wù)增長(zhǎng)的規(guī)律,發(fā)現(xiàn)業(yè)務(wù)減少的原因,為后續(xù)業(yè)務(wù)的開(kāi)展提供方向。
常見(jiàn)的展示形式是折線圖以及由折線圖衍生出的相關(guān)圖形:
另外對(duì)于核心數(shù)據(jù)指標(biāo)的變化情況通常用變化率或變化量直接展示:
業(yè)務(wù)分布
業(yè)務(wù)分布統(tǒng)計(jì):
- 場(chǎng)景:分析業(yè)務(wù)的分布情況
- 作用:可以了解業(yè)務(wù)的實(shí)際分布數(shù)據(jù)
通過(guò)對(duì)業(yè)務(wù)分布的分析,我們可以了解公司業(yè)務(wù)的分布情況。
通常情況下,可以按照渠道、業(yè)務(wù)線、來(lái)源這幾個(gè)維度進(jìn)行分析,通過(guò)對(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)提高。
常見(jiàn)的展現(xiàn)形式有柱狀圖、條形圖:
業(yè)務(wù)占比統(tǒng)計(jì):
- 場(chǎng)景:分析業(yè)務(wù)的占比情況。
- 作用:通過(guò)占比分析,可以了解每個(gè)維度的貢獻(xiàn)情況。
業(yè)務(wù)占比和上面的業(yè)務(wù)分布,都是查看現(xiàn)有業(yè)務(wù)的布局情況。
當(dāng)然了,兩者側(cè)重點(diǎn)有所不同:業(yè)務(wù)分布,主要是為未來(lái)布局做準(zhǔn)備;業(yè)務(wù)占比,主要是分析現(xiàn)有業(yè)務(wù)情況。所以,我們?cè)谶M(jìn)行數(shù)據(jù)分析的時(shí)候,需要結(jié)合分布和占比兩種方式,這樣才能得到全面的內(nèi)容。
常見(jiàn)的展現(xiàn)形式是餅狀圖:
地域分布統(tǒng)計(jì):
- 場(chǎng)景:分析業(yè)務(wù)的地域分布情況;
- 作用:通過(guò)區(qū)域數(shù)據(jù)分析,宏觀了解地區(qū)分布情況。
通過(guò)區(qū)域數(shù)據(jù)分析,宏觀了解地區(qū)分布情況:一來(lái)可以了解現(xiàn)有業(yè)務(wù)的實(shí)際數(shù)據(jù),二來(lái)可以幫助進(jìn)行戰(zhàn)略布局。
通常情況下,有地域分布的需求,都是需要進(jìn)行戰(zhàn)略布局的考慮。所以我們?cè)谠O(shè)計(jì)的時(shí)候,一般考慮的指標(biāo)就是銷(xiāo)量、人數(shù)、銷(xiāo)售額。
常見(jiàn)的展現(xiàn)形式是地圖:
業(yè)務(wù)轉(zhuǎn)化:
- 場(chǎng)景:分析業(yè)務(wù)的轉(zhuǎn)化情況。
- 作用:通過(guò)路徑分析,可以了解不同階段的轉(zhuǎn)化情況,針對(duì)異常路徑進(jìn)行優(yōu)化。
通過(guò)業(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)行客戶(hù)路徑分析。業(yè)務(wù)轉(zhuǎn)化圖表,能夠十分直觀的了解到是哪個(gè)環(huán)節(jié)出了問(wèn)題,這樣就更有針對(duì)性的提出優(yōu)化意見(jiàn)。
常見(jiàn)的展現(xiàn)形式是漏斗圖:
排行榜等其他數(shù)據(jù):排行榜展示前幾的對(duì)象,比如TOP10商品銷(xiāo)量/派送量等、TOP5輿情新聞。
排行榜展現(xiàn)形式一般是表格:
2)內(nèi)容模塊
內(nèi)容指的資訊、通知消息、公告等,這些內(nèi)容一般以列表的形式在首頁(yè)展示。資訊一般是作為協(xié)調(diào)版面的作用,本身的價(jià)值十分有限。通知消息和公告這類(lèi)重要信息,比較適合設(shè)計(jì)在導(dǎo)航欄上。
如果需要展示內(nèi)容的詳情,則才會(huì)考慮設(shè)計(jì)在首頁(yè)。
快捷工作臺(tái):是作為角色重要功能的簡(jiǎn)化版本,設(shè)計(jì)的目標(biāo)是讓用戶(hù)快速觸達(dá)功能和業(yè)務(wù),提升用戶(hù)的效率。該功能板塊需要根據(jù)角色的業(yè)務(wù)來(lái)進(jìn)行設(shè)計(jì),在該功能區(qū)中,不易設(shè)計(jì)過(guò)于復(fù)雜的功能,盡可能簡(jiǎn)化設(shè)計(jì)。
快捷工作臺(tái)的功能應(yīng)該都是角色高頻或日常使用的功能,比如CRM系統(tǒng)的今日回訪客服、OA的待審批內(nèi)容。主要類(lèi)型有待辦事項(xiàng),流程進(jìn)度等。
功能導(dǎo)航:如果系統(tǒng)功能較多時(shí),可以考慮在首頁(yè)上,展示一些重要或高頻使用功能的導(dǎo)航,作為導(dǎo)航欄的補(bǔ)充。設(shè)計(jì),比較適合圖標(biāo)的形式。
個(gè)人信息:是作為一小塊信息,展示登錄賬戶(hù)信息,或者賬戶(hù)主體信息。當(dāng)導(dǎo)航欄沒(méi)有空間留給標(biāo)識(shí)當(dāng)前登錄賬戶(hù)信息或者主體信息,但用戶(hù)又需要通過(guò)該信息進(jìn)行角色區(qū)別時(shí),可以在主頁(yè)上設(shè)計(jì)個(gè)人信息板塊。
三、后臺(tái)首頁(yè)展示
1. 客戶(hù)管理類(lèi)
2. 電商管理類(lèi)
3. 會(huì)員管理類(lèi)
4. 充值系統(tǒng)類(lèi)
5. 商戶(hù)系統(tǒng)類(lèi)
四、總結(jié)
首頁(yè)相當(dāng)于這個(gè)產(chǎn)品的臉面,后臺(tái)產(chǎn)品也不例外。后臺(tái)產(chǎn)品首頁(yè)設(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);以?xún)r(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ì)類(lèi)網(wǎng)站,積累設(shè)計(jì)素材,拓展設(shè)計(jì)思路。
作者:小吳產(chǎn)品記,個(gè)人微信:wuhong_377
本文由 @小吳產(chǎn)品記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
文章很好,可以推薦一些設(shè)計(jì)類(lèi)網(wǎng)站嗎
很有用 謝謝
超級(jí)干貨!非常具有參考價(jià)值,感謝作者大大分享??!
很棒啊
對(duì)于我這個(gè)產(chǎn)品小白來(lái)說(shuō),我個(gè)人覺(jué)得這篇寫(xiě)得挺基礎(chǔ)挺好的,剛好我要做公司業(yè)務(wù)系統(tǒng)的首頁(yè),看了這個(gè)有大致思路了,謝謝博主,嘿嘿。