提升UI动效设计的可行性建议

作者:Pablo Stanley 让我们来看一些UI动画从一般到优秀的例子。你可以通过细微调整动画效果来提升你的组件的效果 列出的交互动画显示了状态之间的连续性 […]

2018年4月25日

作者:Pablo Stanley

让我们来看一些UI动画从一般到优秀的例子。你可以通过细微调整动画效果来提升你的组件的效果

列出的交互动画显示了状态之间的连续性,表示共用元素之间的关系,并且将用户的注意力吸引到操作当中来

为了创建这些动画,我遵循了Material Motion, IBM’s Animation Principles, and The UX in Motion Manifesto.

所有的交互都是使用早期版本的InVision Studio制作的你可以在这里下载源文件

 

让Tab里的内容滚动起来

左侧动图的内容淡入淡出,右侧动图的内容跟着标签滑动
  • 一般的动画,它的内容仅仅会从一个状态淡化到另一个状态。
  • 优秀的动画,是通过内容状态之间的移动来展现画面的连续性的。

当你设计交互式选项卡或弹出式菜单时,你可以尝试着将它们所在的位置与打开他们的动作相联系。这样不仅可以实现内容的可视性,还可以在所看到的内容上实现位置动画的制作。哦!当你在制作它的时候,记得添加一个滑动手势,这样当你滑动时,它就会把你从一个内容带到另一个内容。

 

连接卡片的共享元素

左侧动图是打开一个新的界面并向上滑动,右侧动图是扩展现有内容并填充屏幕。
  • 一般的动画,仅仅是使用向左或向上滑动的交互方式来的过度来显示屏幕上的详细信息。
  • 优秀的动画,通过共享内容来建立两个状态之间的连接。

在不同状态之间进行动画制作时,请查看它们之间是否有共享元素,如果有的话将它们连接起来。使用InVision Studio时,创建运动转换,在两个相链接的屏幕之间重复的元素会自动连接,这使制作原型动画变得更加容易。

你可以使用Motion Manifesto来查看可以应用的动画类型。

 

层叠(cascading,瀑布流)效果在界面中的应用

左侧的动图使用了滑动和淡入的交互方式。左右两侧的动图具有相同的动画,但右侧的动图中每个元素都有一个短暂的延迟。
  • 一般的动画,改变了元素进入屏幕时的位置和不透明度。
  • 优秀的动画,能够短暂错开每个组或元素。

如果要完成像右侧动图所示的效果,请尝试对元素每组内容的状态设置延时。因为每个元素都有相同的动效,所以是持续性的。即便是一个动画内容组,也不要单独给每个小元素增加动画,要保持动画短小。谷歌建议在一个界面中,开始时每个元素的延时时间不超过20毫秒。

你可以通过查看Material Motion中的编排原理以查看更多示例。

 

内容覆盖其他元素

左侧的动图仅仅是将新内容覆盖在旧内容之上,右侧的动图会随着内容的增长推出内容。
  • 一般的动画,只可以在上下文中移动并显示元素。
  • 优秀的动画,在自身状态发生改变的同时会影响周围的元素。

让用户知道元素所在的环境,即让内容拉扯推动周围的元素。有关更多示例,请查看材料设计中的Aware运动原理。

 

菜单显示在上下文中的方法

左侧动图的菜单从某一边飞入,右侧动图的菜单从触摸点扩展而来。
  • 一般的动画,菜单可以从打开它们的按钮的方向来显示新的内容。
  • 优秀的动画,菜单从触摸点扩展而来。

 

使用按钮显示不同的状态

左侧动图的按钮使用文字显示状态的变化,右侧动图的按钮使用颜色,形状,文字的变化显示不同的状态
  • 一般的动画,当用户发出指令时可以按钮旁边用文字显示状态的变化
  • 优秀的动画,当用户发出指令时是通过按钮的颜色,形状文字的改变来显示前后不同状态的。

请尝试使用按钮的样子来提供状态的视觉反馈。例如,你可以用微调器或加载动画替换CTA(Call to Action ); 或者可以背景添加动态效果来让用户知道他的操作正在执行。用哪个方案在于你自己,你的想法相当于用户的想法。

 

细微的动画更能使用户集中注意

左侧的动图使用颜色和位置的变换来使元素突出,右侧的动图使用细微的动画效果来唤起用户的注意力。
  • 一般的动画,使用颜色,大小和位置的突出来强调用户需要注意或采取行动的重要动作。
  • 优秀的动画,则通过使用动画效果来抓住用户的注意力,而不是对用户造成干扰。

当用户需要采取一些重要的行动时,请尝试通过使用动画来吸引他们的注意力。从细微的动画开始,逐渐增加变化(大小,颜色和速度的变化)。但当用户的注意力总是被细微的动画吸引时,影响就越小……并且就越不耐烦😱

 

 

结论:

我希望这些例子可以帮助你在为交互设计动画时做出更好的决策。有了像InVision Studio这样的新动画和原型制作工具,只要我们负责任的使用它,我预计我们很快就会看到创意互动的复兴。

让我们用动画来展示状态的变化,请注意必要的操作,确定元素之间的关系,并为我们的产品增添一些乐趣和个性。遵循这些原则,我们将把动画效果做得更好。

让我们快点行动起来在UI设计中制作能让人感到快乐的动画吧!

 

 

责编:张玲     翻译:于佳怡

原文:UI中优秀的提示界面

发表评论

电子邮件地址不会被公开。 必填项已用*标注