在UX交互设计中正确使用动效的终极指南

                         


动效是界面设计中重要的组成部分,本文内容精选自设计师 Taras Skytskyi 的经验沉淀(文末附英文原文链接),总结了一些如何做出优质动效的技巧,相信会对你有所帮助。



动效的持续时间和速度


当元素更改其状态或位置时,动效的持续时间要适当,既不能过快,使用户注意不到更改;又不能过慢,使用户产生无聊感。


大量研究表明,任何短于 100 毫秒的动画都是瞬时的,基本不会被识别;而当动画的持续时间超过 1 秒,就会传达出一种延迟感,对于用户来说会感到很无聊:



接下来介绍一些动效设计的规则和技巧:


    1. 设备大小影响动效的持续时间    


   移动端

对于移动端,Material Design 将手机的交互动效的持续时间限制为 200 - 300 毫秒;平板电脑上,则要将持续时间延长 30%,大约在 400 - 450 毫秒,因为屏幕的尺寸更大,元素在更改位置时需要移动更长的距离;在可穿戴的小型智能设备上,持续时间应该缩短 30%,大约在 150 - 200 毫秒,因为在较小的屏幕上,元素运动的距离更短:



   PC 端

对于 PC 端,动效的处理方式又有所不同:由于我们习惯在浏览器中立即打开网页,所以我们对于页面中的其他动画效果也会有相同的预期,潜意识里会认为动效应该立即显现,不然就会有电脑卡机或者网速太慢的感受。因此除了一些装饰性内容的动画可以不在乎时间限制, Web的动效持续时间通常在 150 - 200 毫秒为宜:




    2. 元素面积和变化大小影响动效    


通常来说,面积较小变化较小的元素,动效的持续时间更短面积较大变化较大的元素,动效的持续时间更长。如下图,相同大小的两个元素,移动距离长的物体用时更长;而移动距离相同时,变化大的元素用时更长:





    3. 适当加入缓动效果    


恰当的缓动效果会使元素的动效更为自然,加入缓动就如同考虑了惯性、阻力等因素,让元素的运动方式更接近现实生活中的运动。缓动效果又分很多种,需要配合不同的场景进行应用:


   缓入效果(加速曲线运动)

这种动效在刚开始时变化缓慢,速度随时间逐渐增加,这意味着元素在做加速度运动:



应用在界面设计中的场景可能是将卡片删除,用户不再需要阅读卡片:



   缓出效果(减速曲线运动)

这种动效在刚开始时变化较快,速度随时间逐渐降低,直到元素最终停止:



应用在界面设计中的场景可能是新的卡片出现,很想吸引用户的注意力:



   缓进缓出效果(S 型标准曲线运动)

这是最常用的动效,同时具备缓入和缓出,当你的不知该如何选用动效时,可以用这个效果:



应用在界面设计中,可以避免用户分散过多的注意力,体验会更为舒适。比如下图中的导航抽屉效果,在打开时采用的减速曲线运动效果,以便得到用户的更多关注;在关闭时采用 S 型标准曲线运动效果,减少分散用户的注意力:



   无缓动效果(匀速直线运动)

相比之下,无缓动效果的匀速直线运动就显得呆板和不自然:



即使是运动距离相同,不同的运动曲线也可以使元素传达出不同的情感和意义:





动效的编排和组织


通常一个界面中会出现多种运动的元素,这就需要将动效按照规律和顺序编排起来,形成视线流,引导用户浏览界面。编排和组织动效的方式有两种:平级交互从属交互


    1. 平级交互    


当运动的元素都处于同一个层级时,可以从单一的方向,引导用户的视线。如下图的卡片列表,按照一定顺序依次出现的体验会更顺畅:



再比如下图中的卡片表格,采用对角线的动效方式会更为舒适:




    2. 从属交互    


当一个元素从一个层级向另一个层级转变时,界面中的其他元素都从属于它,动效需要表现出这种秩序感,将用户的注意力集中在最主要的内容上去:



此外,当一个元素改变其大小时,元素放大后的形状和比例会影响动效的选择。比如当元素在变化的过程中的宽度增加,则选用缓入曲线运动的方式;而当元素比例保持一致时,则采用匀速直线运动的方式:






避免使用的动画效果


在动效的应用过程中,除非必要或有特殊意义,否则尽量避免使用以下动效:


   反弹效果

当元素间发生碰撞时,最好排除反弹效果,过多的反弹效果会干扰用户的注意力:



   模糊效果

元素在运动的过程中要尽量保持清晰,不要采用运动模糊效果:



   阶段延迟效果

列表项元素之间的延迟应尽量保持在 20 - 25 毫秒之间,如果太慢,会显得卡顿并影响用户的注意力: 



   路径交叉

元素在移动的过程中需要避免与其他元素的路径进行交叉,可以选择高于其他元素,进行移动: 





英文原文来源:

https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

Taras Skytskyi <The ultimate guide to proper use of animation in UX>

每天更新,
全站高品质素材免费下载!