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

一、功能逻辑梳理

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

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

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

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

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

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

二、框架设计

方案A：聚合

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

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

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

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

案B：拆分

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

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

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

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

三、层级划分

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

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

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

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

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

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

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

四、视觉优化

1. 减线立面

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

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

2. 计符号化

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

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

3. 半拟物化计

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

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

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

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

五、优化对比

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

1. 购买详情列表

2. 支付选择

3. 优惠券选择

4. 增行卡

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