交互設計思路:積分模塊改版總結

6 評論 23859 瀏覽 243 收藏 7 分鐘

作者根據工作經驗對積分模塊改版進行了一些總結,與大家分享,希望可以從中收獲點滴。

積分已經成為每個互聯網平臺黏住用戶,增加平臺留存率的重要手段之一,金融平臺也不例外,雖然積分的商業模式很重要,但是如何展現給用戶,用戶的使用體驗是否流暢也同樣重要。下面就我最近的手邊項目積分模塊的改版做詳細闡述。

首先,先說明一下該APP的積分模塊組成,包含每日簽到、積分獎勵(外星人獎勵、投資獎勵)、積分記錄及積分的相關活動等。

1.每日簽到頁面

每日簽到原頁面:

問題分析:頁面布局零散,相關內容布局不合理,頁面樣式呆板不新穎。

改版頁面(交互稿):

改版說明:

  1. 關聯相近原則,將“立即兌換”和我的積分移到相近的位置,看到積分數字,立即想到可以兌換什么。
  2. 增加簽到進度條和日歷,更直觀的讓用戶了解到連續簽到可以獲得不一樣的獎勵。
  3. 最底部增加積分的相關活動,為以后擴展奠定基礎。

總結:要充分理解和分析需求,做更貼近用戶需求的設計。

2.外星人獎勵頁面

外星人獎勵原頁面:

問題分析:沒有空狀態引導,表格樣式的展現形式看起來很亂,信息展示的優先級也叫混亂。

改版頁面(交互稿):

改版說明:

  1. 將導航移至標題欄內,減少頁面的分割,看起來更有整體性。
  2. 增加空狀態引導,以使操作流程形成閉環。
  3. 頭部樣式采用弧形樣式,更加活潑大氣一點。
  4. 增加了邀請人數的字段,這樣用戶更加直觀的了解到自己邀請了多少人。
  5. 將原來的表格樣式改為list的樣式,將信息進行重構,突出獎勵。

總結:空狀態引導很重要,關乎整個APP的體驗閉環。頁面樣式也是交互設計的一大亮點,不一樣的樣式也會給用戶耳目一新的感覺。

3.投資獎勵頁面

投資獎勵原頁面:

問題分析:和外星人獎勵頁面一樣沒有空頁面引導,信息展示優先級不對,需求理解不透徹。

改版頁面(交互稿):

改版說明:

  1. ?增加空狀態引導,頁面頭部樣式和外星人獎勵頁面統一。
  2. 將list的信息進行重構和整理,根據頁面的信息顯示的優先級進行調整,突出獎勵,將狀態字段單獨作為一列,將無獎勵的金額直接顯示為0,比原來的的無獎勵但有獎勵金額的狀態更清晰。
  3. 增加頁面交互:當用戶開始選擇篩選條件(交易時間、產品類型、狀態)時,篩選條件和列表將置于頁面頂部,減少干擾信息,讓用戶更專注于查看列表本身。

總結:信息整理很重要,根據用戶的關注度、頁面信息的重要程度進行產品設計。

4.外星人頁面

外星人原頁面:

問題分析:缺少活動事件的引導,用戶進到該活動頁面以為每個人都符合邀請條件,但實際上需要滿足一定的條件,而相關說明隱藏的太深,用戶極有可能根本關注不到。

改版后頁面(交互稿):

改版說明:將原來的活動規則里面的內容進行提取,增加成為外星人事件的引導,更加可視化,圖形化。

總結:可視化是交互設計的重要手段,所以將文字可視化圖形化已經成為設計趨勢。

積分記原頁面

積分記錄原頁面:

改版后頁面(交互稿):

改版說明:

  1. 突出積分的增加或減少,并且以時間流的形式展示,更加直觀。
  2. 篩選條件其實是一個低頻的需求,所以將篩選條件移到右上角,點擊后再出現。

總結:時刻關注用戶需求,做以用戶為中心的設計。

項目總結

  1. 理解需求、分析需求是設計頁面的關鍵。
  2. 影響信息展示樣式的關鍵點:用戶的關注度、使用頻次、使用習慣。
  3. 關注頁面的空狀態引導。

 

作者:柴維英,從事交互設計5年多,不斷鉆研,不斷進步,擁有豐富的交互實踐經驗。

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 首先,應該說明為什么要改版?有沒有數據支撐?
    其次,個人覺得有些改版不如改版前的清晰明了,改版前只是UI設計不夠美觀而已,改版后卻讓信息層級更加不明確和混亂。比如,積分記錄頁面的改版。

    來自浙江 回復
  2. 好棒

    回復
  3. 不錯 666

    來自北京 回復
  4. 從中學到了優化的思路

    回復
  5. 您真的很厲害,我基本看不懂頁面要怎么改版,但您真的很強。請前輩多出一些改版的文章。謝謝您。

    回復
    1. 謝謝!大家相互學習

      回復