关闭

案例分析:H5支付交互体验设计(四)

前面给大家介绍了H5支付方式选择支付宝支付的案例,相信大家已经明白了。下面就来分析一下H5支付方式选择微信支付的实际案例。
前面给大家介绍了H5支付方式选择支付宝支付的案例,相信大家已经明白了。下面就来分析一下H5支付方式选择微信支付的实际案例。

H5支付方式选择微信支付

微信起初基于社交属性积累了超过10亿的用户量,逐步打造了微信生态,其中微信支付近年来也成为国内市场份额第二的移动支付工具,有超越支付宝的架势。以下举例说明手机网页中选择微信支付的交互体验设计。

1. 任务流程图
1在以上支付流程中,我们能明确以下两点:

微信支付没有设置官方中间页,目前呈现的是空白页面,参见下图中弹框背景是空白页面。

对于未安装微信客户端的用户,需要选择其他支付方式付款。
22. 支付状态说明

根据支付状态说明页面跳转:

(1)若用户已安装微信客户端,在订单支付页面点击支付,进入微信支付流程,并出现弹框尝试唤起微信客户端,参见下图示意:点击打开,进入微信APP的支付界面;点击取消,停留在当前空白页面。
3A. 若在微信中支付成功,切回至浏览器中,页面刷新至商户自定义的“支付结果页”。

B. 若在微信中支付失败,用户手动回到浏览器中,则当前页面呈现微信支付官方提供的空白页:

由于微信支付官方提供的中间页是空白页,而我们又不能让用户在未支付成功的情况下,看到这个空白页。所以这里提供三种解决方案。到底是哪三种解决方案呢?由于篇幅原因,下篇文章会继续详细介绍,赶紧去看看吧!

以上就是“案例分析:H5支付交互体验设计(四)”的内容了,如果你还想了解其他相关内容,可以来产品壹佰官方网站。

0条评论 添加新讨论

登录后参与讨论
Ctrl+Enter 发表