关于动效 01 - 理解动效

28 Dec 2017

关于「动效」,我希望在此从三部分

  • 认识理解
  • 拆解输出
  • 实现方案

来一一说明总结,将 UI 中看似千变万化的动效设计的共性和特点提炼出来。


我一向认为动效是提升界面质感和操作体验的关键因素,当然这里的动效必须是节奏统一的,适度的,优美的,符合直觉的。不是可随机发挥的艺术创意。因为 UI 中的动效除了视觉美感更多情况它还被赋予了功能性的价值。

动效在界面设计中有什么效用?(必要性)

1. 焦点引导:在各个视图间引导用户的关注点。

2. 行为暗示:用户与屏幕交互(手势交互)后,暗示下一步会发生什么,使下一步操作变得可预期。

3. 表达关系:表达界面元素或视图间的层级和空间关系。

4. 分散焦虑:将用户的注意力从当前后台的不可见行为上转移开,降低焦虑感。(如:页面加载、拉取内容时)

5. 审美价值:让你的产品交互更具美感和个性,使用户愉悦。

动效 = 动作 + 过程

这里说的动作是指什么?

界面元素的变化。

这些变化应该遵照什么样的规则比较好?

我结合 Material Design Guideline 加自己的理解,总结为以下:

1)有响应的

通过动效及时给予用户操作响应和反馈。

当用户与界面进行交互时,动效可快速给予用户精确的响应和反馈,让用户快速感知到操作行为是否生效。

2)可感知的

设计动效时,需考虑运动元素与四周元素的相互作用关系,让四周环境一起配合令人感知运动。

动效能被周围环境所感知,这个「周围环境」包括用户以及动效元素周边的元素,他们能相互感知,相互作用。

3)自然的

设计动效时,应遵照自然世界的物理规律。

在真实世界中,一个物体被重量、表面摩擦力影响导致加速或减速。同样地,界面动效也应遵从自然世界的物理规律,不会突然停止或突然启动,也不会有匀速运动(除了某些表示旋转过程中的动效)。任何动效应有加速和减速的过程,符合物理规律。

4) 合乎时宜,有意为之

动效只在合适的情景使用,只在合适的时机触发。每一个设计都在你可控范围,是刻意为之。

动效的使用和设计一定是有原因有意义的,不是为动效而做动效,一切都是为用户使用情景服务,能起到一定的引导、暗示或反馈作用。(可参考前文:动效的效用)

过程:如何定义一个优秀的动效过程?

动作在时间空间中的变化过渡

1)敏捷

动效应该是敏捷利落的,不能给用户不必要的等待感,过渡太慢会显得拖沓,令用户失去耐心。

2)明确

动效过渡应该是简洁、明确、统一的,一次过渡应避免触发过多行为。

3)一致的体验

即使是不同的运动行为或界面元素,他们的速度、反馈方式和触发规则都应该是统一的,或者说有共同规律的。

任何一个应用内的定制动效,所给予的体验都应保持一致。

这也是设计团队里制定动效规范的原因!


既然对好的动效的基本定义和使用价值、原则从宏观角度有所理解之后,我们就应该聊聊动效中的一些更微观和细节的共性和规律了。所以下一部分就是「拆解」和「输出」,这也是工作中的必经之路。

下节预告:

关于动效 02 - 拆解输出

Published on 28 Dec 2017 · Find me on Twitter !

更新 产品笔记1 | 关于社区

更旧 Note | 设计时如何组织信息

back to top