首页切换动效的设计探索
写在前面
而“智慧出行”希望消除这个“心理预期”。
输入出发地与目的地，就直接给出所有的交通方案。包括路线与出行建议，并且支持多程合并下单。
某种程度上说，“智慧出行”是火车、飞机、汽车、中转、多程等所有出行方式的一个综合解决方案。
设计目标
如图可见，现在智慧出行首页的入口，放在了页面的右上角，点击切换之后，页面存在两个主要问题：
第一：产品感知的缺失
由于没有文案的辅助说明，“高级模式”，“智慧出行”等新名词，对用户而言都太难理解了。
第二：转场效果的突兀
现在的切换动画就只是简单的突变而已，十分生硬。
此次改动由设计组发起，没有其他新增功能需求，不变动现有页面结构。
设计策略
第一：传达产品感知
顶栏Tab区域是这次设计的重心，它将是我们传达产品感知的关键。
那么既然“智慧出行”是火车、飞机、汽车出行方式的整合，我们就利用动效来传达这个产品特点。
我们设置了一个消失点。在转场开始时，火车、飞机、汽车图标同时向左移动，在消失点完成合并消失，随后，智慧出行图标立即从消失点出现。
以此来隐喻，智慧出行是火车、飞机、汽车的整合。
第二：让切换转场流畅起来
主要处理两个问题：
1、页面切换前后的内容过渡；
2、地图作为新要素如何加入。
而且切换前后都是首页，我们不希望页面有突变的感觉。
我们采用了一个很像“下拉刷新”的形式，作为整体效果的基调。
地图，被“藏”在了原页面的背后，在页面移动时露出，然后在新的页面上升时，再被“顺势”地推动并展开。
最终达到页面顺滑切换的效果，像是没有跳转页面一样。
设计落地
那直接把以上两个部分的动效直接的拼到一起，是不是就完成了？
调整动画时间轴
如果直接简单地组合在一起，会有那么一个瞬间，页面的内容非常少，产生有巨大的割裂感。
这是由于两个部分的动画如果一起消失，一起出现。当完全消失的关键帧重合时，就出现了如上的空白情况。
于是我们错开了两个动画时间，避免了割裂感的同时，也让整体更具有“节奏感”。
最后调整了动画的速度，避免因为错开动画，而导致整体时间过长。
切换回去的动画并不是简单的倒放，也是单独调整了顺序时间的，这里便不再展开赘述。
设计输出
最终我们交付到开发的是如下的文档。
由于穿插的动画很多，我们截取了关键帧，并标注了关键帧之间的每个动画参数。尽可能的直观详细。
最后感谢你的阅读，期待我们下次再见~
智行ZXD