【设计干货】UI动效的必备原则总结

人人都是产品经理 • 8年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

高度总结动效设计的基本原则，有大量的案例分析。动效设计在用户体验的提升中到底有没有用呢？我们在下面讨论的是为什么要应用动效，以及在那些时候动效，动效的特性等等。

作为一枚不会敲代码的设计师，我们不太可能让自己的设计真正“活”起来。如果没有动效设计，那总是需要很长时间去给程序员解释点击这个按钮后会发生什么。所以设计师们需要通过动画版本高保真原型（包括动效设计）去解释交互效果。

目前的UI动效包括系统动效都在尝试从各种不同角度解释动效设计的作用。而很多开发团队根本就不重视这些细枝末节的东西，他们认为只要掌握好几本用户需求，就可以把产品继续做下去。

在国内（CHINA）目前的各类APP中，拥有优秀统一的视觉效果的应用比例少之又少，更别说流畅的动效效果了。

好多设计师或者产品经理根本就不知道哪些地方该动，哪些地方不该动。那么，动效设计在用户体验的提升中到底有没有用呢？

我们先暂且相信它有用。我们在下面讨论的是动效的基础理论知识，为什么要应用动效，以及在那些时候动效，还有动效对用户体验提升的作用。

关于动效的基本属性

关于动效的基本属性我喜欢科幻电影，而科幻电影的一个问题是--故事发生我根本不了解的宇宙时空中。电影里有N多件事（包括故事背景时代背景等等），电影在放映时我只有两个小时的时间去了解。（图片截自我最爱的普罗米修斯系列）

那优秀的科幻电影导演是怎么解决这个问题的呢？

他们专注于主角而不是遥远的宇宙空间。他们在没有让我们落后的情况下，将一个虚构的世界历史放进了主角的故事主线中。
他们通过遵循观众熟悉的真实世界物理定律和一些真实的物理细节来使虚构的宇宙像真的一样。
最后，他们通过故事的感染力和真实感让故事显得非常美好又值得回忆。

与此相似，在UI设计中，我们想在很小的屏幕上展现一个交互的“故事”。我们的“主角”是设计的界面元素，我们的“虚构宇宙”就是UI架构。而且我们没有两小时，在用户失去兴趣和产生疑惑之前，我们最多只有一秒的时间。

我们可以确定动效的三个重要特性（侧重类型）： 功能性Functional，物理性Material，趣味性Delightful 。动效可以帮我们提升UX（用户体验），使UI界面显得更加一致和真实，并给整个产品带来创新的感觉

功能性

• 优化用户对界面的感知，使其感到更轻快更全面。

• 引起用户的注意。

• 提供（用户操作后的）视觉（功能）反馈，并为下一步的跳转做准备。

物理性

• 在一致的动画原则和物理的（符合物理定律的）UI模型基础上构建动画。

• 定义屏幕和UI元件之间的空间相对关系，他们的相对高度，权重以及速度。

趣味性

• 在上面两个部分都满足的情况下，加入一些有趣的动画。

• 使它感觉独特，能在诸多动画中能让人眼前一亮。

• 娱乐用户，并让他们一想到动画就能想到该产品或者反之。

下面展开讲述每个类型。

功能性动画Functional animation

我见过的第一个动画就是MS-DOS命令提示符中不断闪烁的光标。这个动画很友好并温馨---像是在说“来吧，写点东西”。同时它还是功能性的--如果停止闪烁，那这就意味死机并“可能起火”。我花了很久才知道这小动画的意思---动效对交互引导和了解系统状态都很重要。

UI界面的切换（特别是网页）通常都是直接硬切，使用户很难进行跟进。在认知科学的领域里这种情况叫做变化盲视——视觉刺激的突兀变化会阻止用户注意到新的信息。

“功能动效能够补充理解能力的差距。”

功能性动效可以让用户跟着你的应用程序的流程走的同时不会落后（即从哪来到哪去）。帮助人们在界面中定位并建丽视觉关系。我们的大脑和眼睛会快速注意到移动的目标--这是一个反射。动效可以帮助眼睛注意到新的目标出现或者一个目标的隐藏。

Image title

例如，输错密码后摇动的动画貌似比立即显示一个错误徽章要更长的时间。

但是在现实中，用户可能需要进一步的确认错误徽章信息，而不是看到动画瞬间就明白是什么意思。

一个好的动画比任何文字和插画都能快速表达一段故事。动画是语言是世界通用。你没必要把动画翻译成英语或日语。正确的界面转换动效可以让你用户快速养成使用习惯。设计师要经常思考真正的用户体验，而不是抽象的“点击次数”或“左滑右滑”。

物理动效Material Animation

物理动画其实被很多人误解了。它其实不是google的东西，GOOGLE只是起了一个MD这个名字来表达他得统一设计规范而已。物理动画的真正意思是，让你UI符合空间逻辑并根据物理定律做动画。当你的动效考虑到像重力和惯性，速度和刚性，它就显得很真实，用户会觉得更加自然，当然就有助于快速形成使用习惯，因为这些动效都是熟悉并可预知的。但是，如果动效看起来不真实，会显得你的网站和APP都显得很俗气，并导致用户完全不信任你的内容。

“物理动效能使UI转场更加可预测并使浏览有了连续性。”

作为一个设计师。你有无数种办法在应用程序或者网站里建立一个虚拟的世界。每个UI“世界”拥有自己独特的地图。你的菜单可能隐藏在浮动的按钮里或者在画板下面，你也可以放在抽屉菜单里或做成轮盘。但是无论选择哪种方式，你的动效一定要有逻辑性和真实性。

用户第一次到我们所创造的UI虚构世界里面——需要开拓并从头开始学习。他们需要了解界面从哪到哪，这样他们再次找到就很容易，但这个转场不适合硬切换，因为真实世界中是不存在硬切换的。

UI动画的另一个问题就是坏品味。品味是主观的，但总体说来它和美学相关。而人类的美学是基于我们周围的世界。如果你以力学，动力学和光学原理为基本线，那么创建有品位的动画就是一件很简单的事情。

趣味动效Delightful animation

当然，动效最重要的还是上面两种。

但是人类不仅有理性，还有感性。我们喜欢好玩的东西。

我们希望网站和应用程序能够和用户建立联系，而趣味动效可以让用户体验变得真正愉快和难忘。

“让动画成为你的品牌的一部分。”

动效细节原则总结

动效细节原则总结今年早些时候迪斯尼动画师Glen Keane和R/GA的设计师Rebecca Ussai在Medium上发了一篇文章UX Choreography，首次尝试通过12个原则和5个规律来总结UI动效的一些要求。他们总结的很好，不过只是主要涵盖了功能性动效，没有去真正考虑“物理性”和“趣味性”。

从我的观点上来看，12个原则可以完全应用于UI动效。我重新整理了这些规则归类进了上面的三种动效中。

下面让我们看看这些原则是如何单独应用到UI动效的，并分析他们的相互关系。

实体绘图Solid drawing

基本的物理设计原则。主要是遵循三维空间的规则，通过给对象赋予重量和容积来得到适当维数。实体绘图需要动画师熟悉基本的三维形状知识--结构，重量，平衡，光和阴影。迪斯尼动画师希望动画片看起来真实，希望观众能够和动画角色关联起来。他们以前叫SOLID DRAWING。今天在动效设计领域称之为 MATERIAL DESIGN。

有两种办法画出动态效果：逐帧画 / 直接画每个不同状态。动画师根据复杂程度和转场的状态使用不同的技术手段。而动效跟我们用户的联系决定于我们要用XCODE还是CSS还是用其他编程语言来实现。

如果动效很简单，你只需变化一个单一的参数，比如说对象的位置或者缩放，可以创建两个关键帧来直接实现相对线性的过渡。

而如果你的动画是独特复杂的，有很多变量，那么你应该制作逐帧动画或者使用AE等软件制作出来。

挤压和拉伸Squash and stretch

用来描述目标对象的刚性和质量，定义对象的物理属性。作为设计师你应该定义UI的属性：固定架构，刚性表面，以及快速准确地动作；还是更有机，具有柔软可弯曲的表面以及流体动作。这是你的动效品牌感：你的动画风格和给人的感受。

同样， 弧线（曲线） 也有助于定义动画的本质。像汽车自行车火车等机械产品倾向于沿着直线轨迹运动，而有机体，如植物，动物，和，嗯...我们，往往沿着弧形轨迹移动。所以问问你自己，你的UI是机器人还是人性化的？这一原则，以及挤压和拉伸和直线等结合就能创建更真实的，有机的，令人难忘的动效。

分级强调主要强调动效的中心思想（分清主次），能使用户见到动效就一目了然。一个分级较好地过渡动效可以把用户的注意力吸引到正确地位置---到重要的建议内容或交互重点上。大多数用户界面缺乏强有力的关注点，结果新用户浏览各种界面时通常一头雾水。即使你的UI没有重要关注点，你可以给动效进行分级，让用户真正注意到重要的部分。