本文作者根据宜新首选两年的产品案例推导出两种用户体验设计方案。享受〜

当您遇到多个跳转逻辑和丰富的信息级UX任务时，请不要惊慌，深呼吸并向下看。

功能逻辑梳理

梳理业务和产品逻辑对于复杂的流程接口至关重要，然后再进行框架设计，添加，减少，相乘和划分类似的项目。

让我们举一个例子来说明问题。例如，该产品被称为“鑫鑫首选2年”，这是一种P2P财务整合产品。

这是产品的在线流程页面

结合购买流程的相关页面，我们可以根据用户的情况将产品使用逻辑分为两类：

在这里我们可以总结产品实际购买过程中的两个核心功能操作（购买金额输入+支付）和核心功能操作反馈（支付状态），3个辅助功能（银行卡选择，优惠券选择）选择付款方式）。

根据流程设计中的时间轴设计方法，我们根据用户流程的时间顺序进行分类。用户的顺序心理订购应该是：确认产品信息——输入购买金额——看看预期的回报金额— —是否有优惠券可用——付钱——付款是否成功——应付款项将返还的地方——好吧，我确认一下。

通过这种方式，我们可以推导出两种UX设计。

框架设计A聚合

根据在线界面设计，可以看出产品原型高度恢复，简单粗暴的是2核心页面（购买流程+付款结果）+ 2个触发子页面（付款方式+优惠券）+完整产品购买。

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

此外，子页面框架被设计为弹出窗口样式，这增强了页面连接并降低了页面跳转感。

这种经过深思熟虑的框架设计是设计中许多产品的保险选择，但事实上，随着用户的挑剔使用的增加，以及越来越高效和快节奏的生活节奏，也许我们可以尝试更多框架设计。突破。

方案B-split

如果我们拆分核心业务，我们可以获得一个全新的解决方案。 3个核心页面（金额输入+付款+付款结果）+ 1个触发子页面（优惠券）。

这种拆分设计应该是更好的用户体验，清除购买流程，最大化核心功能，并为购买流程添加一系列操作。

但是，这种看起来像用户体验的流程设计具有一定的业务转换率问题。这些产品最令人担心的是，有些用户在这个额外的购买步骤中迷失了，具体的数据变化反馈了我们。可能还从百度财务管理的变化中猜到，分裂设计在商业设计的目标中被打败了。

以上是百度财务修订前后支付购买流程的变化。

层次结构

事实上，我个人认为设计的等级划分可以理解为组合相似项目+排序的过程。坚持“不让我思考”的用户体验原则，从界面的视觉表达中简化复杂信息更有利于用户有效获取重要信息，从而有助于“购买”行为。

这种简化信息的处理不仅是加法和减法，还包括信息的合并和折叠。

我们回到上一个产品的例子。对于在线界面设计，所有信息都以平铺方式显示，并且没有分层信息分区。经过分析，我们可以将页面信息组合成三大块：贷款金额和收入，付款方式和优惠券。

贷款金额和预期收益应该是相关信息，因此它分为一个模块。

付款方式与用户购买的充值操作结果没有区别，可以在子页面模块中显示：2种付款方式（余额或银行卡）

优惠券和红包具有相同的概念，可以组合和显示。

优先级排序后，页面的模块显示为：贷款金额和收入，优惠券，付款方式。

视觉优化1.减少线条立面

在前一篇文章中（正确的方式打开新项目设计0-1），分割线框架设计的优缺点，分割线设计更适合信息密集且强调信息显示效率的产品，但是界面将带来强烈的分裂感，这会干扰阅读。

在这里，我们可以用模块化面和面之间的间距替换一些分界线，以实现双赢效果。

2.设计符号化

合理使用符号设计可以增强用户对特定功能的识别和识别，例如输入金额前的人民币符号，优惠券前的小图标，以及支付方式中银行前的LOGO，这些功能比直截了当的文字说明。 。

突出显示广泛信息列表中特定功能的符号表示也有助于打开信息差距并提高用户效率。

3.半艺术设计

支付购买流程界面设计，我们有两点需要注意：

在设计中，将遇到许多与离线产品结合的使用场景;用户在此过程中具有高损失率。

因此秉承商业设计的核心精髓，在支付购买过程中尽可能通过用户体验技能留住用户，可以通过半实现的增强现实场景降低用户信心感，简化用户操作，简化流程操作，并简化。

原2个半物化场景修复设计实例

优化比较

最后，我将给你一个程序A和旧版本的在线比较：

购买详情列表

付款选项

优惠券选择添加银行卡

作者：娜娜，高级用户体验设计师作品，微信公众号，“早安，小姐离开”。

本文最初由@Nana发布。未经许可，禁止复制。

该地图来自Unsplash，基于CC0协议

« 江湖商圈2.0系统的“一元云采购”上线，超低成本迅速引爆流量！ | 江湖科技的整个行业直播解决方案想要不可替代的必须与众不同！ »