恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动效设计不一定非得复杂化——谷歌动效0.5倍速详解
5.5°
原创文章 / 规范/资料 / / 举报
1009 8 4 0

2021-07-23

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


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

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

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

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



过渡动效的形式


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

一、容器内过渡


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

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

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

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

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

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

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

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

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

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

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


二、非容器过渡


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

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

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

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

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



如何实践应用


一、保持简单

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

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

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


二、正确的运动时长

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

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

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


三、不对称的缓动形式

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

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

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


好戏刚刚开始


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

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

Powered by Froala Editor

  • 17

    作品

  • 50

    粉丝

  • 1

    关注

  • 图标还能怎么玩?微软官方分享背后的设计思路
  • 要放那么多信息点,如何用“间距设计”把内容讲清楚?
  • 6条提问套路,让你获得有效设计反馈
  • 【京东JDC分享】多做这一步,让你的方案更快过稿

猜你喜欢

    SDL艺术实验室

    SDL艺术实验室

    小有见解话唠
    • 50

      粉丝

    • 54.1

      人气

    • 864

      颜值

    作品

      SDL艺术实验室

      点赞:4

      收藏:8

      评论:0

      动效设计不一定非得复杂化——谷歌动效0.5倍速详解

      你确定要举报动效设计不一定非得复杂化——谷歌动效0.5倍速详解?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年07月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录
      全网福利资源合集搜索处解压码