优秀的UI动画设计技巧

我们来看一些UI动画从好到优秀的例子.通过这里那里的一些调整,你可以用动画来改善你的UI模式.列出的交互代表了状态之间的连续性、共享元素之间的关系,并让用户注意到他们应该注意并采取行动的事情.为了创作这些动画,我遵循了MaterialMotion、IBM的动画原则和animation宣言中的指导原则.所有交互都是使用早期版本的InVisionStudio进行的.

01滑动标签的内容.

左边的内容淡入淡出.右边有标签的幻灯片.好的动画把内容从一种状态变成另一种状态.一个优秀的动画通过在不同状态之间移动内容来显示过渡的连续性.当您设计像标签或弹出菜单这样的交互时,请尝试相对于打开它的操作来定位内容.这样,您不仅可以设置内容的可见性,还可以设置位置的动画.哦,当你浏览它时,添加一个滑动手势,将你从一个内容带到另一个内容.

02连接卡的共享元素.

左边的内容打开一个新的屏幕,可以向上滑动.右边的卡片展开并填满屏幕.一个好的动画使用诸如向左推动或向上滑动的过渡来在细节屏幕上显示内容.一部优秀的动画,通过动画分享内容,建立两种状态之间的联系.在不同状态之间制作动画时,检查它们之间是否有任何共享元素,并将其连接起来.使用InVisionStudio时,创建Motion变换时,两个链接屏幕之间的重复组会自动连接,这使得动画原型制作变得容易.查看运动宣言,了解您可以应用的动画类型.上面的例子使用了掩蔽、转换、养育和放松原则的组合.

03在内容中使用层叠效果.

左边的卡片通过滑动和淡入显示.右边的牌动画一样,但是每张牌都有短暂的延迟.一个好的动画会在材料进入屏幕时改变它们的位置和不透明度.一个好的动画很快就会错开每个组或者元素的出现.要完成瀑布效果,请尝试对每个内容或每组内容应用延迟.保持同样的放松和持续时间,所以感觉一样.但是,不要级联每个小元素,让内容组有动画效果.保持动画快速活泼.Google建议在20毫秒内启动每个元素.查看MaterialMotion中的编排原则,了解更多示例.

04使内容排除其他元素.

左边的动画在其他内容的上面产生动画效果.右边的动画随着内容的增长推出内容.好的动画在上下文中移动和显示元素.优秀的动画表现的是它变化时影响周围环境的元素.让你内容中的元素理解你周围的环境.这意味着让内容吸引或拒绝它周围的元素.更多示例参见材料设计中的感知运动原理.

05使菜单出现在上下文中.

左边的菜单从下面飞进来.右边的菜单从创建它的操作按钮展开.好的动画菜单显示打开它们的按钮的方向.优秀的动画从创建它们的动作中显示一个伟大的动画菜单,并从接触点开始增长.

06使用按钮显示不同的状态.

左侧按钮显示指示状态的文本.右边的按钮使用容器来显示不同的事件.按钮旁边事件的良好交互显示.出色的交互使用按钮本身来显示不同的状态.尝试使用按钮的容器来提供状态的视觉反馈.例如,可以使用微调器或加载动画来替换CTA或者你可以在背景中添加动画来显示进度.解决方案取决于你,我们的想法是利用用户已经互动过的空间.如果您使用按钮颜色并复制它来确认成功状态,您将获得点数奖励.

07注意重要的事情.

左边的例子使用颜色和位置来突出元素.右边这个用细微的动画来引起用户的注意.好的设计使用颜色、大小和位置来突出用户需要注意或采取的重要行动.优秀的设计使用动画来吸引人们对重要动作的注意力,而不破坏它们.

当用户需要对重要的事情采取行动时,尝试设置行动来吸引他们的注意力.从一个细微的动画开始,增加与动作重要性相关的强度(大小、颜色、速度的变化),只用于关键操作——使用这个效果的次数越多,其影响越小……用户得到的麻烦越多.

结论.

我希望这些例子能帮助你在制作互动动画时做出更好的决定.借助InVisionstudio等新的动画和原型工具,我预测我们将很快看到创意互动的复兴.我们只需要记住认真负责地使用这个新的强大工具.

让我们用动画来解释状态的变化,引起对必要动作的注意,确定元素之间的关系,为我们的产品增加一些乐趣和特色.通过遵循这些原则,我们将动画变得越来越好.