长城上的猫

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

 

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

 

01 | 概述/使用场景

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

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

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

 

02 | 整理需求

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

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

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

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

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

 

03|执行

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

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

Plan A

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

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

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

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

但是,

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

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

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

 

Plan B

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

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

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

还能继续优化

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

 

分析一下这个页面:

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

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

 

但有更好的方案吗?

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

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

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

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

 

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

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

 

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

下篇见。

 

原文地址:站酷 

作者:Pooorguy 

 

转载请注明:学UI网 » 【APP】卡包流程设计

登录收藏
 
你可能喜欢的:
Material Design States 状态Material Design States 状态
浅谈用研(下)| 如何写好一份调研报告浅谈用研(下)| 如何写好一份调研报告
Material Design Selection 选择Material Design Selection 选择
从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?
异常场景怎么处理?异常场景怎么处理?
UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错
如何设计好一款APP的首页?如何设计好一款APP的首页?
B端品牌如何面向C端用户B端品牌如何面向C端用户
如何搭建一个易学性高可用性强的功能框架?如何搭建一个易学性高可用性强的功能框架?
盘点 | 4个成为标杆的超强体验设计盘点 | 4个成为标杆的超强体验设计