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

23 評論 1.8萬 瀏覽 193 收藏 15 分鐘

編輯導讀:首頁作為用戶進入產品的第一個體驗頁面,曝光量最大,有幫助用戶留存和轉化的作用。本文作者體驗了多款互聯網金融產品APP,并從中總結出了這些首頁設計的經驗,與你分享。

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

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

一、首頁的常見樣式

首頁是什么樣子?如何基于業務核心板塊搭建布局?

1. 常規首頁

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

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

頂部欄|我的資產|核心icon|營銷banner|產品推介位|資訊|直播|其他。

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

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

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

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

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

3. 我的資產

頭部展示,根據用戶的登錄及資產狀態,切換對應的可視化數據。

【非登錄態】展示品牌營銷、產品推薦等文案,引導用戶注冊/登錄,并使用錢包類產品下單。

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

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

4. 功能icon(4-8個)

根據移動應用的交互設計規律—“7±2法則”,懸浮卡片上可容納5-9個功能圖標。

根據調研統計顯示核心功能icon個數如下:

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

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

  • 核心功能?? 錢包|買基金|定投|指數|高端|固收+等
  • 次級功能?? 社區|自選|排行|積分商城|直播等
  • 更多?養老|模擬組合|生活服務|分享|關注等

5. 產品推薦位

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

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

優化方向:主推產品的點擊向產品詳情頁引流,提供定投/轉購/購買等多種買入方式。

6. 直播板塊

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

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

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

7. 資訊板塊

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

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

綜上結合調研,基于核心業務驅動(錢包),以首頁為例,撬動核心鏈路(充值錢包、使用錢包購買產品)進行優化。

二、業務需求

增強錢包功能曝光,提升轉化率。優化核心產品的點擊路徑,結合登錄狀態引導充值下單,并依托產品運營側吸流量,帶動數據增長。通過“錢包”的高頻屬性有效驅動DAU和黏性的提升,為其他核心業務反哺流量

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

三、首頁錢包功能優化設計

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

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

1. 直播板塊

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

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

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

2. 產品推介位

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

布局方案一:

布局方案二:

3. 行業資訊

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

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

四、總結

首先,依據流量分發,確定業務線和功能板塊布局,交互是承載半條運營的產品經理。

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

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

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

 

本文由 @理財佳 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
2人打賞
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 作者,求賜教下文中最后提到“交互是承載半條運營的產品經理”,這個是怎么理解的?

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

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

      回復
    3. 加油~共勉呀

      回復
  2. 內容給很全面,但是個人認為更重要的是結合各個app的主要特色、資源、用戶構成和目標來分析這樣布局的原因,相比于交互這些是更根本的決定因素

    回復
  3. 點贊的狗頭圖片,怎么拉長了

    回復
    1. 狗頭看了文章都驚訝

      回復
  4. 領導喜歡 除外

    回復
    1. 努力變成領導,讓自己的想法不除外 (? ??_??)?

      回復
  5. 厲害厲害,學習收藏了

    回復
    1. 11111

      回復
    2. 22222

      回復
    3. 2333

      回復
    4. 10086

      回復
  6. 剖析的非常全面,學習了

    回復
    1. 還要向MIuMiu曙多學習,給大佬端茶??

      回復
  7. 從框架拆解到內容分析,連線再到各點擊破,很全面,站內很難得的金融類產品文章,期待更多的產品分析!

    回復
  8. 非常全面的分析,已關注~

    回復
    1. 感謝關注,持續進步。

      回復
  9. 居然就一個評論?還有沒有后續?

    回復
    1. 之后會繼續分享【產品篇】、【個人中心篇】、【社區篇】等,敬請期待~

      回復
    2. 希望盡快更新 太棒了 寫的很好

      回復
  10. 【產品入門1元福利好課:從業務崗位到一線大廠產品專家,拆解成功轉崗關鍵點】

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

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

    回復