在设计领域,动效是炫技的最好方式之一。越来越多的设计师将动效技能发挥得淋漓尽致,恨不得每个转场、每次输入、每次点击都加入流畅顺滑的动效。但动效虽美,却并非任何时候、任何地方都适合加入动效,有时甚至可能适得其反。在动效被滥用的今天,我们应该如何合理、恰当的使用动效呢?

第一例动效

18世纪70年代,用户界面(User Interface)还只是一连串PDF的组合体,因为当时受限于电脑硬件能力,动效几乎无法使用。1981年,MS-DIS1.0问世,我们才得以在用户操作系统中体验到动效。

为什么要用动效

合理运用动效,可以提升用户体验,解决实际问题。其具有以下几个特点:

1. 更好的告知界面发生的变化

当用户界面中的元素或状态发生变化时,动效可以更好地阐述层级关系和发生的变化情况。

2. 具有吸引力,突出视觉焦点

想要用户关注某个区域,或者执行某个操作时,可以通过动效引起用户注意。

3. 及时反馈

对于用户执行操作后,采用动效及时反馈。让用户清晰感知自己的操作发生了什么。

4. 缓解用户焦虑,提升用户体验

在等待、警告、错误等负面状态下,有趣的动效能够有效缓解用户的焦虑情绪。

什么是好的动效设计

动效并非一味正面,不遵循原则的动效,可能带来负面效果。

1. 是否具有功能性

动效一定是某个功能的载体,有存在的合理意义,补充理解能力的差距。

思考动效的功能是什么,目标是什么,是否阐述了层级关系等。

2. 是否具有合理性

符合客观世界的规律:元素运动方式是否符合物理规则,是否符合大众的常识和认知?

动效一致性:类似交互设计原则,动效的元素运动方向、顺序、设计语言、动态曲线、风格等也应该一致,避免出现多种效果,引起用户歧义。

效率:元素应当简洁清晰,不应该具有故意夸大、过度夸张的效果,以分散用户注意力。

动效时间不能过长。

按照 Material Design 的建议,动效时长应该控制在200 -300毫秒之间;在平板电脑上,这个时长应该延长大概30%,时长应该在400-450毫秒之间;在可穿戴设备的小屏幕上,这个时长应该缩短30%,在150-200毫秒之间。

3. 是否生动有趣

在具备以上原则情况下,动效应该生动有趣,而非枯燥无味,避免为了动效而动效。

调整运动曲线,避免使用绝对匀速的动效。加入缓入(ease in)、缓出(ease out)、缓动(ease in-out)等效果,让动效符合惯性定律,让元素具有重力和材质变化,都能让动效变得生动有趣。

动效的类型

1. 衔接

衔接动画主要分为页面之间的衔接以及同一页面下不同元素和状态的衔接。

页面之间的衔接,以传递层级信息,告知用户界面前后变化,帮助用户理解产品结构。

页面内动效,以传达界面内元素的变化。强调空间扩展,阐述功能,引导视觉焦点。

2.响应

对于各类交互行为如点击、滑动、拖拽,都应该由系统即时响应。以动效方式展现,可以帮助用户了解系统响应情况,提升体验。

3. 演示

多用于引导页,用来引起用户注意力,帮助理解产品功能或作者意图。

4. 加载

缓解用户等待状态的焦虑情绪,家在动画可以很好的满足用户基本预期。

这个页面提供了一些加载动画的样式。

其中加载动效,又能分为刷新加载、页面数据加载、预加载等类型。

5. logo

动态logo有利于提高品牌识别度,更好的呈现品牌故事。

例如谷歌的logo:

动效的滥用

这位spotify的设计师发表的观点就是,Dribbble的流行趋势其实并不能解决一系列的用户体验问题。Dribbble上有很多酷炫的设计与动效,但这不代表我们就要盲目跟随崇拜。趋势无法解决问题,用心研究探索方案才能解决产品的问题。

当你惊讶于那些酷炫复杂的UI动效,优雅的转场,精致的交互细节时,可能身心愉悦,但当你静下心来仔细审视产品时,那些动效真的是好的设计吗?还是单纯的设计师自嗨?

1. 太强调展示,忽略核心内容

作品集重点在于视觉、交互细节,但当下流行出一种通过过度丰富、复杂的背景、装饰元素,提高整个设计作品图的设计感,如上图。

作为 UI/UX 的我们总是在强调体验,但我们并没有真正将其融入所有的设计产出,在做出这样一个重视觉呈现,而忽略了体验设计本质的作品时,设计师对自我的职能是一个自我否定的状态,只有同为设计师的我们沉迷其中,自嗨而不自知。这个设计是服务谁的?解决了一个什么关键问题?这才是我们应当思考,且呈现出来有利于同行进步的关键点。

2. 为展示而展示,违背基础原则

很多动效为什么有那么多细节被感知?因为设计者想让你看到。事实上,动效不应被清晰感知,而是只起到平滑过渡,避免干扰作者的注意力。但Dribbble上很多作品都在刻意增加动效时长、复杂度以展示更多细节。此时就应该思考,是否有必要,是否有意义?

3. 发表作品的错误出发点

发表作品,更多的是展示给同行,而真正的产品,是为了展现给用户。设计师自嗨、从众、盲目信奉趋势,仅仅为了取悦设计师群体,而不是为用户解决问题,这就是起点的错误。

动效实例

以QQ为例子,看下动效在整个界面中起到的作用。

以横向切换表示层级间变化

纵向滑动或弹出,开启分支任务

全屏缩放强调内容来源