推敲：一次导航动效

Good animation is invisible. You shouldn't notice that you're looking at animation.

好的动效是隐形的，你不应该注意到自己正在看动效。——Pasquale D'Silva

项目背景：公司主打的新闻App，需要对导航动效进行优化，下图是优化前效果：

优化目的：

1.隐形，流畅但不打扰用户；

2.指向，当前版本从左往右的频道浏览数据衰减很快，如果有更明确的滑动“方向”，能鼓励用户继续探索。

设计方案：

首先针对当前动效，提炼出待优化的问题：

1.没有中间过程，即内容切换完成后导航才变化，会打扰用户；

2.文字颜色变化没有过度，显得很突兀；

3.页面是简单的左右滑动动效，和导航的上下动效不一致。

在Framer这一高保真原型工具的帮助下，初步解决方案为：增加了滑动的中间过程和文字颜色变化，同时页面也增加了与导航类似的“前缩后伸”动效，如图示：

此方案基本上达到了“隐形”的目的，采用该方案的版本已上线。

但该动效中，“能够向左滑动继续探索”的指向并不明显；于是继续探索解决路径，主要有三种：

A.保留当前导航形态，“上下”形变改成“左右”形变：

B.在A方案的基础上，针对“颜色花”、“元素重”、“文字颜色渐变难看”的问题，有以下简化方案：只用一种选中色，用下划线代替块，用颜色移动代替渐变。

C.更分散的探索方案，其中一种利用波浪动效来强调运动，突出页面的运动：

方案选择：考虑到性能和开发成本，以及出于减少过度设计的考虑，最终选择是B方案 —— 更简洁的形态意味着更好的扩展性和不打扰用户，明确的方向指示意味着用户更可能继续探索更多频道。

针对频道数量将增加到10个以上的现状，导航也支持首尾循环(如果数量大于5个, 滑动动效只经过首5个和尾5个频道，避免过快动效)：

PS. 关于原型工具：

以上每种方案都经过三种以上形态的探索，Demo总数量接近20个。这时使用Framer的优势就能体现出来：1.模块代码，即拆解的具体动效，能任意复用到其他地方；2.利用变量/数组，能随时调试动效曲线/字号/间距/颜色等参数。