交互設計思路:積分模塊改版總結
作者根據工作經驗對積分模塊改版進行了一些總結,與大家分享,希望可以從中收獲點滴。
積分已經成為每個互聯網平臺黏住用戶,增加平臺留存率的重要手段之一,金融平臺也不例外,雖然積分的商業模式很重要,但是如何展現給用戶,用戶的使用體驗是否流暢也同樣重要。下面就我最近的手邊項目積分模塊的改版做詳細闡述。
首先,先說明一下該APP的積分模塊組成,包含每日簽到、積分獎勵(外星人獎勵、投資獎勵)、積分記錄及積分的相關活動等。
1.每日簽到頁面
每日簽到原頁面:
問題分析:頁面布局零散,相關內容布局不合理,頁面樣式呆板不新穎。
改版頁面(交互稿):
改版說明:
- 關聯相近原則,將“立即兌換”和我的積分移到相近的位置,看到積分數字,立即想到可以兌換什么。
- 增加簽到進度條和日歷,更直觀的讓用戶了解到連續簽到可以獲得不一樣的獎勵。
- 最底部增加積分的相關活動,為以后擴展奠定基礎。
總結:要充分理解和分析需求,做更貼近用戶需求的設計。
2.外星人獎勵頁面
外星人獎勵原頁面:
問題分析:沒有空狀態引導,表格樣式的展現形式看起來很亂,信息展示的優先級也叫混亂。
改版頁面(交互稿):
改版說明:
- 將導航移至標題欄內,減少頁面的分割,看起來更有整體性。
- 增加空狀態引導,以使操作流程形成閉環。
- 頭部樣式采用弧形樣式,更加活潑大氣一點。
- 增加了邀請人數的字段,這樣用戶更加直觀的了解到自己邀請了多少人。
- 將原來的表格樣式改為list的樣式,將信息進行重構,突出獎勵。
總結:空狀態引導很重要,關乎整個APP的體驗閉環。頁面樣式也是交互設計的一大亮點,不一樣的樣式也會給用戶耳目一新的感覺。
3.投資獎勵頁面
投資獎勵原頁面:
問題分析:和外星人獎勵頁面一樣沒有空頁面引導,信息展示優先級不對,需求理解不透徹。
改版頁面(交互稿):
改版說明:
- ?增加空狀態引導,頁面頭部樣式和外星人獎勵頁面統一。
- 將list的信息進行重構和整理,根據頁面的信息顯示的優先級進行調整,突出獎勵,將狀態字段單獨作為一列,將無獎勵的金額直接顯示為0,比原來的的無獎勵但有獎勵金額的狀態更清晰。
- 增加頁面交互:當用戶開始選擇篩選條件(交易時間、產品類型、狀態)時,篩選條件和列表將置于頁面頂部,減少干擾信息,讓用戶更專注于查看列表本身。
總結:信息整理很重要,根據用戶的關注度、頁面信息的重要程度進行產品設計。
4.外星人頁面
外星人原頁面:
問題分析:缺少活動事件的引導,用戶進到該活動頁面以為每個人都符合邀請條件,但實際上需要滿足一定的條件,而相關說明隱藏的太深,用戶極有可能根本關注不到。
改版后頁面(交互稿):
改版說明:將原來的活動規則里面的內容進行提取,增加成為外星人事件的引導,更加可視化,圖形化。
總結:可視化是交互設計的重要手段,所以將文字可視化圖形化已經成為設計趨勢。
積分記原頁面
積分記錄原頁面:
改版后頁面(交互稿):
改版說明:
- 突出積分的增加或減少,并且以時間流的形式展示,更加直觀。
- 篩選條件其實是一個低頻的需求,所以將篩選條件移到右上角,點擊后再出現。
總結:時刻關注用戶需求,做以用戶為中心的設計。
項目總結
- 理解需求、分析需求是設計頁面的關鍵。
- 影響信息展示樣式的關鍵點:用戶的關注度、使用頻次、使用習慣。
- 關注頁面的空狀態引導。
作者:柴維英,從事交互設計5年多,不斷鉆研,不斷進步,擁有豐富的交互實踐經驗。
本文由 @柴維英 原創發布于人人都是產品經理。未經許可,禁止轉載。
首先,應該說明為什么要改版?有沒有數據支撐?
其次,個人覺得有些改版不如改版前的清晰明了,改版前只是UI設計不夠美觀而已,改版后卻讓信息層級更加不明確和混亂。比如,積分記錄頁面的改版。
好棒
不錯 666
從中學到了優化的思路
您真的很厲害,我基本看不懂頁面要怎么改版,但您真的很強。請前輩多出一些改版的文章。謝謝您。
謝謝!大家相互學習