8.3 动画图标

动画图标

目录

用法

转换

状态

主题

用法

动画反映了图标以增添优雅和趣味的方式来表现的行为。

每个图标动画都与它们的视觉设计和执行方式相一致。

转换

转换将动画图标的两个视觉状态连接起来。两个图标之间的转换过渡表示它们已经相关联，按下一个图标可激活另一个图标。

      

1. 转换表示了两个图标间的关联性。

2. 转换用于图标间的切换，比如开关状态。

强调

动画图标转换可根据优先强调的等级来选择使用简单还是复杂的动效。

• 不突出的图标使用简单通用的动效

• 应用程序中的重要图标可以使用复杂的动效来强调

      

简单

在不需要强调的图标上使用通用的动效。淡入淡出、缩放或旋转都是图标间转换的简单方式。

复杂

细腻的动效能吸引注意并给重点图标增添趣味。

      

1. 当功能比样式重要时，使用简单图标转换。图标退出时使用简单淡出，进入时使用淡入，按比例细微扩大。

2. 细腻的图标转换用于重要的UI元素，例如音乐APP中的控件。

时长

图标动画越复杂，持续的时间就应该越长，以避免产生仓促感。为了在应用程序中保持一致性，应对类似复杂程度的图标使用相同的时长。大部分图标适合以下三组推荐时长：

• 简单图标动效：100ms

• 一般图标动效：200ms

• 复杂图标动效：500ms

1. 简单：100ms

2. 一般：200ms

3. 复杂：500ms

交错延时

图标集可以使用交错延时来表现进入的流动性。它们从左到右推动，给人一种前进感。

应用栏的图标从左到右使用交错延时的方式进入。

状态

图标动画可以用来强调状态变化。

图标使用动画来表示它们已经因被选中而改变了状态。

主题

动画应该反映主题风格。

这些图标动画的灵感来源于品牌logo和加载状态动画。

1. 图标动画

2. logo动画

3. 加载动画

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考