关于动效 01 - 理解动效
28 Dec 2017关于「动效」,我希望在此从三部分
- 认识理解
- 拆解输出
- 实现方案
来一一说明总结,将 UI 中看似千变万化的动效设计的共性和特点提炼出来。
我一向认为动效是提升界面质感和操作体验的关键因素,当然这里的动效必须是节奏统一的,适度的,优美的,符合直觉的。不是可随机发挥的艺术创意。因为 UI 中的动效除了视觉美感更多情况它还被赋予了功能性的价值。
动效在界面设计中有什么效用?(必要性)
1. 焦点引导:在各个视图间引导用户的关注点。
2. 行为暗示:用户与屏幕交互(手势交互)后,暗示下一步会发生什么,使下一步操作变得可预期。
3. 表达关系:表达界面元素或视图间的层级和空间关系。
4. 分散焦虑:将用户的注意力从当前后台的不可见行为上转移开,降低焦虑感。(如:页面加载、拉取内容时)
5. 审美价值:让你的产品交互更具美感和个性,使用户愉悦。
动效 = 动作 + 过程
这里说的动作是指什么?
界面元素的变化。
这些变化应该遵照什么样的规则比较好?
我结合 Material Design Guideline 加自己的理解,总结为以下:
1)有响应的
通过动效及时给予用户操作响应和反馈。
当用户与界面进行交互时,动效可快速给予用户精确的响应和反馈,让用户快速感知到操作行为是否生效。
2)可感知的
设计动效时,需考虑运动元素与四周元素的相互作用关系,让四周环境一起配合令人感知运动。
动效能被周围环境所感知,这个「周围环境」包括用户以及动效元素周边的元素,他们能相互感知,相互作用。
3)自然的
设计动效时,应遵照自然世界的物理规律。
在真实世界中,一个物体被重量、表面摩擦力影响导致加速或减速。同样地,界面动效也应遵从自然世界的物理规律,不会突然停止或突然启动,也不会有匀速运动(除了某些表示旋转过程中的动效)。任何动效应有加速和减速的过程,符合物理规律。
4) 合乎时宜,有意为之
动效只在合适的情景使用,只在合适的时机触发。每一个设计都在你可控范围,是刻意为之。
动效的使用和设计一定是有原因有意义的,不是为动效而做动效,一切都是为用户使用情景服务,能起到一定的引导、暗示或反馈作用。(可参考前文:动效的效用)
过程:如何定义一个优秀的动效过程?
动作在时间空间中的变化过渡
1)敏捷
动效应该是敏捷利落的,不能给用户不必要的等待感,过渡太慢会显得拖沓,令用户失去耐心。
2)明确
动效过渡应该是简洁、明确、统一的,一次过渡应避免触发过多行为。
3)一致的体验
即使是不同的运动行为或界面元素,他们的速度、反馈方式和触发规则都应该是统一的,或者说有共同规律的。
任何一个应用内的定制动效,所给予的体验都应保持一致。
这也是设计团队里制定动效规范的原因!
既然对好的动效的基本定义和使用价值、原则从宏观角度有所理解之后,我们就应该聊聊动效中的一些更微观和细节的共性和规律了。所以下一部分就是「拆解」和「输出」,这也是工作中的必经之路。
下节预告:
Published on 28 Dec 2017 ·
更新 产品笔记1 | 关于社区