赞助商
立即赞助

如何设计支付购买流程?来看这份超全面的UX优化方案

UI设计3年前 (2021)更新 流光
2.2K 0 0

一、功能逻辑梳理

框架设与加减乘除合并同类项之,梳理业务与产品逻辑对于复杂的流程界面至关重的。

我们举个例子来说明问题,举例的这个产叫做「宜信优2年期」,是个 P2P 财固收产。

如何设计支付购买流程?来看这份超全面的UX优化方案

结合购流程相页面,我们可把产使逻辑梳按户情况分为2种:

如何设计支付购买流程?来看这份超全面的UX优化方案

这里我们可归纳在该产的实际购流程中涉及到2个核心功操作(入金额输入+支付)和核心功操作反馈(支付状态),3个辅助功(行卡择、优惠券择与款方式择)。

其中我们按照流程设计中的 timeline 设计法,依据用户使用的流程时间顺序归类,用户依次操心理排序应为:确认产品信息——输购买金额——看看预期回报金额——是否有优券用——去支付——支付是否成功——到期钱回到哪里——,我确认。

这析下来,可以推导出2个 UX 计方案。

二、框架设计

方案A:聚合

依据上的界面设计,完以看出产品原型还原度很高,简单粗暴的以2个核心页(购买流程+支付结果)+2个触子页面(支付方式+优券)+完成产品购买。

如何设计支付购买流程?来看这份超全面的UX优化方案

样做的处是信息展示效率高,页面操跳转少。

另外页面框架计为弹窗式,增页面系,减少页面跳转迷失。

这样规矩框架设计,是很多品在设计保险选择,事实上随着用户使用挑剔度提升,以及越来越高效快速生活节奏,也许我们在框架设计上也可以更多尝试与突破。

案B:拆分

把核心操作进个拆分话,我们可以到个全新案。3个核心页(额输入+支付+支付结)+1个触发子页(优惠券)。

这样的一拆分设应该会好的提升用户体验,将买流程晰化,核心功能最大化突出,使买过程条线操作。

如何设计支付购买流程?来看这份超全面的UX优化方案

这样个看上去用户体验极佳流程设计却有着定商业转换率问题,品们最害怕事情便是部分用户在多出来这个买步骤流失了,而具体数据变化反馈我们大概也能从百度理财变化猜出来,拆分设计在商业设计目标战败了。

如何设计支付购买流程?来看这份超全面的UX优化方案

以上是百度理财改版前后支付买流程变化。

三、层级划分

我们可以把设计上层级划分理解为个合并类项+排序过程。秉承「don’t make me think」用户体验原则,从界视觉表上简化繁杂信息更利于用户高效获要信息,进而促成「买单」为。

这简化信息的处理不仅仅只加法与减法,多的于信息的合并与折叠。

我们到之前举例的这个产,对于线上的界面设计来说,有的信息都是平铺的方式展现,并没有进行信息的层级划分。分析后我们可将页面信息合并分为3大:借金额与收益、支付方式、优惠券。

出借金额与预期收益应该是属相关联的信息,因此划分在一个模块。

支付方式中充值操作结果对于用户购买来说是没有别的,可以折叠在一个页面模块展示:2种支付方式(的余额 OR 银行卡)

优惠券与红属于概念功能,也完全可以合并展示。

如何设计支付购买流程?来看这份超全面的UX优化方案

再进优先级排序后,页模块展示依为:出借额与收益、优惠券、支付。

四、视觉优化

1. 减线立面

割线计更适息密集且调息展示效率的产品,但会对界面带来的割裂,从而干扰阅读。

在这里我们可以利用模块化与隔替代部分分割线,到双赢效。

如何设计支付购买流程?来看这份超全面的UX优化方案

2. 计符号化

理运用符号计可以增用户对定功能的识别认知,例如输入金额前的人币符号、优惠券前的图标以及支付方式中银行前的 LOGO,都比直的文字描述更识别性。

在信息繁多列表突出特定功能符号化表,也有助于开信息距,提升用户使用效率。

如何设计支付购买流程?来看这份超全面的UX优化方案

3. 半拟物化计

支付购买流程界面计,有2个需要注的点:

  • 设计中遇到许与下品相结合的使用场;
  • 用户在该流程的流失率较高。

么秉承业设计的核心精髓,在支付购买流程尽能通用户验技巧留住用户,以通半拟物化增强现场还原感,增强用户信任度,简化流程操,化繁为简。

如何设计支付购买流程?来看这份超全面的UX优化方案

△ 原创的2个半拟物化场还原设计样例

五、优化对比

最给大家 po 出方案A 与上旧版的前对比。

1. 购买详情列表

如何设计支付购买流程?来看这份超全面的UX优化方案

2. 支付选择

如何设计支付购买流程?来看这份超全面的UX优化方案

3. 优惠券选择

如何设计支付购买流程?来看这份超全面的UX优化方案

4. 增行卡

如何设计支付购买流程?来看这份超全面的UX优化方案

欢迎关注作者微信公众:「Nana的设囊」

如何设计支付购买流程?来看这份超全面的UX优化方案

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

今年本命年想做个表情包,但是之前没有做过,在网上搜索教程时,没有找到很有用的。所以我大部分都是看很多喜欢的表情包,然...
动态表情
编者按:为另外一个国家的客户以及用户设计应用的时候,文化的碰撞总是免不了的。当 Tubik Studio 面对中国甲方的时候,同样...
App设计
二次确认的主要作用是防止误操作,以及警示操作带来的后果,避免用户无意之间执行了本不想做的操作。从用户流程图中我们不难...
二次确认
优步在遍布 65 个国家/地区的 600 个城市中提供服务,拥有超过 7500 万用户,已成为许多人的默认交通选择。 这种应用的规模...
uber
本篇研究方法——对比法,是社会科学中运用较广的方法。对比法旨在将有一定关联的现象和概念,进行比较对照,判断异同、分析缘...
支付设计
Persona,在国内通常被称为「用户画像」,其概念最初由 Alan Cooper 在 1999 年提出[1]。由于用户画像具备帮助人们在设计过程...
产品设计
党的十九大报告指出——创新是引领发展的第一动力。 根据省政府建设数字政府的部署和公安部在今年全国公安厅局长会议提出的科技...
交互设计流程
一个完整的设计流程应该是怎样的?有哪些方法可以帮你做好设计评审?来看这篇干货! 一、「设计评审」的定义 「设计评审」在...
交互评审