7个小技巧大幅度提升你的UI动效品质

自译外文 分类: 经验/观点 版权: 原作者: Pablo Stanley
870 21 14 0
2018-05-13
5.5
编辑推荐

Image title

优秀的动画,对于提升UI的逼格非常重要,在大多数情况下,针对动画进行合理的调整,就可以让你的UI变得更加出色,好的交互设计,能够展示状态之间的连续性,以及不同UI元素的的关系,同时,能够使得用户的注意力聚焦在重要的地方。

所有的交互都是用体验版本的InVision Studio做出来的,你可以下载源文件


将选项卡种的内容做成可滑动的

左图的内容淡入淡出;右图的内容随着标签一起滑动。

左图的内容淡入淡出;右图的内容随着标签一起滑动。

  • 好的动效将内容从一个标签页淡出,再淡入到另一个标签页;

  • 优秀的动效让页面内容在不同标签之间移动,能够展现过度时的连续性。

当你设计选项卡或者弹出菜单这种交互时,试着将内容的位置与打开它的动作相关联。通过这种方式,你可以将你的内容和内容的位置都做成可视动画。做这种页面时,也加上一个可以在不同内容之间切换的滑动手势。


关联卡片上的相关元素

Image title

左边的卡片打开一个新页面是滑上来的;右边则是扩展了卡片并使其占满屏幕。

  • 好的动画展示信息详情页时使用左滑或者上划的方式;

  • 优秀的动画会在有共同信息的两种状态之间建立联系。

当给两种不同的状态的过渡做动画时,看看这两种状态之间有没有共有的元素,如果有则可以在动画中体现两者的联系。在InVision Studio中,两个相关联的页面有重复的元素时,当你创建一个Motion的时候,系统会自动在两个元素之间创建关联动画。这让创建动画原型变得轻而易举。


在内容中使用瀑布流效果

Image title

左边的卡片通过滑动和淡入的效果显示;右边的卡片在同样动画的基础上,让每个卡片都有短时间的延迟。

  • 当卡片进入屏幕时,好的动画改变它的位置和透明度;

  • 优秀的动画则会快速蔓延每组元素。

要达到瀑布流的效果,可以将每个动画元素都保持相同的动画速度以及持续时长,并对其按序设置一定的延时。要将瀑布流的形式应用在组里,不能应用在单独的元素上。保持动画的快速简介,谷歌的提醒功能里,每个元素出现的间隔不超过20毫秒。点击动画里的瀑布流形式查看更多案例。


让内容推开其他元素

Image title

左边的动画中,动画效果直接出线在其他内容上面。右边的动画中,随着动画的扩大,其他内容被推开了。

  • 好的动画直接在画面中移动和展示元素;

  • 优秀的动画则会展示出动画对其周围元素的影响。

让内容与周围的环境相互动。这意味着让内容吸引或者赶走它周围的元素。


让菜单从按钮中出现

Image title

左边的菜单从下面滑入;右边的菜单则从打开它的按钮中扩展出来。

  • 好的动画菜单出现的方向与打开它的按钮的方向保持一致;

  • 优秀的动画菜单从打开它的按钮中展开。


用按钮展示不同的状态

Image title

左边的动画使用文字表明状态;右边的动画则直接使用按钮展示不同状态。

  • 好的交互将活动状态用文字方式展示在按钮旁边;

  • 优秀的交互则直接用按钮展示不同状态。

试着用按钮本身展示不同状态。例如:用旋转菊花或者加载动画代替CTA;或者在按钮背景中加一个动画表明进程。具体方式取决于你,核心就是利用好已有的用户已经与之交互的空间。如果你使用按钮颜色去确认成功状态,对于用户来说就是一个大彩蛋。


将用户的注意力引导到重要的东西上

Image title

左边的案例使用颜色和位置让元素突出显示;右边的则使用了一个简单的小动画吸引用户的注意力。

  • 好的设计使用颜色、尺寸和位置,来突出需要格外引起用户注意并触发用户行为的重点内容;

  • 优秀的设计使用动画引导用户将注意力放在重要的地方,并且不会打扰到用户。

当用户需要做出一些重要的操作时,试着将这些操作的按钮以动画的方式展现,以吸引用户的注意力。可以做一些简单细微的动画并逐渐增加强度,并根据行动的重要性改变按钮的大小、颜色和动画的速度。记住只在最重要的操作上使用动画,因为你用的动画越多,它就变得越不重要并且会打扰到用户。

Yice

https://dribbble.com/Yice

17粉丝/4关注

手游社区UI设计一个专注于图片调色的APP(Colorful)

Yice

Yice

https://dribbble.com/Yice

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN