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

 

1. 任务流程图

交互体验设计

 

从以上支付流程中,我们能明确以下两点:

(1)支付宝提供了官方设置的中间页,并且此页无法自定义删除,下图示意。

 

移动端设计

 

(2)支付宝考虑的场景非常全面:若用户已安装支付宝客户端,可直接打开支付宝完成支付。若用户未安装支付宝,提供了引导至应用商店下载并安装支付宝的路径(下图1示意);也可以选择在网页端调起“支付宝网页收银台”页面(下图2示意),登录账号输入密码之后完成支付。

 

H5设计

支付宝支付

 

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

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

(1)若用户已安装支付宝客户端,在订单支付页面点击支付,调起支付宝提供的中间页,并出现弹框尝试唤起支付宝客户端,参见下图示意:点击打开,跳转到支付宝APP,在支付宝的确认支付界面完成支付;点击取消,停留在当前支付宝支付路由页面(中间页)。

 

支付宝设计

 

a.若在支付宝中支付成功,则切回至浏览器中,页面刷新至商户自定义的“支付结果页”。

b.若在支付宝中支付失败,用户手动回到浏览器中,则当前页面呈现支付宝支付路由页面(官方提供的中间页):

点击“使用支付宝APP付款”,再次申请打开支付宝支付。

点击“继续浏览器付款”,当前页面调起支付宝网页支付收银台,下图示意:若成功登录账号并且在后续付款页面支付成功,则展示支付宝网页端支付成功页,点击完成,当前页面刷新至商户自定义的“支付结果页”。

 

支付结果页面

 

点击“已完成付款”:若已经支付成功,当前页刷新至商户自定义的“支付结果页”。若支付失败,则出现弹框(下图示意),点击继续付款,当前页调起支付宝网页收银台页面,后续流程同上;点击取消,停留在当前页面。

 

客户端设计

 

(2)若用户未安装支付宝客户端,可以选择下载安装支付宝APP,或者使用支付宝网页收银台页面支付,参见上面的流程。

 

系统自带的回退按钮规则:

在订单支付页面,若选择当前页面调起支付宝支付,则订单支付页面跳转为支付宝支付路由页面(官方中间页),无论最终订单是否支付成功,点击浏览器的回退按钮,页面将逐页回退。
在订单支付页面,若选择新开页面调起支付宝支付,无论最终订单是否支付成功,仅支持回退到支付宝支付路由页面(官方中间页),因为这个中间页再没有回退路径了。如果用户手动切换浏览器后台,回到之前的订单支付页:
若已支付成功,页面刷新至商户自定义的“支付结果页”,此时若点击系统回退按钮:页面将逐级回退。这里需要注意:回退过程中是否能够及时判断订单状态,将决定回退到最终的页面。

 

若未支付成功,页面停留在“订单支付”页面,此时点击系统回退按钮:页面将逐级回退。回退页面的状态由具体需求决定,比如对于某个订单,先确认后支付,若已经确认提交了订单但未支付,回退之后无需再次确认,后续流程中直接支付即可。

 

青岛青设网络科技有限公司是国内领先设计团队和营销策划服务商,专注于5G技术下平面设计,UI设计,BS系统设计,网站开发,SEO,自媒体,百度百科知道、知乎等百家号,排行榜,删除负面,媒体发文等营销宣传。帮助企业解决5G时代三维动态化站点的设计改造,为客户提供网站一站式解决方案。

 

**本文内容来源网络,经AI自动调整,信息仅供参考**


暂无评论



发表评论

电子邮件地址不会被公开。 必填项已用*标注