美文网首页设计产品运营商业模式UI设计学习
教你做有原则的UI动效,优秀的动效

教你做有原则的UI动效,优秀的动效

作者: dd0cdfcb3986 | 来源:发表于2019-06-25 15:40 被阅读0次

一款APP内的动效一般用在哪,用来干嘛呢!

那我们谈谈APP内动效的问题!

动效在APP内可谓是无处不在了,看了这么多动效设计的分析和案例,

你是否想更深入了解这些动效,到底是遵循了怎样的原则,才能做出如此逼真且优秀的体验呢?

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

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

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

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

看完文章的你,想要一些AE、ps学习资料或者有不懂的都可以找我咨询,加我建立的UI学习q群:927910296,进群可以找我领取相应的笔刷素材大礼包,还可以跟群里的其他设计大佬和学习者一起交流学习,获取更多其他软件学习资料。 想学UI设计的小白或者零基础都可以领取到学习资料ps笔刷神器+ps和AE软件

2 △ 加速曲线

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

3△ 减速曲线

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

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

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

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

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

导航菜单的出现和消失

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

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

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

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

相关文章

  • 教你做有原则的UI动效,优秀的动效

    一款APP内的动效一般用在哪,用来干嘛呢! 那我们谈谈APP内动效的问题! 动效在APP内可谓是无处不在了,看了这...

  • 彩虹手帐033 | UI动效设计

    UI动效是什么?“没有动效的APP,不是好的APP”,优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹...

  • 成就出色的UI动效技巧

    改进UI交互的实用建议 让我们来看一些UI动效从良好到优秀的例子,只要稍稍调整,就可以使用动效来提升UI模式。 列...

  • 看似花哨的UI概念动效,并不只是为了耍酷而存在

    在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用,什么样的动效更优秀等等,这样的探讨层...

  • AE动效设计课堂笔记

    UI基础动效设计需要考虑的点: ①逻辑 ②空关系 ③层次感 ④架构 UI动效的三个特性: 功能性:动效对交互引导和...

  • 动效篇-AEloading100%极简动效鉴赏与制作

    文中重要的插件和快捷键见片尾(有惊喜)~ 动效鉴赏 动效制作与详解 UI动效常用快捷键(更新中) enter重命名...

  • UI中的动效原则

    越来越多的设计师意识到动效设计在用户体验中的重要性。动效不再仅仅是让使用我们产品的人感到愉快的一种方式,而是一种让...

  • UI动效的原则总结

    高度总结动效设计的基本原则,有大量的案例分析。动效设计在用户体验的提升中到底有没有用呢? 我们在下面讨论的是为什么...

  • UI动效

    分类: 衔接类动画:过度,自然 特效类动画:吸引注意力 PS将AE动画转换成gif的时候,ctrl+alt+shi...

  • UI动效

    1、挤压和拉伸 用来描述目标对象的刚性和质量,定义对象的物理属性。作用设计师你应该定义UI的属性:固定架构、刚性表...

网友评论

    本文标题:教你做有原则的UI动效,优秀的动效

    本文链接:https://www.haomeiwen.com/subject/zgtxcctx.html