以支付宝和微信支付举例分析怎样做好h5交互体验设计？( 二 ) _h5交互

在订单支付页面，若选择新开页面调起支付宝支付，无论最终订单是否支付成功，仅支持回退到支付宝支付路由页面（官方中间页），因为这个中间页再没有回退路径了。如果用户手动切换浏览器后台，回到之前的订单支付页：

若已支付成功，页面刷新至商户自定义的“支付结果页”，此时若点击系统回退按钮：页面将逐级回退。这里需要注意：回退过程中是否能够及时判断订单状态，将决定回退到最终的页面。
若未支付成功，页面停留在“订单支付”页面，此时点击系统回退按钮：页面将逐级回退。回退页面的状态由具体需求决定，比如对于某个订单，先确认后支付，若已经确认提交了订单但未支付，回退之后无需再次确认，后续流程中直接支付即可。
三、H5支付方式选择微信支付微信起初基于社交属性积累了超过10亿的用户量，逐步打造了微信生态，其中微信支付近年来也成为国内市场份额第二的移动支付工具，有超越支付宝的架势。以下举例说明手机网页中选择微信支付的交互体验设计。
1. 任务流程图

文章插图
在以上支付流程中，我们能明确以下两点：

微信支付没有设置官方中间页，目前呈现的是空白页面，参见下图中弹框背景是空白页面。
对于未安装微信客户端的用户，需要选择其他支付方式付款。

2. 支付状态说明根据支付状态说明页面跳转：
（1）若用户已安装微信客户端，在订单支付页面点击支付，进入微信支付流程，并出现弹框尝试唤起微信客户端，参见下图示意：点击打开，进入微信APP的支付界面；点击取消，停留在当前空白页面。
A. 若在微信中支付成功，切回至浏览器中，页面刷新至商户自定义的“支付结果页” 。
B. 若在微信中支付失败，用户手动回到浏览器中，则当前页面呈现微信支付官方提供的空白页：
由于微信支付官方提供的中间页是空白页，而我们又不能让用户在未支付成功的情况下，看到这个空白页。所以这里提供以下三种解决方案：
a. 在订单支付页面直接唤起微信客户端，当出现唤起微信客户端的弹框时，在订单支付页面也出现一个弹框：若在微信中支付成功，返回至该页面点击“已完成付款”，当前页面刷新至商户自定义的支付结果页；若取消支付或者在微信中没有支付成功，点击“已完成付款”，刷新页面判断订单状态，未支付则仍停留在商户的订单支付页。
b. 自定义页面：在微信中支付成功的跳转规则同上，若取消支付或者在微信中没有支付成功，则当前空白页自动跳转为“商户自定义的中间页”，可以在此中间页引导用户查看订单，重新发起支付流程。参见下图小米商城的做法。
c. 自定义中间页：虽然微信支付官方提供的中间页是空白页，如果微信支付的规则允许，商户可以自定义中间页（根据近期做的一个实践项目，微信允许这种做法）。参见下图示意：若支付成功，点击“已完成付款”，页面刷新至商户自定义的支付结果页。若支付失败，点击“已完成付款”，页面停留在当前中间页，点击“查看订单”跳转至订单列表页。
（2）若用户未安装微信客户端，会出现下图示意的弹框提示，只能选择其他支付方式付款。
系统自带的回退按钮规则：应用场景、跳转逻辑规则和注意事项，类似于支付宝。
总结以上通过支付宝和微信支付两个具体案例，分析了手机网页支付存在的跳转逻辑和注意事项。其中有不少细节点值得大家思考：
比如为什么微信没有提供像支付宝那样的中间页，而是把中间页的设置交给了商户自己决定？为什么微信没有提供网页端收银台，没有下载微信APP就无法使用微信支付？思考这些问题，肯定是要加入业务层面的考量。
【以支付宝和微信支付举例分析怎样做好h5交互体验设计？】希望在后续项目中遇到类似支付应用场景时，能够对你有所帮助。