动效设计不一定非得复杂化——谷歌动效...

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-禁止演绎
3356 0 14 2021-07-23

动效的运用可以让我们的界面更具表现力的同时,更易于被理解与使用。


我们早期的GUI其实只有视觉和交互设计,直到近几年的硬件技术发展成熟,动效才开始出现并逐渐模糊了与传统动画之间的界限。

可能对于做动画设计的人来说,需要花一辈子时间才能真正掌握《迪士尼的12条动画原则》,但这是否意味着设计UI动效也需要如此复杂?

动效的主要作用是表现UI元素间的关系、引导用户的操作;同时,动效还可以为界面里的图标、Logo和插画等赋予性格特点。

不过,在我们追求界面表现力之前,我们需要先保证界面的可用性。以下,我们会从一些基础的过渡动效开始讲解。



过渡动效的形式


过渡动效的设计关键在于简单和一致性。因此我们可将其形式分为2种:容器内过渡,非容器过渡。

一、容器内过渡


如果过渡对象是一个容器(比如按钮、卡片或列表等等),那么过渡的动效会基于这个容器的边缘进行设计,这种形式可以分为3步来实现:

1. 首先是容器形态的过渡变化。如下图,从一个圆形按钮过渡转变成一个铺满界面的矩形。

2. 其次是容器内元素的同步缩放。元素需顶部固定于容器再进行缩放,才能在容器与元素之间建立一个清晰的联系。

3. 最后是让退出的元素随着容器加速而淡出,并在容器减速时,淡入输入的新元素。让元素的淡化与其移动的速率相等,可以让这个过渡效果无缝衔接。

将这种运动模式应用到所有涉及容器的过渡中,可以让我们的用户建立统一的界面理解。

同时由于这种动效的承接,可以对模块“从哪来”“到哪去”有更清晰的表述。为了显示这种模式的灵活性,这里将它应用于五种不同的场景:

还有些容器的过渡只是单纯从屏幕的上方滑进,不过它们滑动的方向都是由与它相关的组件位置决定的

如下图中,点击左上角的导航按钮,导航栏会从界面的左侧滑进:

如果一个容器是在屏幕中淡入并放大出现的(如弹窗),那它放大的过程其实是从95%开始而不是从0%开始放大,因为这样可以避免这个过渡过程引起用户太多的注意。

所以像这种缩放动效,是从运动曲线的峰值开始,再慢慢减速到静止的状态。

值得注意的是,这些容器的退出只会进行淡化而不会再缩放,以便于用户将注意力集中在新的内容上。


二、非容器过渡


如果过渡对象并不是一个成形的容器(比如点击底部导航栏切换整个页面等等),我们可以分2步来设计过渡动效:

1.退出的对象淡出,同时进入的对象淡入;

2.当进入的对象淡入时,也是逐渐放大的过程。注意这种缩放动效只适用于进入的对象(退出的对象只需淡出),这样更有助于强调新进入对象的内容。

如果在界面中,退出与进入的对象之间已经有清晰的空间或逻辑关系,那么“共享运动路径”可以帮我们强化这种关系表现。

比如下图对步骤的导航,每个退出与进入的对象都是共享一段垂直的滑动路径。(退出与进入对象在其运动路径的中间进行淡出淡入,而不是从路径的开头就开始运动)



如何实践应用


一、保持简单

考虑到导航栏的使用率很高,其过渡动效设计更需要考虑功能而不是样式。

但这并不说明这些过渡动效不可以有风格化的设计,只是我们需要确保这些风格是建立在其品牌基础上。通常,一些吸引眼球的动效设计会被应用在图标、Logo、加载动画或空状态中。

不过像上图这些过渡动效,虽然不会吸引用户太多的注意力,但可以让一个App的可用性得到提升。


二、正确的运动时长

导航的过渡不能太慢,它需要让用户快速进入对应的功能;但也不能太快,这会让用户在操作过程中迷失方向。

过渡动效持续的时间是由过渡对象的占屏比决定的。由于导航的过渡通常是包含整个页面的切换,所以运动的持续时间为300ms较为合适。相较之下,如果像开关这种小组件的过渡,只需要持续100ms即可。

如果你觉得过渡得太快或太慢,可以以25ms为单位进行调整,直到达到适当的平衡。


三、不对称的缓动形式

缓动描述的是运动对象加速、减速的速率。大多数情况下,过渡动效需遵循Material’s standard easing规律,其实这是一种不对称的缓动形式

运动对象经过快速加速后,再缓缓减速的过程。这种缓动形式能让运动对象更加真实,因为我们现实生活中的物体运动也不会突然开始或停止。

如果选择了对称或线形的缓动形式,那将会让我们的过渡动效显得特别僵硬。


好戏刚刚开始


以上介绍的运动模式与实例应用,可以为我们的产品塑造出实用且微妙的动效表现

一旦这些过渡动效处理好了,我们就可以开始为界面赋予一些性格化的表现。而这通过简单的动效是远远不够的,我们需要用到一些动画技巧才能实现它。

Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票