案例分析：H5支付交互体验设计（二）

前面给大家简单介绍了一下什么是H5支付，接下来就结合实例进行分析，帮助大家更好的理解。

H5支付方式选择支付宝支付

支付宝是淘宝与阿里系其他产品线上支付的唯一或者主要支付方式，已经成为国内市场份额第一的移动支付应用。以下举例说明手机网页中选择支付宝支付的交互体验设计。

1. 任务流程图
从以上支付流程中，我们能明确以下两点：

（1）支付宝提供了官方设置的中间页，并且此页无法自定义删除，下图示意。
（2）支付宝考虑的场景非常全面：若用户已安装支付宝客户端，可直接打开支付宝完成支付。若用户未安装支付宝，提供了引导至应用商店下载并安装支付宝的路径（下图1示意）；也可以选择在网页端调起“支付宝网页收银台”页面（下图2示意），登录账号输入密码之后完成支付。
2. 支付状态说明

具体支付过程中会根据支付是否成功，决定页面的跳转；另外手机网页到底是当前页调起支付、还是新开页面调起支付，对应的回退跳转规则是不同的。

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

（1）若用户已安装支付宝客户端，在订单支付页面点击支付，调起支付宝提供的中间页，并出现弹框尝试唤起支付宝客户端，参见下图示意：点击打开，跳转到支付宝APP，在支付宝的确认支付界面完成支付；点击取消，停留在当前支付宝支付路由页面（中间页）。
由于篇幅原因，后面的内容在下篇文章中继续给大家介绍，赶紧去看看吧！

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