流畅的动效体验
我如何推动一个以设计主导的非营收项目落地
项目时间表
目标
24.5-持续中
通过动效改善体验
Project owner
UX design
UI 设计师
产品
前端开发
其他贡献者
我的角色
这个项目是如何开始的？
这始于与设计总监和 leader 的周会聊天，我们讨论了产品线中潜在的改进点。我提到动效有些滞后，于是我们达成一致让我探索并启动这个项目。
现状
主页到列表
填写到订单
问题
Bug类问题
让我们推推研发修复这些问题
下一步：获取改进的想法与方案
体验优化类
· 首页加载不流畅，导致卡顿
· 进入列表页面时会出现闪烁
· 模块加载不一致，导致页面不稳定
· 列表大中小切换时的卡顿
· 预订触发了两个加载
· 支付后加载了一个不必要的白屏
· 过渡突兀，缺乏流畅性
· 页面瞬切缺少丝滑生长
· 过多的阻断打扰了用户流程
· 模块需要更好的反馈和引导
· 针对特定场景定制的情感设计
竞品分析和头脑风暴
我们研究了竞品和动效设计的领先APP，以补齐短板促发灵感
非阻断式加载
列表到订单过渡
打开后备箱过渡
列表页生长长动效
曲线规范
首页引导
Pressed状态
我们的想法
过渡；自然加载；动效作为反馈；
整理我们的想法
将我们的解决方案分为三个类别，并为每种设计方法设定目标
页面过渡
列表到订单过渡
打开后备箱过渡
页面内动效
生长
加载
曲线
列表页面生长动画
动效曲线规范
非阻断式加载
模块动效
Pressed状态
首页引导
增强沉浸感
更丝滑
更直观易懂
减少焦虑
改善反馈
设定优先级
我们根据「当前体验的糟糕程度」和我们解决方案的「对用户感知的显著性」来设定优先级
体验优化类
推动以用户体验为中心的项目而没有直接的商业利润是很困难的。在设计师没有开发资源的情况下，我必须获得产品经理的支持
汇报，汇报，以及汇报！
通过不断汇报方案与想法来获取 leader、设计总监以及产品总监的支持和合作。带有一部分运气成分，产品总监认可我们的目标，并准备将我们提议的方案分批夹带到他们未来的迭代中。
将项目分开，逐个上线
通过共享表格追踪每个设计方案的进度
Bug类问题
体验优化类
最终交付
列表页面生长动效
目标：通过逐步加载让页面更易懂，帮助用户理解其结构，并在最后重新将视觉重心吸引到营销位。
Before
After
非阻断性加载
Before
After
其他
弹性反馈
订单加载
相较滴滴，针对接送机场景有更多保障
典型用户
20-35岁
60%男性
相较价格更重视服务
场景
在订购机票后预订接机服务（无论是在携程上还是其他地方）。
x 接送机