編輯導(dǎo)讀：首頁作為用戶進(jìn)入產(chǎn)品的第一個(gè)體驗(yàn)頁面，曝光量最大，有幫助用戶留存和轉(zhuǎn)化的作用。本文作者體驗(yàn)了多款互聯(lián)網(wǎng)金融產(chǎn)品APP，并從中總結(jié)出了這些首頁設(shè)計(jì)的經(jīng)驗(yàn)，與你分享。

為了試圖分析互聯(lián)網(wǎng)金融產(chǎn)品APP首頁設(shè)計(jì)的模式和規(guī)則，從百余家產(chǎn)品中，挑選出16家行業(yè)代表性APP，通過本文帶大家一起解鎖金融產(chǎn)品APP首頁的構(gòu)成，從名稱、信息架構(gòu)、內(nèi)容排版布局、狀態(tài)、體驗(yàn)等角度剖析亮點(diǎn)與不足，歸納功能板塊交互狀態(tài)，并綜上結(jié)合核心業(yè)務(wù)板塊提出基于用戶體驗(yàn)的互聯(lián)網(wǎng)金融產(chǎn)品創(chuàng)新方案。

首頁作為用戶進(jìn)入產(chǎn)品的第一個(gè)體驗(yàn)頁面，是品牌文化曝光的最佳C位，同時(shí)扮演著獲取用戶留存和轉(zhuǎn)化的角色。首頁是諸多功能入口的合集，除了信息展示，更牽連著不同的業(yè)務(wù)線。對于金融產(chǎn)品而言，除了生產(chǎn)出口碑過硬的好股好基，深耕單屏用戶體驗(yàn)的產(chǎn)品設(shè)計(jì)更是一大趨勢。

一、首頁的常見樣式

首頁是什么樣子？如何基于業(yè)務(wù)核心板塊搭建布局？

1. 常規(guī)首頁

通常，首頁是全站信息的綜合載體，并穿插搭載其他一級頁面的重要模塊。

常見的核心板塊包括但不限于：

頂部欄｜我的資產(chǎn)｜核心icon｜營銷banner｜產(chǎn)品推介位｜資訊｜直播｜其他。

• A 類： 匯添富、螞蟻、廣發(fā)等6家APP，首頁內(nèi)容豐富而有序，在模塊劃分上，根據(jù)用戶瀏覽路徑將各業(yè)務(wù)按相關(guān)度依次排列，最大程度引導(dǎo)觸發(fā)購買行為
• B 類： 鵬華、中歐、好買等4家APP，側(cè)重利用黃金溝通點(diǎn)位創(chuàng)造直接營收，但基于用戶體驗(yàn)維度引導(dǎo)效率較低，從整體模塊劃分上部分以業(yè)務(wù)維度、部分以功能維度，聚合方式不夠緊密，有輕微割裂感。存在低效入口，缺乏KPI驅(qū)動(dòng)的調(diào)整和賽馬機(jī)制
• C 類： 天天、蛋卷、招商銀行等4家APP，在首頁模塊劃分上，清晰劃分出核心業(yè)務(wù)與次要核心業(yè)務(wù)，但功能入口過多，局部頁面信息承載量過大，跳出率高，易造成用戶“看不懂”、“找不到”

2. 交互式頂部欄【搜索/消息盒子/客服/用戶頭像/簽到】

搜索｜（智能/專屬）客服｜消息盒子｜切換｜掃一掃｜設(shè)置

• 搜索框狀態(tài)：全站跟隨，實(shí)時(shí)輪播更新
• 點(diǎn)擊進(jìn)入二級搜索頁，展示熱度話題和歷史記錄?？膳渲脽幔]｜新｜爆等標(biāo)簽
• 頂部導(dǎo)航欄的功能icon>3時(shí)，可利用溢出菜單將常用的功能整合并隱藏在“+”更多功能模塊中，簡化用戶層面上的交互過程

優(yōu)化方向：通過數(shù)據(jù)埋點(diǎn)獲取頂部容器點(diǎn)擊率較高的功能鍵，右置保留。并根據(jù)席克定律，功能鍵>2時(shí)，收納使用低頻和次要功能，有效避免頁面頭重腳輕的視覺效果。

3. 我的資產(chǎn)

頭部展示，根據(jù)用戶的登錄及資產(chǎn)狀態(tài)，切換對應(yīng)的可視化數(shù)據(jù)。

【非登錄態(tài)】展示品牌營銷、產(chǎn)品推薦等文案，引導(dǎo)用戶注冊/登錄，并使用錢包類產(chǎn)品下單。

【登錄態(tài)】展示總資產(chǎn)、昨日收益，有平臺(tái)錢包類產(chǎn)品時(shí)，同步展示錢包資產(chǎn)及（昨日/累積）收益。

• 優(yōu)化方向1：錢包布局與用戶瀏覽維度不符——優(yōu)化品牌入口，提高信息層級布局；
• 優(yōu)化方向2：過度依賴促銷，特色功能不突出——明確利益點(diǎn)，加強(qiáng)核心品類引導(dǎo)，分時(shí)段固定頭部營銷banner，分狀態(tài)集中展示資產(chǎn)數(shù)據(jù)

4. 功能icon（4-8個(gè)）

根據(jù)移動(dòng)應(yīng)用的交互設(shè)計(jì)規(guī)律—“7±2法則”，懸浮卡片上可容納5-9個(gè)功能圖標(biāo)。

根據(jù)調(diào)研統(tǒng)計(jì)顯示核心功能icon個(gè)數(shù)如下：

• 4位icon ? 好買
• 5位icon ? 南方｜富國富｜嘉實(shí)｜蛋卷｜博時(shí)｜陸金所
• 8位icon ? 螞蟻｜匯添富｜中歐錢滾滾｜鵬華
• 10位icon ?廣發(fā)｜招商銀行

icon位>5時(shí)，可添加“查看更多”，根據(jù)核心功能要素與相關(guān)性對金剛區(qū)懸浮卡片分層設(shè)計(jì)，置頂核心icon，將剩余次級功能icon排列兩行。

• 核心功能?? 錢包｜買基金｜定投｜指數(shù)｜高端｜固收+等
• 次級功能?? 社區(qū)｜自選｜排行｜積分商城｜直播等
• 更多?養(yǎng)老｜模擬組合｜生活服務(wù)｜分享｜關(guān)注等

5. 產(chǎn)品推薦位

常用卡片展示，以單個(gè)產(chǎn)品或產(chǎn)品組合為主。產(chǎn)品信息具體包括：產(chǎn)品名稱、1-3個(gè)關(guān)鍵詞、收益率、回撤率、營銷文案、發(fā)售狀態(tài)等。

【問題點(diǎn)】打撈主推商品鋪設(shè)在首頁，通過首頁一鍵直達(dá)購買頁，雖然縮短了購買路徑，反而會(huì)導(dǎo)致用戶下單幾率降低。

優(yōu)化方向：主推產(chǎn)品的點(diǎn)擊向產(chǎn)品詳情頁引流，提供定投/轉(zhuǎn)購/購買等多種買入方式。

6. 直播板塊

類比與電商類帶貨直播，除了提升產(chǎn)品轉(zhuǎn)化率，更應(yīng)注重專業(yè)的投后陪伴，有利于更好地平衡觸達(dá)率和用戶體驗(yàn)。

【問題點(diǎn)】首頁彈窗式直播入口設(shè)計(jì)，會(huì)造成對用戶的強(qiáng)制打擾，應(yīng)制定合理的廣告式彈窗規(guī)則，盡量避免同時(shí)段每次加載頁面后，跳出不同的彈窗，應(yīng)提供多個(gè)活動(dòng)入口，防止用戶走失。

• 優(yōu)化方向1：可基于費(fèi)茨定律，在界面設(shè)計(jì)中的擴(kuò)大可點(diǎn)擊熱區(qū)域范圍，以便用戶獲取信息的同時(shí)點(diǎn)擊進(jìn)入獲取更多相關(guān)推薦
• 優(yōu)化方向2：減輕用戶對產(chǎn)品認(rèn)知負(fù)擔(dān)，依托投后陪伴建立深層互信，滿足對金融產(chǎn)品的深度定向社交需求，讓用戶產(chǎn)生依賴

7. 資訊板塊

【問題點(diǎn)】：輪播狀態(tài)，信息完整度較差且有字符限制，不利于用戶短時(shí)間內(nèi)讀取關(guān)鍵或完整信息，且缺少二級信息排序（按時(shí)間/熱度等）列表。

優(yōu)化方向：話題標(biāo)簽分類，同步刷新實(shí)時(shí)熱點(diǎn)，保留時(shí)間限制24h。

綜上結(jié)合調(diào)研，基于核心業(yè)務(wù)驅(qū)動(dòng)（錢包），以首頁為例，撬動(dòng)核心鏈路（充值錢包、使用錢包購買產(chǎn)品）進(jìn)行優(yōu)化。

二、業(yè)務(wù)需求

增強(qiáng)錢包功能曝光，提升轉(zhuǎn)化率。優(yōu)化核心產(chǎn)品的點(diǎn)擊路徑，結(jié)合登錄狀態(tài)引導(dǎo)充值下單，并依托產(chǎn)品運(yùn)營側(cè)吸流量，帶動(dòng)數(shù)據(jù)增長。通過“錢包”的高頻屬性有效驅(qū)動(dòng)DAU和黏性的提升，為其他核心業(yè)務(wù)反哺流量

直播業(yè)務(wù)量數(shù)據(jù)增量，新產(chǎn)品即將進(jìn)行的業(yè)務(wù)（增設(shè)直播板塊）改版涉及核心鏈路（充值錢包并下單），拓展業(yè)務(wù)形態(tài)布局并支持后臺(tái)靈活配置

三、首頁錢包功能優(yōu)化設(shè)計(jì)

利用格式塔理論中的接近法則（親密性），在設(shè)計(jì)時(shí)，將推薦信息（錢包）和重點(diǎn)信息（功能icon）在視覺上，進(jìn)行同類分組和多級分層的設(shè)計(jì)，使用圖標(biāo)、卡片等方法將不同功能層級分組。搶占用戶視覺聚焦重心的同時(shí)，讓各信息組之間的關(guān)系顯而易見。

• 【未登錄態(tài)】固定展示頭部，引導(dǎo)登錄并使用錢包下單
• 【登錄態(tài)】判斷條件：總資產(chǎn)（直銷+代銷）是否為0
• 是則繼續(xù)展示錢包類產(chǎn)品推薦等文案，引導(dǎo)用戶觸發(fā)交易流程
• 否則展示總資產(chǎn)，同步展示錢包資產(chǎn)及（昨日/累積）收益

1. 直播板塊

根據(jù)項(xiàng)目優(yōu)先級及業(yè)務(wù)流量分配，優(yōu)先展示直播板塊。外露完整活動(dòng)卡位，組件化卡片信息集中展示活動(dòng)熱度｜產(chǎn)品收益率等數(shù)據(jù)，打造差異化賣點(diǎn)。

點(diǎn)擊跳轉(zhuǎn)至活動(dòng)中心，讓用戶使用更少的點(diǎn)擊獲取更多的活動(dòng)信息。

1. 預(yù)留1-3個(gè)營銷卡位，自動(dòng)輪播展示，減輕用戶在縱向?yàn)g覽信息時(shí)左右滑動(dòng)的操作，保持頁面信息量垂直加載，營造淺層沉浸式體驗(yàn)
2. 按欄目劃分直播入口，為用戶提供更多垂直內(nèi)容選擇，播種興趣，贏得用戶對更多欄目的注意力，產(chǎn)生更多的點(diǎn)擊
3. 在直播間內(nèi)精準(zhǔn)化鋪設(shè)同類產(chǎn)品，以更少的點(diǎn)擊完成更多的購買。優(yōu)化已購買產(chǎn)品標(biāo)簽，催生復(fù)購率

2. 產(chǎn)品推介位

產(chǎn)品推介位以單個(gè)產(chǎn)品和產(chǎn)品組合為例，支持匹配雙卡位（2-10個(gè)產(chǎn)品）或單卡位（1-5個(gè)產(chǎn)品）兩種布局。

布局方案一：

布局方案二：

3. 行業(yè)資訊

根據(jù)資訊篇幅配置Tag或根據(jù)欄目讀取熱度標(biāo)簽自動(dòng)展示，支持點(diǎn)擊后進(jìn)行點(diǎn)贊和瀏覽。

對于投顧類資訊，可在當(dāng)前頁配置觀點(diǎn)互動(dòng)區(qū)域，如產(chǎn)品PK或投資決策等。

四、總結(jié)

首先，依據(jù)流量分發(fā)，確定業(yè)務(wù)線和功能板塊布局，交互是承載半條運(yùn)營的產(chǎn)品經(jīng)理。

產(chǎn)品首頁承載著公司品牌形象，應(yīng)明確針對的客群后輸出思考與設(shè)計(jì)，并制定關(guān)鍵KPI（點(diǎn)擊次數(shù)/跳出率、到達(dá)率／訪問量、點(diǎn)擊價(jià)值、停留時(shí)長、瀏覽深度等），定期追蹤數(shù)據(jù)，通過灰度測試檢驗(yàn)關(guān)鍵環(huán)節(jié)是否形成體驗(yàn)閉環(huán)。

往往，在新產(chǎn)品或改版設(shè)計(jì)中，前期需要深度剖析競品、提煉UED體驗(yàn)數(shù)據(jù)、梳理業(yè)務(wù)層級并輸出有效的PRD，使真實(shí)需求鏈接交互，確保設(shè)計(jì)觸達(dá)用戶。

改版時(shí)，應(yīng)延續(xù)用戶習(xí)慣保留部分核心板塊設(shè)計(jì)，且新方案更需理論依據(jù)或邏輯支撐，決策時(shí)應(yīng)盡量避免“這個(gè)放在上面好像好XX”，“我覺得這個(gè)XX”，“領(lǐng)導(dǎo)喜歡”除外。

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

題圖來自Unsplash，基于CC0協(xié)議