10条 UI 交互动效的制作原则

UI设计 | 交互动效

扁平化的兴起，以及现在越来越流行的动效设计，尤其是对于移动端来说，UI 交互动效的要求也越来越高。在交互设计中，实现动画效果有其独特的限制和挑战。为了实现流畅的 60 帧的动画效果，每一帧都需要在 16 毫秒内完成渲染。时间很短，所以需要找到最高效的方法去渲染每一帧内容，从而实现流畅的表现。

在网站上实现动画效果的方式多种多样。比如，在互联网出现之前随处可见的电影胶片，它利用手绘的渐变的胶片，每秒钟播放多帧来实现动画的错觉。

Twitter 在一个心形动画中就利用了这种方法，

通过胶片绘出一个转动的心形。

这种元素改变的动画效果，可以通过使用CSS切换属性来自动实现，这种技术被称作“tweening”——因其是在两个不同的属性值之间切换，它的好处是可以非常简单地进行取消或者替换操作，而不用重新构造逻辑内容。希望以下这些建议能够很大程度上地提高你的交互动效性能。

1

保留除了 opacity 和 transform 之外的参数

动画中百分之八十的优化会用到这项基本原则，即使是在移动端也一样。对已经习惯了这种思路的人来说这非常简单，但是对那些习惯用传统的 CSS 属性去做动画的人来说，这会是一次质的飞跃。

举个例子，如果想让画面中某个元素变小，可以使用 transform：scale( )，而不是改变宽度；如果想移动它，可以使用简单的transform：translateX 或者 transform：translateY

2

仅仅利用透明度来隐藏元素

CSS 中的 pointer-events 属性只是让元素失去了点击和交互的响应，就好像它们不存在一样。它能通过 CSS 控制显示或隐藏，不会打断动画也不会影响页面的渲染或可见性。

by Ramotion INC.

除了将 opacity 设置为零，它和将 display 设置为 none 具有相同的效果，但是不会触发新的渲染机制。需要隐藏元素的时候，将它的 opacity 设置为 0 并将 pointer-events 设置为 off，这个方法尤其适用于绝对定位的元素，因为不会影响到页面中其他元素。

3

用动作编排替代设置全部动画

单一的动画会很流畅，但是和其他许多动画一起也许就完全乱套了。编写一个流畅的全员动画的例子很简单，但当数量级上升到整个网站时性能就很难维持了。因此，合理安排好每个元素非常重要。

Design by Jakup Antalik

by Ramotion INC.

将所有的时间节点安排好，避免所有的动画内容同时开始或进行。理解动作编排这个概念非常重要，每个内容都要在合适的方向和时机出现，即使它们相互分离，但是它们要给人一种按部就班的感觉。

4

适当增加切换延时

交错安排一系列的元素是动画编排的一种简单易行的方法，这种方法很有效，因为它在保证性能良好的同时，还可以让每一个动画动作表现流畅。适当部分的重叠会看起来连续流畅而不是链式的单独动画。

5

在慢动作中使用增量设计

动画设计中，时间节点就是一切。20% 的工作是用来实现效果，剩下的 80% 使用来寻找合适的参数和持续时间来让一切在同时发生时显得流畅。 尤其是在编排多个动画的时候，为了达到高性能和高共同性，观察动画的慢动作会让一切工作变得非常容易。

By Tubik Studio

By Claudio Guglieri

做非常复杂的动画分析，或者解决非常棘手的性能瓶颈时，慢动作查看元素会非常的有用。重要的一点就是，在慢动作下，需要将非常多的细节优化至完美，当动画加速之后它将会给人完美无瑕的感觉。尽管这些在单独操作时会显得微不足道，但是最终用户会注意到动画效果的流畅和细节的。

6

尝试以第三方视角获取有价值的信息

有时候不同的视角能够帮助你对事物有更加清楚的认识，而录像则是一种很好的方法。在使用过程中这些瑕疵都很容易被掩盖，但是在视频中一次次地观看慢动作的动画能够让一切问题都暴露地非常明显。

7

将动画效果预加载或延迟处理

网络状况可能会造成动画延迟，图片加载便是其中一个重要因素，无论是几个大图片（大的背景图）或者非常多的小图（几十个图像），或者非常多的内容（一个从头到尾有很多图片的长页面）。

页面首次加载的时候，许多的东西会被初始化并下载，其中内容解析、广告和其他第三方脚本可能会使性能变得更糟糕。有时候，将动画效果在页面加载后延迟零点几秒将会对性能有很大的提升。不过如果没有必要的话，不必过度优化动画延迟，一个复杂的页面要求非常精确的延迟和时间节点才能运行流畅。

8

使用默认的滚动条功能——scrolljacking

基于滚动的动画在前些年一段时间非常火爆，特别是运用在视差或者其他特殊效果中。但自定义滚动条功能不容易操控且难以维护，使用默认功能尤其适用于移动端的开发，也利于能为用户创造一个良好的体验。

9

尽早&经常进行移动设备测试

大多数的网站都是在电脑上搭建的，并且最常用本机做测试，因此手机体验和动画性能经常是后知后觉的。移动端访问网站也非常重要，一些技术（比如canvas）或者动画技术可能在移动端运行效果一般，导致移动端的优化成为一项非常棘手的工作。

不断优化设计和提高性能，直到网站在移动端的表现和在电脑上一样流畅和方便，最终也将会得到一个电脑上体验更好的网站，并且能将遇到的问题都在用户体验前解决掉。

10

在不同平台和设备进行测试

除了移动端和电脑之外还有很多因素能够对性能产生极大的影响，如不同屏幕尺寸、分辨率，或者其他各种样式的设备，经常在不同的设备上测试，会暴露出新的问题，可以进行相对应的修复。

希望今天分享的小技巧，能对你的设计中有所帮助！

欢迎来我们UBAT体验学习！我们的专业顾问导师团队，会为每位学员打造私人订制的、更有针对性的学习内容，以协助大家顺利拿到心仪学校的offer哦，欢迎大家前来咨询~