设计:UI 动画优化技巧

1,397 阅读2分钟
原文链接: zhuanlan.zhihu.com
简评:本文介绍了几种优化动画的实用技巧,从优秀到卓越往往体现在细节处。

tabs slide 内容过渡动画

  • 好的动画会淡化页面直接的过度。
  • 但更好的做法是使用连续的动画来来过度内容

当我们在设计交互式选项卡或弹出式菜单的时候,尝试将内容的问题和打开它的操作相关联,这样我们不单只能够实现一个很棒的过度动画,还可以清晰的知道不同内容直接的位置关系。如果你愿意还可以添加滑动手势。

连接卡片的共享元素

  • 良好的设计会使用向左或者向右滑动来过度屏幕中的显示内容。
  • 更好的做法是使用共享元素来建立两种状态直接的关系。

不同状态之间进行动画制作时,我们可以从共享元素出发,来链接不同的内容。例如右图 过渡前的卡片展开形成过度后的卡片。

使用瀑布流动画

左边的卡片通过滑动和淡入来显示。右边的卡片具有相同的动画,但每张卡片都有一个短暂的延迟。
  • 良好的设计会改变元素进入屏幕时的位置和不透明度。
  • 更好的设计是迅速错开最每个元素的显示,效果看起来会更好。

不同元素间动画相关联

  • 良好的设计会通过上下文中移动来显示动画。
  • 更好的动画是,当显示的内容的时候能够影响到周围的元素。

这种设计可以帮助用户感知到内容周围的元素。

让菜单显示在上下文中

  • 良好的设计会在点击的位置显示菜单。
  • 更好的动画是菜单内容从点击的地方展开

使用 button 展示不同的状态

  • 良好的交互会在点击按钮的时候显示指示性内容。
  • 更好的交互式使用按钮本身来指示不同的状态。

尝试使用按钮的容器来提供状态的可视反馈。

使用动画来强调重要的内容

  • 良好的设计使用颜色,大小和位置突出显示用户需要注意的元素。
  • 伟大的设计使用动画来关注那个重要的动作,而不会造成干扰。
原文:Good to great UI animation tips
推荐阅读: 图片加载时使用 SVG 作为图片 placehold

极光日报,极光开发者旗下媒体。

每天导读三篇英文技术文章。