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

随着互联网技术和手机软硬件的高速发展，手机的使用场景已经融入到日常生活的点滴中。购物用淘宝下单，饿了在美团点外卖，出行滴滴一下……这些关联衣食住行的应用，都离不开一个核心环节：线上支付。
手机支付通常可以细分为两种场景：“手机APP应用中集成支付功能”、“手机网页应用中集成支付功能” 。本文以支付宝和微信支付举例分析“手机网页应用（以下简称H5）进行支付的交互体验设计” 。

一、APP支付与H5支付的异同1. 什么是APP支付和H5支付？APP支付是指“商户在移动端APP中集成了支付宝支付、微信支付，或者其他第三方支付功能” 。
H5支付是指“商户在移动端网页（触屏版手机浏览器）应用中集成了支付宝支付、微信支付，或者其他第三方支付功能” 。
2. 两种支付方式的异同相同点：

都是调用第三方应用提供的支付功能。
应用内支付或者调起第三方客户端支付，取决于第三方提供的接口规则。

不同点：

APP内支付流程的页面跳转路径是明确的，无论是跳转至第三方客户端支付、还是在APP内调起第三方网页支付，支付成功或失败，都将在“订单支付”页面明确获知订单状态。
H5支付是在手机浏览器中打开的网页，在结算台页面选择支付方式确认支付，可以选择当前页、或者选择新开页面调起第三方支付。并且调起的第三方支付页面由第三方决定，商户只能在限定的规则内调整。
由于手机浏览器系统自带前进与后退按钮，并且通常情况下无法对系统自带的按钮做限制。这就意味着H5支付，无论支付成功或失败，都要考虑用户点击系统回退按钮的跳转规则。

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

文章插图
从以上支付流程中，我们能明确以下两点：
（1）支付宝提供了官方设置的中间页，并且此页无法自定义删除，下图示意。
（2）支付宝考虑的场景非常全面：若用户已安装支付宝客户端，可直接打开支付宝完成支付。若用户未安装支付宝，提供了引导至应用商店下载并安装支付宝的路径（下图1示意）；也可以选择在网页端调起“支付宝网页收银台”页面（下图2示意），登录账号输入密码之后完成支付。
2. 支付状态说明具体支付过程中会根据支付是否成功，决定页面的跳转；另外手机网页到底是当前页调起支付、还是新开页面调起支付，对应的回退跳转规则是不同的。
根据支付状态说明页面跳转：
（1）若用户已安装支付宝客户端，在订单支付页面点击支付，调起支付宝提供的中间页，并出现弹框尝试唤起支付宝客户端，参见下图示意：点击打开，跳转到支付宝APP，在支付宝的确认支付界面完成支付；点击取消，停留在当前支付宝支付路由页面（中间页）。
a.若在支付宝中支付成功，则切回至浏览器中，页面刷新至商户自定义的“支付结果页” 。
b.若在支付宝中支付失败，用户手动回到浏览器中，则当前页面呈现支付宝支付路由页面（官方提供的中间页）：
点击“使用支付宝APP付款”，再次申请打开支付宝支付。
点击“继续浏览器付款”，当前页面调起支付宝网页支付收银台，下图示意：若成功登录账号并且在后续付款页面支付成功，则展示支付宝网页端支付成功页，点击完成，当前页面刷新至商户自定义的“支付结果页” 。
点击“已完成付款”：若已经支付成功，当前页刷新至商户自定义的“支付结果页” 。若支付失败，则出现弹框（下图示意），点击继续付款，当前页调起支付宝网页收银台页面，后续流程同上；点击取消，停留在当前页面。
（2）若用户未安装支付宝客户端，可以选择下载安装支付宝APP，或者使用支付宝网页收银台页面支付，参见上面的流程。
系统自带的回退按钮规则：