APP动效交互|切换动画设计

功能性的动画微妙，清晰，逻辑清楚，能够减轻用户认知负担，建立更好的人机交互体验。而且，它还可以赋予界面生命力。

动画通过改变切分元素，改变它们的形状和大小赋予页面活力。你应该利用功能性动画来让切换变得更加流畅自然，把切换更加合理，帮助用户理解内容层次。

成功的动画设计应该具备以下几个特质：

1.响应式的

视觉反馈在界面设计中非常重要，因为对于用户来说这符合他们的心理预期。在现实生活中，按钮，开关都是会给出相应反馈的，这是他们所期待的事物运行的模式。

用户界面应该快速准确地响应用户输入，并且展示新页面或者新元素和触发它们的元素之间的关系。

2.关联的

将引起变化的按钮或元件与变化之后的界面联系起来。这种关联背后的逻辑是为了让用户能够更好地理解页面布局上发生的变化以及变化的原因。

下面是两种菜单呼出动画。在第一个例子中，菜单的出现离触发按钮很远，打破了这种关联关系。

在第二个例子中，菜单从按钮的右上角弹出，直接与触发点联系起来了。

另一个例子是，按钮在点击之后发生了功能变化。“播放”按钮点击之后变成“暂停”就是一个很常见的例子，这种变化让用户很容易理解两个功能之间的关联性：点击“播放”功能之后“暂停”功能启用。但这种切换必须是连续的才有意义。

3.自然的

避免突然的切换。任何一个动画都应该是自然的。在物理世界中，一个物体的加速和减速是受它的质量和表面摩擦力影响。同样，开始或停止在界面上也不会自动发生，而是需要某种力量去推动。

下面这个例子中，用户点击了列表中的一个项目来放大查看它的详细信息。在展开的过程中，小卡片通过一个弧线运动到它的目的地，在上升的过程中，慢慢减速直到停下来，这个交互过程是自然的。

4.有目的的

动画的特殊性决定它通常都是交互过程中的焦点，没有任何静态的图片或者文字可以跟它媲美。一个好的动画可以帮助用户顺畅地衔接到下一个页面。

在用户无法判断下一步将发生什么的时候，动画可以很好地缓解这个盲区，至少可以指出即将发生事情的方向，让用户觉得新内容的出现不至于那么突兀。

Mac系统在最小化窗口的时候用了“神奇效果”的动画，把窗口的两种状态很好地衔接在一起。

另一个很好的例子是父页面和子页面之间的切换。当用户选择列表或者卡片中的一个项目放大查看它的详细信息的时候，让用户可以保留父页面的情况下查看子页面信息。

5.快速的

当页面元素在不同位置之间移动或者切换自身状态的时候，变化的速度要足够快，让用户感觉不到等待，但是也要足够慢让用户完全理解。所以这个时间尺度要把握好。

不能让动画速度过慢导致一些不必要的延迟。

动画速度要快让用户感觉不到等待。

让切换时间缩短，因为用户会经常看到这些切换。保证切换动画时间在300ms以下。

6.清晰的

切换动画不宜在同一个APP中做太多，因为当很多元素都在界面上移动的时候用户会晕。

切换动画应该要清晰，简单，连续。切换动画的原则就是“少即是多”。我们应该聚焦于切换动画对用户来说的实际意义来设计。

总结

综上所述，动画不是随机的，每一个动画背后都应该有特定的目的。不管你的APP事趣味型的，游戏型的，还是严肃的，使用动画的时候都请注意以上几个原则，它可以帮助你提供一个清晰快速流畅的用户体验。

用心设计，对每一个细节都保持敏锐是你取得成功的关键。

本文由stella投稿发布

微信号:SS工作室