• 内页banner
  • ui1
  • 内页3
最新动态您当前所在位置: 首页 > 最新动态

郑州UI设计培训:有关UI动效你所不知道的基本规则(二)

更新时间:2018-10-22 09:05:00点击次数:162次字号:T|T

卡片的非对称曲线运动


同样的情况还适用于,元素在界面中消失后用户还能随时显示,抽屉导航就是这样的例子。


抽屉导航的收起过程就是应用到了标准曲线


从很多例子中可以看出许多初学者都忽略了一个基本的规则——开始动画不等同于结束动画,应该分别去设置,比如在抽屉导航动效中——打开是一个减速动画但关闭时却是一个标准曲线动画。另外,根据谷歌设计规范,物体出现的动画持续时间应该略长,以吸引用户更多的注意力。


侧边栏的动画是配合减速曲线和标准曲线一起来实现的


有一个立方贝塞尔函数常用来描述这种速度曲线。之所以叫立方是因为它是基于2个点来的。第一个点在坐标轴中是(0,0)(左下),最后一个点是(1,1)(右上)。


基于此,我们只需要描述图上的两个点,这是由贝塞尔函数的四个参数给出的:前两个是第一个点的坐标x和y,后两个是第二个点的坐标x和y。


郑州UI设计培训:有关UI动效你所不知道的基本规则(二)


为了便于实际工作,我建议使用2个工具网站来操作


https://easings.net/zh-cn


http://cubic-bezier.com


第一个包含一些最常使用的曲线列表,可以直接将其复制到原型工具中去。第二个是可以给你自己自定义动画的曲线,并能实时查看效果。


不同类型的动画曲线以及他们不同的参数


动画在界面中的编排


就像芭蕾舞编排一样,主要思想是从一个状态到另一个状态的过渡引导用户注意力方向。

一般会有2种编排形式——同级动画和从属动画。


同级动画


同级动画意味着所有对象的外观都服从一个特定的规则。


在这种情况下,所有卡片都按一个相同的流程出现,引导用户注意力在一个方向上,即从上到下。如果我们不按照这个顺序,用户的注意力就会分散,如果所有元素同时出现也会很糟糕。


用户的注意力应被引导在一个方向上


至于表格视图,就会略微有些复杂。这种情况下,用户往往是以对角线为焦点去看界面的,所以逐个出现的形式也比较糟糕。另外,逐个出现的动画在时间上也会过长,而且把用户的注意力引导成锯齿状,这是很不友好的。


按对角线出现的表格视图动画


从属动画


从属动画是指有一个核心运动的元素,它吸引用户所有的注意力,其他元素也都跟随它的运动。这种类型的动画会显得更有秩序感,让用户更多的去关注到内容本身。


郑州UI设计培训:有关UI动效你所不知道的基本规则(二)


在其他情况下,用户是很难知道他到底要去看哪个元素,注意力很容易被分散。如果要设置多个动画元素,一定要清楚的知道他的动画顺序,并尽可能的将其他动画元素弱化。


只赋予一个中心对象生命是值得的,而所有其他的对象都服从于它。否则,用户就不知道到底应该注意哪个元素。


根据谷歌规范,当运动物体的大小不成比例地改变时,它们应该沿着弧线而不是直线运动。


这有助于使动画更自然。所谓“不成比例”,是指物体的高度和宽度的增加/减少是不对称地进行的,即以不同的速度变化(例如,一个正方形变成一个矩形)。


物体的运动如果不成比例,那应该按弧线变化。


当对象按比例改变其大小时,则此时直线运动的形式会更好。由于这种运动形式做起来容易得多,弧线轨迹运动的规律就往往被忽视。在现在很多应用中,我们都能找到这种例子。


等比的物体运动轨迹应该使用直线


曲线轨迹运动也会有两种实现方式:第一种是开始水平移动,然后以垂直运动结束;第二种是开始垂直移动,然后以水平运动结束。


物体沿曲线移动的路径必须与滚动界面的方向重合。


郑州UI设计培训:有关UI动效你所不知道的基本规则(二)


展开/折叠卡片的方向应与界面的轴线重合


如果物体的运动路径彼此相交,它们就应该不能穿过对方。物体应该通过减慢或加速自身的速度为另一个物体的运动留下足够的空间。另一种方式——只是推开其他物体。为什么要这么做?因为我们假设界面中的所有对象都位于一个平面上。(译者注:对于这一点我不是很认同,为了更加真实么?)


在运动过程中,物体不应该互相穿透,而是为另一个物体的运动留下空间。


在另一种情况下,移动的物体可以通过抬高于其他物体,而不会以溶解或通过其他物体的形式来移动。为什么?因为我们相信界面上元素的行为应该要符合物理定律,在现实世界中没有任何实体能够做到直接穿透对方。


物体可以被抬高于其他元素之上来移动


总结


如果我们总结上述所有的规律和原则,可以得出界面动画应该要反映物质世界的运动,例如我们都知道的,摩擦,加速等等。模仿现实世界的行为我们可以创建一个优秀的动画,满足用户的心理预期。


一个优秀的动画,应该是不会那么刻意,也不会分散用户对目标的注意力。如果是的话,就需要优化它,或者干脆把动画去掉。核心标准是动画不应该降低用户执行任务的效率。


郑州UI设计培训:有关UI动效你所不知道的基本规则(二)


但是不要忘记,用户对动画的好坏感受,是感性大于理性的。所以,最好是把做出来的动画给用户进行评鉴,然后再不断优化它。


丰泽郑州UI设计培训是河南省首家UI设计实训基地,是一个拥有产、学、研、培功能的综合性教育机构。