一般用戶在登錄后臺(tái)管理系統(tǒng)后，后臺(tái)首頁(yè)就成為了用戶與產(chǎn)品交互的第一個(gè)頁(yè)面，這某種程度上也凸顯了這一頁(yè)面的重要性。那么，后臺(tái)管理系統(tǒng)的首頁(yè)設(shè)計(jì)可以遵循哪些策略？本文作者結(jié)合實(shí)戰(zhàn)項(xiàng)目發(fā)表了他的想法，一起來(lái)看看吧。

很久沒(méi)有更新文章了，一方面文章選題困難，公眾號(hào)的閱讀量真是有點(diǎn)慘不忍睹，寫(xiě)作的動(dòng)力有所下降。另一方面工作確實(shí)比較忙，時(shí)間精力有限，最近參加了多個(gè)工作項(xiàng)目一直在加班。

今天總結(jié)下項(xiàng)目過(guò)程中，關(guān)于后臺(tái)管理系統(tǒng)首頁(yè)設(shè)計(jì)引發(fā)的一些思考。

主要的內(nèi)容包括：

1. 后臺(tái)首頁(yè)的作用；
2. 首頁(yè)的設(shè)計(jì)方向；
3. 首頁(yè)內(nèi)容的思考。

一、后臺(tái)首頁(yè)的作用

后臺(tái)首頁(yè)是用戶登錄后，與產(chǎn)品交互的第一個(gè)頁(yè)面，信息內(nèi)容非常重要，作用也非常明顯。一方面可以幫助用戶宏觀了解系統(tǒng)的整體運(yùn)行狀態(tài)，洞察業(yè)務(wù)問(wèn)題。另一方面可以幫助用戶快速處理業(yè)務(wù)問(wèn)題，不需要到專(zhuān)門(mén)的功能頁(yè)面操作，縮短用戶的操作路徑。

后臺(tái)首頁(yè)需要依托整個(gè)產(chǎn)品的功能體系，根據(jù)用戶角色的職能、權(quán)限、業(yè)務(wù)范圍，提取關(guān)鍵的用戶關(guān)心的業(yè)務(wù)功能點(diǎn)搭建頁(yè)面內(nèi)容。所以一般是在業(yè)務(wù)功能完成之后再進(jìn)行首頁(yè)設(shè)計(jì)。這就要求產(chǎn)品經(jīng)理能夠從全局視角理解用戶和場(chǎng)景，才能做出有效的設(shè)計(jì)方案。

另外首頁(yè)不屬于具體的業(yè)務(wù)領(lǐng)域，所以一般不會(huì)安排固定的產(chǎn)品經(jīng)理，而是由產(chǎn)品經(jīng)理兼任。如果產(chǎn)品設(shè)計(jì)沒(méi)有整體規(guī)劃，首頁(yè)就容易被忽略，成為「三不管」地帶。

二、首頁(yè)設(shè)計(jì)的方向

根據(jù)以往的設(shè)計(jì)經(jīng)驗(yàn)，我總結(jié)了以下四點(diǎn)：

1. 內(nèi)容與用戶角色

首頁(yè)設(shè)計(jì)要求產(chǎn)品經(jīng)理對(duì)用戶角色的分類(lèi)、業(yè)務(wù)職能有比較深入的了解，否則產(chǎn)品設(shè)計(jì)就可能變成內(nèi)容堆砌。

通常后臺(tái)系統(tǒng)需要面向管理層和執(zhí)行層兩類(lèi)用戶，他們對(duì)于信息需求存在比較大的差異。管理層更關(guān)注宏觀層面的統(tǒng)計(jì)信息，方便了解業(yè)務(wù)動(dòng)態(tài)，從而制定工作決策等，所以各類(lèi)可視化圖表就成為首頁(yè)重要的內(nèi)容組成。

對(duì)于執(zhí)行層用戶，主要是完成具體的工作任務(wù)，所以更加關(guān)注明細(xì)數(shù)據(jù)。除此之外，適當(dāng)?shù)卦黾右恍┙y(tǒng)計(jì)數(shù)據(jù)，可以更全面了解系統(tǒng)狀態(tài)，也便于對(duì)上匯報(bào)，減少人工統(tǒng)計(jì)的工作量。

B 端產(chǎn)品了解用戶和場(chǎng)景并不容易，如果只靠“猜測(cè)”做設(shè)計(jì)，就會(huì)發(fā)現(xiàn)首頁(yè)設(shè)計(jì)有很多種可能，怎么做似乎都對(duì)，怎么做似乎都不對(duì)。而且參與的人越多，想法也會(huì)越多。

所以在項(xiàng)目中，需要盡可能地收集用戶場(chǎng)景信息加以分析完成設(shè)計(jì)，即使存在一部分“猜測(cè)”信息，也需要能夠自圓其說(shuō)，才能更好的推進(jìn)產(chǎn)品設(shè)計(jì)落地。

2. 場(chǎng)景/主題化

對(duì)于小的業(yè)務(wù)系統(tǒng)，單獨(dú)的一個(gè)頁(yè)面就可以涵蓋所有的業(yè)務(wù)信息，內(nèi)容也會(huì)比較清晰簡(jiǎn)單。

對(duì)于比較大的業(yè)務(wù)系統(tǒng)，首頁(yè)包含的消息會(huì)比較多，例如阿里云、騰訊云等產(chǎn)品，一個(gè)頁(yè)面內(nèi)容無(wú)法承載所有的信息。因此需要根據(jù)場(chǎng)景/主題拆分首頁(yè)內(nèi)容，便于用戶有目標(biāo)地快速查看信息。比如阿里云采用的是資源管理、安全管理、成本管理等主題去劃分首頁(yè)內(nèi)容。

3. 實(shí)用性

1）串聯(lián)內(nèi)容，縮短路徑

某些場(chǎng)景下，首頁(yè)要滿足用戶快速處理業(yè)務(wù)工作的需求，例如待辦事項(xiàng)，審批操作等，通過(guò)明細(xì)列表的展示，結(jié)合抽屜等詳情信息展示，用戶可以在首頁(yè)直接處理工作任務(wù)，無(wú)需進(jìn)入到功能頁(yè)面。

「常用功能」也是首頁(yè)的常見(jiàn)組件，類(lèi)似操作系統(tǒng)桌面的快捷方式一樣。可以將一些二級(jí)甚至三級(jí)功能作為常用功能放在首頁(yè)中，用戶不需要通過(guò)菜單逐級(jí)點(diǎn)擊，即可進(jìn)入功能頁(yè)面，對(duì)縮短用戶操作路徑也有很大幫助。

2）高頻常用功能信息聚合

首頁(yè)的價(jià)值在于幫助用戶簡(jiǎn)單、高效的認(rèn)知系統(tǒng)，是高頻常用功能的信息聚合。因此需要盡量減少花哨、不實(shí)用、看似高大上的功能，或者改變展示形式，保證重要信息的優(yōu)先展示。

有些 B 端產(chǎn)品的門(mén)檻比較高，為了降低認(rèn)知成本，于是有人希望在首頁(yè)中增加系統(tǒng)介紹、系統(tǒng)架構(gòu)圖的形式來(lái)展示產(chǎn)品的功能流程，在產(chǎn)品演示是可以更好的讓用戶理解產(chǎn)品功能。

這些本來(lái)應(yīng)該是在 PPT 中展示的信息，卻要放到首頁(yè)中展示?？此瓶犰诺囊粡垐D，實(shí)際上在應(yīng)用階段對(duì)用戶的工作沒(méi)有任何幫助。因?yàn)橛脩舾静魂P(guān)心你的系統(tǒng)架構(gòu)是什么，需要的是產(chǎn)品幫助他解決工作中的問(wèn)題，帶來(lái)的效率提升。

即使用戶需要了解這些信息，也不是每天打開(kāi)首頁(yè)就要一眼看到，可以采用其他的呈現(xiàn)方式。比如用戶引導(dǎo)，或者與業(yè)務(wù)信息關(guān)聯(lián)，既可以呈現(xiàn)出業(yè)務(wù)流程，也可以展示業(yè)務(wù)信息，又或者首頁(yè)增加入口、引導(dǎo)在幫助中心查看。

4. 定制化

B 端產(chǎn)品業(yè)務(wù)功能是面向用戶角色的，同一角色的用戶具有相同的工作任務(wù)。但是首頁(yè)則有所不同，同一類(lèi)角色的不同用戶，關(guān)注點(diǎn)也不完全相同。尤其是業(yè)務(wù)系統(tǒng)內(nèi)容較多時(shí)，首頁(yè)內(nèi)容可定制就成為了滿足不同用戶信息需求的方式。

當(dāng)然系統(tǒng)的定制化并不是讓用戶從零定制，而是在系統(tǒng)初始內(nèi)容基礎(chǔ)上，重新組織頁(yè)面內(nèi)容、調(diào)整頁(yè)面布局等。否則定制化反而會(huì)帶給用戶更差的體驗(yàn)。

三、首頁(yè)內(nèi)容應(yīng)該追求簡(jiǎn)潔還是豐富呢？

在項(xiàng)目設(shè)計(jì)中，就碰到了這個(gè)問(wèn)題。有同事認(rèn)為首頁(yè)應(yīng)該簡(jiǎn)單點(diǎn)，避免過(guò)多的信息量增加用戶的學(xué)習(xí)成本。

當(dāng)然這個(gè)問(wèn)題需要根據(jù)產(chǎn)品定位具體分析。不過(guò)總的來(lái)說(shuō)，我個(gè)人認(rèn)為首頁(yè)應(yīng)該豐富一些。

首頁(yè)是信息聚合頁(yè)面，天然就會(huì)有較多的信息內(nèi)容，用戶需要通過(guò)信息傳遞了解系統(tǒng)的狀態(tài)和變化，人為的過(guò)濾掉內(nèi)容后會(huì)影響信息的全面性。

其次用戶有信息選擇權(quán)，通過(guò)一定時(shí)間的摸索，可以形成自己的信息查看軌跡，或者個(gè)性化定制首頁(yè)內(nèi)容過(guò)濾掉工作中冗余的信息。

而且B 端產(chǎn)品經(jīng)過(guò)多年的發(fā)展，單從布局和表現(xiàn)形式上看，首頁(yè)已經(jīng)有比較成熟的設(shè)計(jì)模式了，大多數(shù)企業(yè)用戶也形成了統(tǒng)一的認(rèn)知和習(xí)慣。卡片風(fēng)格是首頁(yè)最常見(jiàn)的展現(xiàn)形式，卡片可以讓頁(yè)面分割更加清晰，方便信息讀取，有助于弱化信息量帶來(lái)的復(fù)雜感。即使不采用卡片分割， 可以通過(guò)間距、標(biāo)題等引導(dǎo)用戶視線，劃分頁(yè)面內(nèi)容。

四、總結(jié)

簡(jiǎn)單總結(jié)下：

1. 首頁(yè)考慮的設(shè)計(jì)因素比較多，每種用戶角色可能會(huì)有不同的需求，需要針對(duì)性的設(shè)計(jì)，而業(yè)務(wù)功能的用戶角色更加明確；
2. 首頁(yè)設(shè)計(jì)需要對(duì)系統(tǒng)有全面了解，業(yè)務(wù)功能則比較聚焦；
3. 首頁(yè)是系統(tǒng)第一個(gè)頁(yè)面，會(huì)受到更高的關(guān)注度，往往設(shè)計(jì)分歧也會(huì)比較大；產(chǎn)品設(shè)計(jì)需要做深入的分析，故事性要求也會(huì)更高；否則被噴和被 Pass的可能性會(huì)非常大；
4. 首頁(yè)設(shè)計(jì)的內(nèi)容需要注重實(shí)用性，避免各種信息的無(wú)效堆砌。