内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

支付购买流程的UX优化方案

2018-05-06 15:03 出处:清屏网 人气: 评论(0

以上是百度理财改版前后的支付购买流程变化。

三.层级划分

我们可以把设计上的层级划分理解为一个 合并同类项+排序 的过程。秉承”don't make me think"的用户体验原则,从界面视觉表达上 简化繁杂信息 更利于用户高效获得重要信息,进而促成”买单“行为。

而这个简化信息的处理不仅仅只是做加法与减法,更多的在于信息的 合并与折叠

我们回到之前举例的这个产品,对于线上的界面设计来说,所有的信息都是平铺的方式展现,并没有进行信息的层级划分。分析以后我们可以将页面信息合并分为3大块:出借金额与收益、支付方式、优惠券。

出借金额与预期收益应该是属于相关联的信息,因此划分在一个模块。

支付方式中与充值操作结果对于用户购买来说是没有区别的,可以折叠在一个子页面模块展示:2种支付方式(我的余额OR银行卡)

优惠券与红包属于同概念功能,也完全可以合并展示。

再进行优先级的排序后,页面的模块展示依次为:出借金额与收益、优惠券、支付方式。

四.视觉优化


1.减线立面

在之前的文章 新项目设计0-1的正确开启方式 里也有提及过,分割线框架设计的优劣点,分割线设计更适合信息密集且强调信息展示效率的产品,但会对界面带来很强的割裂感,从而干扰阅读。

在这里我们可以利用 模块化面与面间的间隔 替代一部分分割线,达到双赢的效果。

2.设计符号化

合理运用符号设计可以增强用户对特定功能的识别与认知,例如输入金额前的人民币符号、优惠券前的小图标以及支付方式中银行前的LOGO,都比直白的文字描述更具 识别性

在信息繁多的列表中突出特定功能的符号化表达,也有助于 拉开信息差距 ,提升用户使用效率。

3.半拟物化设计

支付购买流程界面设计,我们有2个需要注意的点:

1.设计中会遇到许多与线下实品相结合的使用场景

2.用户在该流程的流失率较高。

那么秉承 商业设计的核心精髓 ,在支付购买流程尽可能通过用户体验技巧留住用户,可以通过半拟物化增强现实场景还原感,增强用户信任度,简化流程操作,化繁为简。

原创的2个半拟物化场景还原设计样例。

五.优化对比

最后给大家po出方案A与线上旧版本的前后对比。

1.购买详情列表

分享给小伙伴们:
本文标签: UX

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号