大厂改版设计实战！携程金融授信流程体验升级复盘

项目背景

随着市场环境的快速变化，尤其是在经历了疫情之后，金融市场逐渐从增长期过渡到成熟期。在这一阶段，市场竞争愈发激烈，用户增长放缓。为了将产品、服务和用户体验做到极致，我们携程金融 UE 自发了「授信流程体验全面升级」的重大改版，旨在更好地满足用户需求，提升产品在市场的竞争力。

现有问题

在快速增长的阶段，设计团队为了配合产品的快速迭代上线，完善基础功能。这种做法虽然在初期能够快速响应市场，但也遗留了许多问题：

交互步长的冗余，受限于技术框架，原流程的任务均独立存在，无法形成有效的串联，导致用户在操作时需频繁通过中间页进行承接，视觉交互不一致，由于快速迭代需求上线，未能建立统一的规范。

设计方向

在彻底分析了现有问题及用研报告后，我们确定了视觉、交互、范围三个层面的改版设计框架：

1. 视觉层：通过优化页面结构和视觉表现，增强用户视觉体验的一致性。
2. 交互层：通过简化操作步骤，提升用户操作的便捷性和效率。
3. 范围层：通过组件化任务流程，实现金融全业务覆盖，提升设计和开发的效率，降低运营维护成本。

一、视觉层

考虑到金融自身体的独特性，我们围绕形态、色彩、字体、质感以及页面结构等几个方面进行设计。

1. 形态设计

我们在页面布局上做了优化和统一，采用“头部进度提示+主体任务展示+底部按钮操作”的方式，通过合理的间距将模块清晰的分割，使用户能更清晰的感知到任务进度和路径，增加预判感知。

2. 色彩选择

色彩设计上，结合金融用户画像偏好及携程蓝这一标志性色彩作为主色调，使得用户在携程、去哪儿、智行、铁友（金融主要依托在这些 APP 场景中）的金融服务中感受到一致的视觉体验，减少用户在不同服务场景切换时的认知负担。

3. 字体调整

针对金融服务的特点及用户阅读习惯，我们对标题和内容的字号、大小、间距进行全面调整，使得传递的信息更清晰易读。

4. 质感升级

在质感设计上，我们采用充满科技感的蓝色渐变风，不仅符合金融科技的行业特性，也与携程蓝相形契合，提升了产品专业度的同时也增加了视觉层次感。

5. 页面重构

通过头部进度区、中间任务内容区、底部操作区的清晰划分，每个部分都是采用组件化设计，增加了页面布局的灵活性同时降低维护难度，保证了不同任务的视觉视觉一致性，减少用户学习成本，同时增加他们对产品的信任感。

二、交互层

基于改版前存在的问题，我们通过创建一个整体的大组件来统一管理所有授信任务，所有业务的任务均可由组件统一调度，消除了任务中跳转的中间页，做到任务与任务间的无缝衔接。

1. 简化操作步骤

授信流程的步长减少了 50%，极大地降低了用户的操作难度，提升了体验。

2. 统一交互动画

确保每个动画都符合整体设计风格，增强用户感知一致性和专业性。

三、范围层

我们对金融业务任务进行归纳、整理、分类并进行组件化，像搭建乐高积木一样，使各类任务能兼容不同任务形态并融入整个授信流程，最终实现了全金融场景的覆盖。

1. 数据结果

目前新版授信流程已上线半年多，风控核身、任务完成率及授信流程等核心指标数据均表现良好，超出预期效果。数据结果验证了统一视觉与简化交互步骤能有效帮助用户聚焦信息、降低操作费力度，提升核心功能使用率。

总结

通过视觉和交互改版，与大家分享了我们在业务改版设计的探索，于整个项目是由 UE 自发推动，涉及的改动量和开发人日非常大，项目在未上线获得正向数据前，体验的价值无法被量化，期间跟老板、开发们无数次上会敲定方案，最终得以推动信贷业务线接新组件。上线后数据反馈向，切量 50%后持续观察两个月，数据依然稳定，有了数据的支撑才得将组件推动至全业务线。由于新版对每个任务项的监测更准确了，未来我们还会继续深入监测每项任务的数据表现，持续深入发掘可提升点，改善产品体验，发挥设计价值。

欢迎关注作者微信公众号：「TripDesign」