當(dāng)接到系統(tǒng)首頁(yè)的設(shè)計(jì)時(shí)，要怎么開(kāi)始準(zhǔn)備與入手呢？作者分享了自己在這個(gè)項(xiàng)目中自己獨(dú)立承擔(dān)的第一個(gè)產(chǎn)品模塊（系統(tǒng)首頁(yè)）的設(shè)計(jì)歷程，希望對(duì)你有所幫助。

轉(zhuǎn)眼間自己轉(zhuǎn)崗產(chǎn)品經(jīng)理加入新公司團(tuán)隊(duì)已過(guò)去4個(gè)多月，除了支撐公司內(nèi)部幾個(gè)IT流程日常運(yùn)營(yíng)基礎(chǔ)工作外，還有幸參與到團(tuán)隊(duì)的公司級(jí)變革項(xiàng)目（合同管理平臺(tái)項(xiàng)目）。本文就來(lái)分享一下在這個(gè)項(xiàng)目中自己獨(dú)立承擔(dān)的第一個(gè)產(chǎn)品模塊（系統(tǒng)首頁(yè)）的設(shè)計(jì)歷程。

一、項(xiàng)目背景

首先簡(jiǎn)單的介紹一下項(xiàng)目背景：基于“構(gòu)建一體化合同管理平臺(tái)，實(shí)現(xiàn)集成化、數(shù)據(jù)化、智能化管理是集團(tuán)性企業(yè)數(shù)字化轉(zhuǎn)型的趨勢(shì)”的外部環(huán)境及“對(duì)外打造賦能平臺(tái)，對(duì)內(nèi)發(fā)展服務(wù)中臺(tái)，構(gòu)建前-中-后臺(tái)敏捷組織運(yùn)作模式，從傳統(tǒng)的運(yùn)營(yíng)方式向平臺(tái)化的運(yùn)營(yíng)轉(zhuǎn)變”的戰(zhàn)略需求，并結(jié)合內(nèi)部多個(gè)業(yè)務(wù)部門均有建設(shè)合同管理平臺(tái)的意向的強(qiáng)烈內(nèi)需的背景下，公司籌建“企業(yè)合同管理平臺(tái)”項(xiàng)目。

通過(guò)“企業(yè)合同管理平臺(tái)”項(xiàng)目，建立合同管理生態(tài)體系，整合合同管理的上下游場(chǎng)景，建設(shè)支撐多租戶、多語(yǔ)言體系的合同管理平臺(tái)系統(tǒng)，實(shí)現(xiàn)集團(tuán)統(tǒng)一規(guī)劃、子公司分層管控，平臺(tái)基礎(chǔ)設(shè)施共享化，為業(yè)務(wù)、法務(wù)、財(cái)務(wù)、稅務(wù)、職能等部門提供企業(yè)合同全周期管理，實(shí)現(xiàn)業(yè)法財(cái)稅合規(guī)管控的融合，提升合同的數(shù)字化管理水平，助力業(yè)務(wù)合規(guī)高效運(yùn)營(yíng)，達(dá)到降本增效的目的。

二、B端系統(tǒng)首頁(yè)是什么

在做產(chǎn)品設(shè)計(jì)之前先解一下什么是B端系統(tǒng)的首頁(yè)：B端系統(tǒng)的首頁(yè)相當(dāng)于這個(gè)產(chǎn)品的臉面，用戶登錄系統(tǒng)后，首先看到的是系統(tǒng)的首頁(yè)，才會(huì)看到其他的系統(tǒng)功能，是用戶與產(chǎn)品交互的第一個(gè)頁(yè)面，信息內(nèi)容非常重要，作用也非常明顯。

一方面可以幫助用戶宏觀了解系統(tǒng)的整體運(yùn)行狀態(tài)，洞察業(yè)務(wù)問(wèn)題；另一方面可以幫助用戶快速處理業(yè)務(wù)問(wèn)題，不需要到專門的功能頁(yè)面去操作，從而縮短了用戶的操作路徑（例如待辦事項(xiàng)，審批操作等，通過(guò)明細(xì)列表的展示，用戶可以在系統(tǒng)首頁(yè)直接處理工作任務(wù)，無(wú)需進(jìn)入到具體的功能頁(yè)面再去處理）。

B端業(yè)務(wù)系統(tǒng)的特點(diǎn)之一便是涉及組織角色多，且每個(gè)角色的崗位權(quán)責(zé)不同，系統(tǒng)首頁(yè)需要依托整個(gè)產(chǎn)品的功能體系，根據(jù)用戶角色的職能、權(quán)限、業(yè)務(wù)范圍，提取關(guān)鍵的用戶所關(guān)心的業(yè)務(wù)功能點(diǎn)搭建頁(yè)面內(nèi)容。

所以一般是在業(yè)務(wù)功能完成之后再進(jìn)行系統(tǒng)首頁(yè)設(shè)計(jì)（在我參與項(xiàng)目時(shí)團(tuán)隊(duì)其他成員已經(jīng)跟業(yè)務(wù)確認(rèn)了項(xiàng)目一期所有功能內(nèi)容），這就要求產(chǎn)品經(jīng)理能夠從全局視角理解用戶角色和業(yè)務(wù)場(chǎng)景，才能做出有效的設(shè)計(jì)方案，否則產(chǎn)品設(shè)計(jì)就可能變成內(nèi)容堆砌。

對(duì)于B端業(yè)務(wù)系統(tǒng)，系統(tǒng)首頁(yè)一般會(huì)給兩大類角色看，分別是管理層（領(lǐng)導(dǎo)）和執(zhí)行層（普通員工），管理層更關(guān)注宏觀層面的統(tǒng)計(jì)信息，方便了解業(yè)務(wù)全貌，從而制定戰(zhàn)略決策等，所以各類可視化圖表就成為系統(tǒng)首頁(yè)重要的內(nèi)容組成；對(duì)于執(zhí)行層，主要是完成具體的個(gè)人工作任務(wù)，所以更加關(guān)注個(gè)人相關(guān)明細(xì)數(shù)據(jù)。系統(tǒng)首頁(yè)的價(jià)值在于幫助用戶簡(jiǎn)單、高效的認(rèn)知產(chǎn)品，是高頻常用功能的信息聚合。

三、如何設(shè)計(jì)B端系統(tǒng)首頁(yè)

在初步了解了B端系統(tǒng)首頁(yè)之后又如何開(kāi)展產(chǎn)品設(shè)計(jì)呢？在設(shè)計(jì)系統(tǒng)首頁(yè)之前，需要先完成業(yè)務(wù)功能的架構(gòu)設(shè)計(jì)，以及系統(tǒng)的導(dǎo)航欄設(shè)計(jì)，根據(jù)整個(gè)產(chǎn)品的架構(gòu)明確系統(tǒng)首頁(yè)的核心需求。

關(guān)于系統(tǒng)首頁(yè)內(nèi)容從重要信息觸達(dá)的角度分析，可以展示某些重要內(nèi)容信息；從產(chǎn)品門面價(jià)值的角度分析，可以展示某些重要數(shù)據(jù)；從產(chǎn)品業(yè)務(wù)架構(gòu)的角度分析，可以作為導(dǎo)航欄的補(bǔ)充；從產(chǎn)品工作效率的角度分析，可以作為個(gè)人工作臺(tái)。

再結(jié)合用戶角色和業(yè)務(wù)場(chǎng)景敲定首頁(yè)的展示內(nèi)容，優(yōu)先選擇所有角色通用且重要的內(nèi)容、高度關(guān)注的數(shù)據(jù)，聚焦用戶角色高度關(guān)注的業(yè)務(wù)場(chǎng)景，提煉角色高頻使用的功能。再選取好業(yè)務(wù)功能和業(yè)務(wù)數(shù)據(jù)后，開(kāi)始針對(duì)內(nèi)容設(shè)計(jì)系統(tǒng)首頁(yè)的排版樣式，通常采用卡片式布局，可以方便排列組合多種類型的內(nèi)容。

四、B端系統(tǒng)首頁(yè)的內(nèi)容

那么B端系統(tǒng)首頁(yè)又有哪些內(nèi)容呢？

1、數(shù)據(jù)展示模塊：可以查看系統(tǒng)業(yè)務(wù)的核心指標(biāo)，幫助用戶快速了解核心業(yè)務(wù)指標(biāo)，通過(guò)對(duì)數(shù)據(jù)的分析，從而統(tǒng)籌安排后續(xù)的工作。

2、內(nèi)容展示模塊：系統(tǒng)資訊、系統(tǒng)公告、系統(tǒng)知識(shí)等，這些內(nèi)容一般以列表的形式展示，幫助用戶了解系統(tǒng)相關(guān)內(nèi)容。

3、快捷功能模塊：如果系統(tǒng)功能較多時(shí)，展示一些重要或高頻使用功能，幫助用戶快速觸達(dá)。

4、待辦工作臺(tái)模塊：與企業(yè)OA待辦流程打通，幫助用戶快速處理業(yè)務(wù)問(wèn)題，不需要到專門的功能頁(yè)面去操作，從而縮短用戶的操作路徑。

5、運(yùn)營(yíng)模塊：系統(tǒng)宣傳Banner輪播以及用戶個(gè)人信息展示（如系統(tǒng)問(wèn)候語(yǔ)、用戶姓名等）。

五、設(shè)計(jì)參考

接下來(lái)要做的就是去看一些業(yè)界的相關(guān)產(chǎn)品的設(shè)計(jì)參考激發(fā)自己的設(shè)計(jì)靈感：

1. 合同管理平臺(tái)類產(chǎn)品-泛微今承達(dá)（全程數(shù)字化合同管理系統(tǒng)）

個(gè)性化崗位合同門戶：所有合同按角色統(tǒng)一推送，不再依靠人找事，提升合同管理整體效率。

合同經(jīng)辦人：核心關(guān)注如何便捷地發(fā)起合同，能夠跟蹤發(fā)起合同的審批情況，合同執(zhí)行過(guò)程中有新的信息能夠及時(shí)獲取。

業(yè)務(wù)部門領(lǐng)導(dǎo)：核心關(guān)注如何提升審批效率，條線合同以及收付款的執(zhí)行情況和數(shù)據(jù)，能夠追蹤高風(fēng)險(xiǎn)或重要合同的具體進(jìn)展。

法務(wù)部門：核心關(guān)注合同文本快速審核、合同規(guī)則合規(guī)檢查，合同風(fēng)險(xiǎn)主動(dòng)預(yù)警，合同模板庫(kù)、條款庫(kù)是否需要更新。

財(cái)務(wù)部門：核心關(guān)注合同商務(wù)條款的便捷審核，收付款審批，財(cái)務(wù)合規(guī)要求管控，銷售合同的收款發(fā)布和業(yè)績(jī)結(jié)算，采購(gòu)合同的收票管理和成本核算。

高層領(lǐng)導(dǎo)門戶：核心關(guān)注合同反映出的業(yè)績(jī)?cè)鲩L(zhǎng)情況，各類型合同業(yè)務(wù)分布情況，高成本、高風(fēng)險(xiǎn)合同的處置情況。

2. 其他B端系統(tǒng)首頁(yè)設(shè)計(jì)參考

3. 公司內(nèi)部的一些系統(tǒng)首頁(yè)設(shè)計(jì)參考

這里涉及到信息安全問(wèn)題就不截圖展示了，想跟大家說(shuō)的點(diǎn)在于這塊的參考意義也很大，畢竟是經(jīng)過(guò)公司領(lǐng)導(dǎo)（甚至就是你現(xiàn)在的領(lǐng)導(dǎo)）評(píng)審過(guò)才上線的，所以向它們靠近后面產(chǎn)品設(shè)計(jì)評(píng)審?fù)ㄟ^(guò)的概率會(huì)大大增加。但不代表追求刻意模仿，停止創(chuàng)新，畢竟有些系統(tǒng)也是很多年前的產(chǎn)品了，無(wú)論是設(shè)計(jì)風(fēng)格還是設(shè)計(jì)審美也會(huì)落后于當(dāng)前版本的要求。

六、產(chǎn)品設(shè)計(jì)

在分析完業(yè)界同類產(chǎn)品后開(kāi)始輸出自己的設(shè)計(jì)方案：首先跟業(yè)務(wù)方經(jīng)過(guò)評(píng)審確認(rèn)了首頁(yè)的內(nèi)容有哪些（Banner、快捷入口、待辦、通知公告、合同評(píng)審知識(shí)、合同規(guī)章制度、法務(wù)支持），然后輸出了兩個(gè)版本方案（方案一、方案二）經(jīng)內(nèi)部IT評(píng)審、項(xiàng)目組評(píng)審、用戶評(píng)審后確認(rèn)了最終版本（方案2）。因?yàn)槭菑?到1的自研新產(chǎn)品，所以還沒(méi)有數(shù)據(jù)統(tǒng)計(jì)相關(guān)內(nèi)容，這也是后期產(chǎn)品迭代首頁(yè)優(yōu)化的一個(gè)方向。

方案一：

方案二：

總結(jié)

• B端系統(tǒng)首頁(yè)有要符合用戶需求和產(chǎn)品定位；
• B端系統(tǒng)首頁(yè)設(shè)計(jì)很關(guān)鍵，是用戶了解和使用產(chǎn)品的第一觸點(diǎn)，設(shè)計(jì)的好壞直接影響到用戶對(duì)產(chǎn)品的認(rèn)知和使用；
• B端系統(tǒng)首頁(yè)設(shè)計(jì)沒(méi)有具體的用戶需求，需要產(chǎn)品設(shè)計(jì)師根據(jù)自己的經(jīng)驗(yàn)、對(duì)用戶業(yè)務(wù)場(chǎng)景的理解以及競(jìng)品分析挖掘，歸納出產(chǎn)品需求；
• 產(chǎn)品經(jīng)理需要能夠?qū)κ醉?yè)的需求和內(nèi)容做出取舍，否則可能就會(huì)變成雜貨鋪，堆積了各種信息，雜亂無(wú)章；

后面還會(huì)根據(jù)自己的實(shí)際工作經(jīng)歷，持續(xù)分享B端產(chǎn)品經(jīng)理成長(zhǎng)之旅相關(guān)內(nèi)容，感興趣的朋友歡迎加關(guān)注評(píng)論交流，大家一起進(jìn)步前行。最后祝大家新年快樂(lè)！謝謝！