案例研究: H5付款互动体验设计

随着互联网技术和手机软硬件的迅猛发展，手机的使用场景已融入日常生活. 淘宝习惯于下订单购物，饥肠to的在美团购物，下车旅行...这些与服装，食品，住房和交通相关的应用都离不开以下核心链接: 支付.

移动支付通常可以分为两种情况: “移动APP应用程序中的集成支付功能”和“移动Web应用程序中的集成支付功能”. 本文以支付宝和微信支付为例，分析“用于交互式支付体验设计的移动Web应用程序（以下简称H5）”.

首先，APP付款和H5付款之间的异同1.什么是APP付款和H5付款？

APP付款是指“商家在移动APP中集成了支付宝付款，微信付款或其他第三方付款功能. ”

H5付款是指“商家已在移动网页（触摸屏移动浏览器）应用程序中集成了支付宝付款，微信付款或其他第三方付款功能. ”

2. 两种付款方式之间的异同

相似之处:

差异:

第二微信公众h5支付宝支付，H5付款方式选择支付宝付款

支付宝是淘宝和阿里巴巴其他产品支付的唯一或主要支付方式，已成为国内市场上第一大移动支付应用程序. 以下示例说明了在手机网页上选择的支付宝付款的交互式体验设计.

1. 任务流程图

通过上述付款过程，我们可以澄清以下两点:

（1）支付宝提供了官方设置的中间页面，该页面无法自定义和删除，如下图所示.

（2）支付宝考虑的场景非常全面: 如果用户已安装支付宝客户端，则他可以直接打开支付宝来完成支付. 如果用户未安装支付宝，则提供到应用程序商店的路径，以下载和安装支付宝（如下图1所示）；您还可以选择在网页上调用“支付宝网页收银员”页面（如下图2所示），并输入登录帐户. 输入密码后完成付款.

2. 付款状态说明

在特定的付款过程中，将根据付款是否成功来确定页面跳转. 另外，无论是手机网页调用当前页面还是新打开的页面调用付款，相应的回滚跳转规则都不同.

根据付款状态描述页面跳转:

（1）如果用户已经安装了支付宝客户端，请在订单支付页面上单击“支付”，调出支付宝提供的中间页面，然后会出现一个弹出框，试图唤起支付宝客户端，如图所示. 如下: 点击打开跳转到支付宝APP，在支付宝确认支付界面上完成支付；点击取消，停留在当前的支付宝付款路由页面（中间页）上.

a. 如果在支付宝中付款成功，则切换回浏览器，页面刷新到商家的自定义“付款结果页面”.

b. 如果在支付宝中付款失败，并且用户手动返回浏览器，则当前页面将显示支付宝支付路由页面（官方中间页面）:

点击“使用支付宝APP付款”，然后再次申请以打开支付宝付款.

单击“继续浏览器付款”，当前页面将显示支付宝网页付款收银员. 下图显示: 如果帐户已成功登录，并且在随后的付款页面上付款成功，则会显示“支付宝”页面付款成功页面. 单击“完成”，当前页面将刷新到商家的自定义“付款结果页面”.

单击“付款完成”: 如果付款成功，则当前页面将刷新到商家定义的“付款结果页面”. 如果付款失败，则会出现一个弹出框（如下图所示）. 点击继续付款. 当前页面将打开“支付宝”页面收银机页面. 后续过程与上述相同. 单击取消以停留在当前页面上.

（2）如果用户未安装支付宝客户端，则可以选择下载并安装支付宝APP，或者使用支付宝网页收银页面进行支付，请参见上述过程.

系统中包含的返回按钮规则:

在订单付款页面上，如果选择当前页面以调用支付宝付款，则订单支付页面将跳至支付宝付款路由页面（官方中间页面）. 无论最终订单是否成功付款，请单击浏览器的后退按钮，页面将逐页返回. 在订单付款页面上，如果您选择打开一个新页面以调用支付宝付款，则无论最终订单是否成功付款，它仅支持返回到支付宝付款路由页面（官方中间页面），因为是此中间页面的没有返回路径. 如果用户手动切换浏览器背景，请返回上一个订单付款页面:

如果付款成功，页面将刷新到商家的自定义“付款结果页面”. 如果此时单击系统后退按钮: 页面将逐步返回. 这里应该注意: 在回滚过程中是否可以及时判断订单状态，并将决定返回到最终页面.

如果付款失败，则页面停留在“订单付款”页面上，这时单击系统后退按钮: 该页面将逐步回滚. 返回页面的状态由特定要求确定. 例如，对于订单，先确认然. 如果订单已确认但未付款，则退货后无需再次确认，可以直接在后续过程中付款.

三，H5付款方式选择微信支付

微信最初基于社会属性累积了超过10亿用户，并逐步创建了微信生态系统. 其中，微信支付已成为近年来国内市场上第二大移动支付工具，并且有超过支付宝的趋势. 以下示例说明了在手机网页上选择的微信支付的交互体验设计.

1. 任务流程图

在上述付款过程中，我们可以澄清以下两点:

微信支付没有官方的中间页，并且当前显示空白页. 请参见项目符号框的背景，在下图中是空白页. 对于没有微信客户端的用户，他们需要选择其他付款方式.

2. 付款状态说明

根据付款状态描述页面跳转:

（1）如果用户已安装微信客户端，请在订单支付页面上单击“付款”以进入微信支付流程，然后会出现一个弹出框来尝试唤起微信客户端. 如下图: 点击打开进入微信APP支付界面；单击取消以停留在当前空白页上.

A. 如果在微信中付款成功，请切换回浏览器，页面将刷新到商家自定义的“付款结果页面”.

B. 如果在微信中付款失败，并且用户手动返回浏览器，则当前页面将显示由微信支付官员提供的空白页面:

由于微信支付提供的中间页是空白页微信公众h5支付宝支付，因此如果付款失败，我们将不允许用户看到该空白页. 因此，以下是三种解决方案:

a. 在订单付款页面上直接调用微信客户端. 当弹出框唤起微信客户端时，在订单付款页面上还将出现一个弹出框: 如果在微信中付款成功，请返回此页面并单击“已完成”付款”，当前页面刷新为商户的自定义付款结果页面；如果在微信中付款被取消或付款不成功，请单击“已完成的付款”，刷新页面以判断订单状态，如果未付款，仍停留在商户的订单付款页面上.

b. 用户自定义页面: 微信中成功付款的跳转规则与上面相同. 如果在微信中付款被取消或支付不成功，当前空白页将自动跳转到“客户定义的中间页”. 此中间页面指导用户查看订单并重新启动付款过程. 小米商城的做法请参见下图.

c. 自定义中间页: 尽管微信支付提供的中间页面为空白，但如果微信支付的规则允许，商家可以自定义中间页面（根据最近的实际项目，微信允许这种做法）. 请参考下图: 如果付款成功，请单击“付款完成”，页面将刷新到商家的自定义付款结果页面. 如果付款失败，请单击“付款完成”，页面停留在当前中间页上，然后单击“查看订单”以跳至订单列表页面.

（2）如果用户未安装微信客户端，则会出现如下图所示的弹出提示，并且只能选择其他付款方式.

系统自带的后退按钮规则: 应用场景，跳转逻辑规则和注意事项，类似于支付宝.

摘要

上面使用支付宝和微信支付这两种具体情况来分析移动网络支付的跳转逻辑和注意事项. 有许多细节值得考虑:

例如，为什么微信不提供像支付宝这样的中间页面，而是由中间商来决定中间页面的设置？为什么微信不提供基于网络的收银机，并且不下载微信APP就无法下载微信？考虑这些问题绝对是企业层面的考虑.

希望您在后续项目中遇到类似的支付应用方案时对您有所帮助.

参考链接:

#Columnwriter#

Viksea，微信公众号: Viksea的设计思想（ID: viksea-ux），每个人都是产品经理专栏作家. 注重电子商务领域的产品业务和用户体验，擅长逻辑分析.

Unsplash中的图片基于CC0协议. 返回搜狐，查看更多

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-196558-1.html