交互动效——icon动效设计方法论

前言

关于动效方面的文章有很多，有讲动效质感的、也有讲动效基本原则的、还有讲动效如何和开发对接的，但具体落实到UI上的动效方法论却很少有人提及。比如icon动效该如何设计、下拉刷新动效有哪些思路和方法、Loading动效有哪些使用场景、页面切换动效的设计原则是什么等等。本篇文章主要分享icon动效设计的一些思路和方法。

目录

一.目的

二.使用场景

三.建议时间

四.思路和方法

五.案例实操

六.结语

一.目的

在交互过程中，app内各种图标都会随不同的事件发生不同的转换，跟传统的静态图标相比，动起来的图标能吸引用户的注意力，增加惊喜感

二.使用场景

1.切换功能

将两种不同功能的图标连接起来，在两个图标之间转换表示它们已链接，通过按下一个图标使另一个图标可用。比如播放图标和暂停图标的切换、导航图标的切换。

2.切换状态

两种或多种状态的切换。比如安卓手机下拉菜单，打开或关闭某一个功能菜单时，图标的状态变化，会带来更流畅的交互。

3.需要强调

通过图标本身的动态变化来强调被选中的图标。比如导航栏图标之间的切换，选中某个图标的时候，该图标会通过动态变化来表示已更改状态。

4.需要正反馈

好的产品会通过正反馈动效与用户建立联系。比如点赞动效、五星好评等等。

三.建议时间

1.简单动画与复杂动画

根据图标的强调级别来决定使用简单动画还是复杂动画。

简单动画：在不需要强调的图标上可以使用简单的动画。比如淡入淡出、缩放或旋转等等。

复杂动画：复杂的动画可以吸引用户的注意力并且为重要图标增添趣味性。

2.谷歌（Material Design）建议的动画时间

过渡动画越复杂，它需要的持续时间越长，关于“功能过渡”的动画形式，谷歌给与了建议的动画时间：

① 简单动画：100ms  

② 中等动画：200ms  

③ 复杂动画：500ms

3.一组图标动效

一组图标的动效可以延迟出现，以表达逐步递进的感觉。

四.思路和方法

1.基本属性调节

这是最为普遍也最为简单的一种图标动效思路，包含了位置、大小、旋转、不透明度等。把这些动效做好图标就已经比较出彩了。

例：用了缩放、位置的属性。

2.路径重组法

将图标的路径进行重组，构成一个新的icon，但是需要观察好两个图标路径之间的关系。比如“添加图标”先转换为两条竖直的路径，再重组成“关闭图标”。

例1：“音量图标”的两条圆弧路径重组成“静音图标”。

例2：“菜单图标”的三条路径重组成“关闭图标”。

3.点线面链接法

此方法适用于同类别图标之间的转换，比如“圆形图标”转换成“方形图标”时，可以用点作为介质，圆形先转换成一个点，再通过这个点转换成方形。同理，“A面性图标”转换成“B面性图标”时，可以用线作为介质，“A面性图标”先转换成一根线，再通过这根线转换成“B面性图标”。

例1：“搜索图标”先转换成一个点，再通过这个点转换成“关闭图标”。

例2：底部导航栏图标被选中时，由点转换成线性图标。

4.遮罩法

两个图标之间相互转换时，可以用其中一个图标作为另一个图标的遮罩，也就是边界，当这个图标放大的时候，因为另一个图形作为遮罩的缘故，转换成了另一个图形的形状。思路很简单，却有一点局限性，两个图形必须是包含关系。

例1：线性图标之间的遮罩。

例2：面性图标之间的遮罩。

5.分裂融合法

分裂融合法适用于其中一个图标是一个整体，另一个图标由多个分离的部分组成的情况。

例1：“菜单图标”的三条线融合在一起，形成“关闭图标”。

例2：“点赞图标”的左右两部分融合在一起，形成“位置图标”。“位置图标”内部进行融合，形成“闹钟图标”。

6.图标特性法

根据不同图标之间的特性来做动效，比如书翻页、水滴落下、铃铛摇动等等。这样的动效不仅能让图标变得有趣而且更具有意义。

7.避免过渡使用

图标的点击动效大多数都是重复的动效，所以在设计时，要避免“用力过猛”，会引起用户的审美疲劳。比如下方的菜单点击和关闭动效，就属于“用力过猛”，要杜绝（❌）

五.案例实操

1.背景

为底部导航栏图标设计动效，目的在于吸引用户的注意力，增加用户点击图标时的趣味性和惊喜感。

2.使用场景

因为是底部导航栏图标，每个图标有选中和未选中两种状态，同时希望增加用户点击时的趣味性和惊喜感，带有一定的强调特性。所以这里的使用场景为切换状态和需要强调。

3.思路和方法

首先对图标的两种状态进行分析，拿“首页图标”为例。

未选中状态：灰色线形图标。

选中状态：蓝色线形和面形结合的图标。

差异点分析：选中状态和未选中状态相比，①图标的外轮廓造型没有变化，描边颜色由灰色→蓝色，②图标内部多了两个元素，一个是浅色的房子图形，一个是深色的半圆形。

思路和方法：由差异点分析可以看出，图标选中状态和未选中状态相比，主要有两个变化的点。

针对变化点①，可以采用点线面链接法，即灰色轮廓先转换成一个点，再由这个点转换成蓝色轮廓。

针对变化点②，浅色部分的图形可以采用遮罩法，即浅色图形以圆形作为遮罩，出现的时候带有一定的弧度。由于前面已经采用了点线面链接法和遮罩法，为了避免视觉上看起来混乱，所以深色部分的图形用基本属性调节就好了，即不透明度和旋转的属性。

时间：这个图标动效属于复杂动画，根据谷歌对于复杂动画时间的建议，时间应该＞500ms，将变化点①和变化点②组合在一起，并对整体动效节奏进行调整，最后动效的时间为850ms。

4.整体效果

对其他四个图标如法炮制，整体效果如下。

六.结语

icon动效设计方法论在这里就分享完了，希望对大家做icon动效设计能提供一些思路和帮助。目前越来越多的设计师开始重视动效设计，但苦于没有相应的方法论作为理论支撑。接下来有时间我会继续和大家分享其它类型的动效方法论，比如下拉刷新动效方法论、Loading动效方法论、页面切换动效方法论等等。