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

一、功能逻辑梳理

在做框架设计与加减乘除合并同类项之前，梳理业务与产品逻辑对于复杂的流程界面来说是至关重要的。

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

结合购买流程相关页面，我们可以把产品使用逻辑梳理按用户情况分为以下 2 种：

这里我们可以归纳出在该产品的实际购买流程中涉及到 2 个核心功能操作（买入金额输入+支付）和核心功能操作反馈（支付状态）， 3 个辅助功能（银行卡选择、优惠券选择与回款方式选择）。

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

这样分析下来，我们可以推导出 2 个 UX 设计方案。

二、框架设计

方案A：聚合

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

这样做的好处是信息展示效率高，页面操作跳转少。

另外子页面框架设计为弹窗样式，增强页面联系，减少页面跳转迷失感。

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

方案B：拆分

把核心操作进行一个拆分的话，我们就可以得到一个全新的方案。 3 个核心页（金额输入+支付+支付结果）+ 1 个触发子页面（优惠券）。

这样的一个拆分设计应该会更好的提升用户体验，将购买流程清晰化，核心功能最大化突出，使购买过程一条线操作。

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

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