微信起初基于社交属性积累了超过10亿的用户量,逐步打造了微信生态,其中微信支付近年来也成为国内市场份额第二的移动支付工具,有超越支付宝的架势。以下举例说明手机网页中选择微信支付的交互体验设计

 

交互体验设计

 

1. 任务流程图

 

流程图设计

 

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

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

 

微信支付设计

 

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

(1)若用户已安装微信客户端,在订单支付页面点击支付,进入微信支付流程,并出现弹框尝试唤起微信客户端,参见下图示意:点击打开,进入微信APP的支付界面;点击取消,停留在当前空白页面

 

空白页面设计

 

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

B. 若在微信中支付失败,用户手动回到浏览器中,则当前页面呈现微信支付官方提供的空白页:

由于微信支付官方提供的中间页是空白页,而我们又不能让用户在未支付成功的情况下,看到这个空白页。所以这里提供以下三种解决方案:

a. 在订单支付页面直接唤起微信客户端,当出现唤起微信客户端的弹框时,在订单支付页面也出现一个弹框:若在微信中支付成功,返回至该页面点击“已完成付款”,当前页面刷新至商户自定义的支付结果页;若取消支付或者在微信中没有支付成功,点击“已完成付款”,刷新页面判断订单状态,未支付则仍停留在商户的订单支付页。

 

移动端页面设计

 

b. 自定义页面:在微信中支付成功的跳转规则同上,若取消支付或者在微信中没有支付成功,则当前空白页自动跳转为“商户自定义的中间页”,可以在此中间页引导用户查看订单,重新发起支付流程。参见下图小米商城的做法。

 

微信H5设计

 

c. 自定义中间页:虽然微信支付官方提供的中间页是空白页,如果微信支付的规则允许,商户可以自定义中间页(根据近期做的一个实践项目,微信允许这种做法)。参见下图示意:若支付成功,点击“已完成付款”,页面刷新至商户自定义的支付结果页。若支付失败,点击“已完成付款”,页面停留在当前中间页,点击“查看订单”跳转至订单列表页。

 

客户端设计

 

(2)若用户未安装微信客户端,会出现下图示意的弹框提示,只能选择其他支付方式付款。

 

UI设计

 

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

 

为什么微信没有提供像支付宝那样的中间页,而是把中间页的设置交给了商户自己决定?为什么微信没有提供网页端收银台,没有下载微信APP就无法使用微信支付?思考这些问题,肯定是要加入业务层面的考量。希望在后续项目中遇到类似支付应用场景时,能够对你有所帮助。

 

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

 

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


暂无评论



发表评论

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