动效 自定义动画

自定义动画

动画可以大规模地应用在各种场景中,使应用兼具优美和功能。

图标类型

系统图标可以执行双重功能。

产品图标则让用户眼前一亮。

Material Design 自定义动画提升应用美感与功能性

图标 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

系统图标

图标可以提供双重功能。例如,菜单图标可以平滑的转换成后退图标,之后再转换回来。这个效果既告诉了用户按钮的功能,又给交互效果添加了一个极有效的元素。

菜单图标转换成后退图标,这说明了两个操作是关联的,且两者不会同时出现。必须按下返回按钮后才会回到带有菜单图标的上级视图。

播放按钮转换成暂停按钮,说明了两个操作是关联的,按下一个后才会出现另一个。

当按下浮动操作按钮时,加号转换成了铅笔。这指明了铅笔是主要的创作方式。

产品图标

带动画的产品图标应该在应用被打开时呈现优雅且惊艳的动画。

Inbox 的产品图标动画会在用户首次打开应用且需要登陆的时候出现。

日历的产品图标动画,会在首次加载用户的日历数据时出现。

相册的产品图标动画,会在用户首次打开应用时出现,以呈现出热烈的欢迎。

Gmail 的产品图标动画有一些有趣的个性,但仍保持了相似的显示效果,同样会在用户首次打开应用且要求登陆时显示图标动画。

插画 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

在图片和插画中使用微妙的动画,可以为用户带来更有趣的体验。

当出现意外的错误时,可以把它当成一个欣赏动画的机会。

在日历添加任务的等待过程中,自行车动画可以让用户在等待期间保持愉悦。

当用户完成个人目标(如处理完收件箱中的所有邮件)时通过动画奖励用户,可以创建用户和应用功能更深入的互动。

通过为新功能添加动画插图的形式,来让用户学习产品的功能,会让用户更难忘。