Motion 自定义创意动画

自定义创意动画

动画可以在广泛的场景下使用,也可以有多种尺寸范围,用来连接美感和功能性。

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

系统图标

一个图标可能有多种功能,例如一个菜单图标可以流畅的转变为返回图标,然后再变回来。这个效果既能提示用户这个按钮的功能,又增添了交互的奇妙感。

菜单图标变形为返回箭头图标,这个动画表示开启菜单和返回这两个功能有关联,两者只能存其一。只有按下箭头按钮的时候,才能够返回到菜单按钮以及上一级视图。

播放按钮变形为暂停按钮的动画表示播放行为和暂停行为有所关联,点其中一个按钮,就会让另一个按钮出现。

在点击 FAB(Floating Action Button)的时候,加号变成铅笔,这表示在出现的一系列按钮中,铅笔代表着最为主要的添加功或和创建模式。

产品图标

产品图标的动画应该能够展现产品的精致和优雅,让 APP 的启动时刻变得细腻。

当用户第一次打开 Inbox,并被要求登录时,出现Inbox 的产品图标动画。

当用户的日历数据第一次读取时,出现日历的产品图标动画。

当用户第一次打开图片时,出现图片的产品图标动画,让用户感到被热烈的欢迎。

当用户第一次打开 Gmail,并被要求登录时,出现 Gmail 的产品动画,但是这个动画和 Inbox 的那个比,尽管信封展开的效果类似,但是多了一点轻微的愉悦性。

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

给图形和插画制作精良的动画,可以为产品用户体验增添愉悦感。

当需要提示用户出现未知错误时,可使用动画,这是愉悦用户的良机,缓解他们的焦虑。

当日历开启目标功能时,会根据日程安排时间,添加目标完成时的自行车动画能够有效的愉悦用户。

当用户完成个人目标时,可以用动画的形式奖励用户,比如 Inbox 的收件为零时的这个动画,这个动画结合了功能,深度愉悦用户。

当应用开启新功能时,使用插画动画的形式,可以有效的用户教学,让用户记忆深刻。