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

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

一、項目背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

五、設(shè)計參考

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

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

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

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

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

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

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

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

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

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

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

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

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

方案一：

方案二：

總結(jié)

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

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