当前位置:首页 >UI学院 >学院新闻

没有原则的动效,不是优秀的动效

生动用诺言作者:生动用诺言 发布时间: 2024-09-09 09:14:23 浏览量:340次

我们在APP中感受到真实的触感,多亏了多样的动效。但是要知道,动效要用得恰到好处,才能提高用户的使用感。所以我们常说,没有原则的动效,不是优秀的动效!

动效在APP内可谓是无处不在了,看了这么多动效设计的分析和案例,你是否想更深入了解这些动效,到底是遵循了怎样的原则,才能做出如此逼真且优秀的体验呢?

动效运动的规则和原则,多少取决于我们对于物理世界的认知,即动效的运动规律要符合物理规律,因感受到如同现实世界般的亲切自然。

本文将着重诠释"缓动"这个概念,在动效中加入缓动的效果能够让运动显得更加自然,这是运动的最重要的基本原则。这里我们就用图表的方式来表达运动:横轴表示时间,纵轴表示在一个方向上的位移。

1 △ 匀速直线运动的座标图

没有原则的动效,不是优秀的动效

均匀的变化通常只会用在色彩的改变或者透明的改变上,一般来说,我们也可以让背景元素均匀运动,而前景元素保持不变,来呈现它的状态,就像上图一样。

2 △ 加速曲线

没有原则的动效,不是优秀的动效

当物体加速飞出屏幕的时候,可以使用这种加速曲线,比如界面中被用户使用滑动手势甩出去的卡片。但是请记住,只有当运动对象需要完全离开界面的时候才会这么使用,如果它还需要再回来的话,则不行。

3△ 减速曲线

没有原则的动效,不是优秀的动效

减速曲线可以适用于多种不同的 UI控件和元素,包括从屏幕外进入屏幕内的的卡片、条目等。

4 △ 对称和非对称运动的差异

没有原则的动效,不是优秀的动效

根据 Material Design 的规范,最好使用不那么对称的增速和减速的过程,让动效看起来更加真实。同时大家会更加在意运动的结果,曲线的末端,也就是运动结束的过程最好进行适当的强调,换句话说就是减速过程持续的时长最好超过开始加速的时长,用户将会更加清楚地观察到运动的最终结果,从而更好地明白运动的终止状态。

没有原则的动效,不是优秀的动效

卡片元素从屏幕上运动的时候,不对称的缓动曲线

没有原则的动效,不是优秀的动效

抽屉式导航随着缓动曲线从屏幕上隐藏

没有原则的动效,不是优秀的动效

导航菜单的出现和消失

没有原则的动效,不是优秀的动效

贝赛尔曲线函数 cubic-bezier()就是用来描述运动曲线的,不同类型的 cubic-bezier()的曲线和参数如上图所示。

没有原则的动效,不是优秀的动效

动画曲线有助于正确传达讯息,甚至表达情绪和感觉。在上面的图例当中,每个元素的运动位移是完全一样的,所消耗的总时长也是一样的,但是运动的速率变化是不同的,这一点也体现在曲线上,所表现出来的情绪也不同。

通过调整曲线,你能够让物体的运动轨迹尽可能接近现实世界。

是的,虚拟世界多少取决于现实世界,或是对现实世界一些动态做了夸大扭曲等艺术处理,以模拟现实世界的动态感受在虚拟的数据界面上体现。当然,即使是遵循这么多规律,动效的设计依然是一门艺术,而非单纯的科学,多做测试多摸索总是有必要的。熟练掌握某款动效的软件也能对艺术创作产生事半功倍的效果。

火星时代教育 影视学院刘老师,为你解答
  • 相关推荐
  • 人气推荐
  • 教程分享
  • 相关标签

微信扫码在线答疑

扫码领福利1V1在线答疑

点击咨询
添加老师微信,马上领取免费课程资源

1. 打开微信扫一扫,扫描左侧二维码

2. 添加老师微信,马上领取免费课程资源

×

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定