【APP】卡包流程设计

小编:卡包是我们APP体验过程中一个很不显眼但偶尔又很重要的功能,尤其是对于喜欢收集各种各样的会员卡、优惠券的人来说,使用频率不低于支付功能,那么我们在设计时如何考虑呢?来看看这一篇卡包流程设计的案例总结吧,希望给大家一些卡包设计上的启发~一起来看看吧~

记录一下项目进程中我的思考。

01| 概述/使用场景

之前做的一个游乐园项目:

在现有小程序的基础上,针对单个会员线下拥有多张会员卡的场景,在产品中加入了“卡包”功能。

卡包中可以绑定多张不同门店的会员卡,用户可以使用不同储值的会员卡进行线下游玩。

02| 整理需求

经过与客户沟通核查,整理得出以下需求:

1、因为会员卡属于个性化产品,支持商家在后台更换“卡面”图片;

2、卡面信息包含:会员注册名称、卡号、会员级别;

3、会员卡包括:金币、代币、积分、彩票四种储值。用户通过扣除会员卡对应的储值(其中一种)进行线下游玩。

4、需要把各项储值列出来,方便用户筛选。

03|执行

不同平台的各种“卡包”:

lyadhb1p435.png插图

在最初,我们定了几个方案:

Plan A

vyemuovydmn.png插图(1)

该方案中把卡面露出上半截,附上会员昵称和卡号,下半截把各个储值列出来。但缺点是页面信息过载,没有重点。

基于这个方案,顺带提一下文字信息在复杂图案上的识别性问题:

因为会员信息写在卡面上,为保证文字层的识别性,需要在卡面和文字层之间增加一层遮罩,增加对比度。

vtzbtktry3b.png插图(2)

另外,在此方法下,我们要对卡面背景有所要求:针对显示文字的区域,背景不能太过花俏,适宜用简单的纹理/单色。

saedlfky2dd.png插图(3)

但是,

根据一段时间的使用反馈,我们发现,虽然我们在后台把“图片上传要求”写出来了,但严格执行的用户并不多,对于他们来说,“上传一张背景,这个区域不能有文字,不能用复杂图案…”这样的操作成本太高,不好用(跟我们产品用户的使用习惯有关系)。

他们更多的是用手机把实体会员卡拍下来,上传作为线上会员卡背景,简单直接,没有多余的操作。

这样一来,会员卡的样式就不可控了,文字层的识别性也会受到影响。

Plan B

基于以上反馈,我们更新了方案,把会员卡缩小单独放置,文字层(用户名称/卡号)提出来:

q5jemyqqkzo.png插图(4)

根据这一反馈,我们更新了方案,把会员卡缩小单独放置,文字层(用户名称/卡号)提出来:

那么,这个页面就结束了吗?

还能继续优化

(有时候多走两步,或许就能想到一个更好的方案╮( ̄▽ ̄””)╭)

分析一下这个页面:

1. 视觉重点:卡面 > 绑定按钮 > 会员名称/卡号 > 储值数据;

2. 哪张卡储值有多少,全列出来,一目了然,但有种信息过载的感觉;

rvxpwtxayfl.png插图(5)

但有更好的方案吗?

当思路打不开的时候,不妨退出来看看整体,回归使用场景:什么情况下会“更换会员卡”?我们通过收集了五百多名用户数据,发现将近3/4的人在“储值不够”的场景下去“更换会员卡”。

lzul5hsx5gg.png插图(6)

基于这一数据,我们梳理了优化的方向:

功能上方便用户筛选储值数据,可以由多到少进行排序;视觉重点:储值数据> 卡面 > 绑定按钮 > 会员名称/卡号;仅显示当前用户需要的储值数据,减少其他不必要的信息(必要时可以收进下级页面)。

5dmfhhwfabt.png插图(7)

在页面当中,我们把四种储值类型拆分开来,增加筛选栏进行筛选排序。把当前储值数据提取出来加重,弱化会员名/卡号把该会员卡的其他信息归到下级页面。

从而节省了操作流程:第一步储值类型进行排序,第二步筛选会员卡完成绑定。

mrhobm2t5h3.png插图(8)

至此,这个小需求的交互流程就基本确定了。整个项目流程就是针对需求不停的进行验证,发现问题,剖析问题,最后解决问题,循环往复。

这篇文字纯碎记录提炼需求后我的思考过程,思路/方法还有很多,在这里抛砖引玉。

下篇见。

原文地址:站酷

作者:Pooorguy

人已赞赏
UI设计

Material Design Customization 自定义

2020-10-12 20:04:31

UI设计

手机端主按钮应该放在那里?

2020-10-12 20:04:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索