體驗了100個金融APP,原來首頁的套路是…

23 評論 25925 瀏覽 258 收藏 15 分鐘

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

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

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

一、首頁的常見樣式

首頁是什么樣子?如何基于業(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è)重利用黃金溝通點位創(chuàng)造直接營收,但基于用戶體驗維度引導(dǎo)效率較低,從整體模塊劃分上部分以業(yè)務(wù)維度、部分以功能維度,聚合方式不夠緊密,有輕微割裂感。存在低效入口,缺乏KPI驅(qū)動的調(diào)整和賽馬機制
  • C 類: 天天、蛋卷、招商銀行等4家APP,在首頁模塊劃分上,清晰劃分出核心業(yè)務(wù)與次要核心業(yè)務(wù),但功能入口過多,局部頁面信息承載量過大,跳出率高,易造成用戶“看不懂”、“找不到”

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

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

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

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

3. 我的資產(chǎn)

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

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

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

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

4. 功能icon(4-8個)

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

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

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

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

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

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

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

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

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

6. 直播板塊

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

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

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

7. 資訊板塊

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

優(yōu)化方向:話題標簽分類,同步刷新實時熱點,保留時間限制24h。

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

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

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

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

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

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

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

1. 直播板塊

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

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

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

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

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

布局方案一:

布局方案二:

3. 行業(yè)資訊

根據(jù)資訊篇幅配置Tag或根據(jù)欄目讀取熱度標簽自動展示,支持點擊后進行點贊和瀏覽。

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

四、總結(jié)

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

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

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

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

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 作者,求賜教下文中最后提到“交互是承載半條運營的產(chǎn)品經(jīng)理”,這個是怎么理解的?

    來自廣東 回復(fù)
    1. 交互是鏈接上下游的中間一環(huán),需要洞察需求后,同用戶體驗進行有效的融合。高效的交互設(shè)計可以賦能運營,尤其在活動類項目中,交互聚合并承載產(chǎn)品設(shè)計目標和用戶使用目標,像用戶一鍵觸發(fā)的“按鈕”,不再是單純邏輯的頁面跳轉(zhuǎn),需要站在更全局的角度,結(jié)合數(shù)據(jù),考量如何通過設(shè)計方法論建立流量的匯聚與分發(fā)。

      來自中國 回復(fù)
    2. 感謝作者的回復(fù),太棒了!
      您說的,高效的交互,可通過設(shè)計方法論建立產(chǎn)品流量的匯聚分發(fā),從而賦能到運營中,給我基礎(chǔ)交互的緯度中打開了另一個思考方向。
      筆心心~

      來自廣東 回復(fù)
    3. 加油~共勉呀

      來自上海 回復(fù)
  2. 內(nèi)容給很全面,但是個人認為更重要的是結(jié)合各個app的主要特色、資源、用戶構(gòu)成和目標來分析這樣布局的原因,相比于交互這些是更根本的決定因素

    來自北京 回復(fù)
  3. 點贊的狗頭圖片,怎么拉長了

    來自廣東 回復(fù)
    1. 狗頭看了文章都驚訝

      回復(fù)
  4. 領(lǐng)導(dǎo)喜歡 除外

    來自江蘇 回復(fù)
    1. 努力變成領(lǐng)導(dǎo),讓自己的想法不除外 (? ??_??)?

      來自上海 回復(fù)
  5. 厲害厲害,學(xué)習收藏了

    來自四川 回復(fù)
    1. 11111

      來自廣東 回復(fù)
    2. 22222

      來自四川 回復(fù)
    3. 2333

      來自上海 回復(fù)
    4. 10086

      來自四川 回復(fù)
  6. 剖析的非常全面,學(xué)習了

    回復(fù)
    1. 還要向MIuMiu曙多學(xué)習,給大佬端茶??

      來自美國 回復(fù)
  7. 從框架拆解到內(nèi)容分析,連線再到各點擊破,很全面,站內(nèi)很難得的金融類產(chǎn)品文章,期待更多的產(chǎn)品分析!

    回復(fù)
  8. 非常全面的分析,已關(guān)注~

    來自江蘇 回復(fù)
    1. 感謝關(guān)注,持續(xù)進步。

      來自美國 回復(fù)
  9. 居然就一個評論?還有沒有后續(xù)?

    回復(fù)
    1. 之后會繼續(xù)分享【產(chǎn)品篇】、【個人中心篇】、【社區(qū)篇】等,敬請期待~

      來自美國 回復(fù)
    2. 希望盡快更新 太棒了 寫的很好

      來自廣東 回復(fù)
  10. 【產(chǎn)品入門1元福利好課:從業(yè)務(wù)崗位到一線大廠產(chǎn)品專家,拆解成功轉(zhuǎn)崗關(guān)鍵點】

    ??前VIPkid/美團產(chǎn)品專家@小鳳老師
    ??1小時解鎖大廠產(chǎn)品面試技巧,幫你提升90%面試通過率
    ??原價99元,特惠1元!

    立即點擊預(yù)約聽課>>>http://996.pm/7vjXX

    來自廣東 回復(fù)