于思航
关键词：动效设计;界面设计;用户体验
1动效设计的概念
动效设计运用领域非常广，从电影片头到平面设计中的字体形态动态变化等，而各个领域对其的定义也不一。笔者在这里把广义的动效设计理解为将静态的视觉语言，通过动画效果的形式进行表达的设计方式。一般认为，动效设计起源于20世纪五、六十年代的电影动态片头设计，其原理是利用人的视觉暂留现象，通过快速转换图片，在视觉上造成连续的画面。在平面领域，一般将动效设计称之为动态图形设计（Motion Graphic Design），主要研究二维图形从静态转为动态的基础理论和技巧。而在交互设计领域，动效设计更多地被理解为动画设计（AnimationDesign），包含二维和三维的视觉动态效果。
2移动应用界面中的动效设计概念
在智能手机出现以前，用户和设计师们对于界面操作的体验重视程度并不高，极少地会使用动态的元素变化方式。在移动互联网时代，由于信息传输技术的提升、手机屏幕越来越大、用户在界面上操作的时间越来越长、屏幕信息占据的用户心智也越来越高，用户体验越来越重要。在这样的背景下，动画效果被越来越多地运用在在手机界面设计中，作为一种用户的交互反馈，提升用户体验的微交互方式。例如，美国用户体验领域专家Rachel Hinman总结了迪土尼动画的设计技巧，提出了适用于手机界面动画交互的12条原理，是较早从设计原理谈手机界面动效的专作。
动效设计在界面设计中真正引起重视的事件就要谈到2013年苹果发布的IOS7系统。IOS7改变了IOS6拟物化的设计方式，转向了扁平化设计（Flat Design），放弃了原来系统空间的纹理与质感，运用线性图标，并统一了色调，从而符合当时提出的内容优先和高效操作的系统设計理念。相似的图标虽然减少了视觉认知负荷，但是在视觉效果上较为单调，尤其是在表现层级变化时较为乏力。因此，苹果保留了动画效果在表示状态、增强操作意图和可视化操作结果上的应用，从而加强必要的视觉引导和振奋效果。并提出了克制、一致性、自然性和可调节性四个动效设计的原则，以避免动效过度吸引用户注意力资源。
另一个对现在手机应用动效设计影响较大的是2014年安卓5.0的发布以及背后的创新理念原质化设计（Material Design）的提出。原质化设计旨在以模拟真实世界的光效、表面质感与运动感设计出系统化的动效与空间，从而构成实体隐喻。原质化设计并不是说要回到视觉效果繁复的拟物化设计，而是通过简单的图形、光影和运动让人们联想到真实世界的事物，从而建立用户的熟悉度。原质化设计对于动效设计提出了四点设计期望：真实的运动动作、响应式交互、有意义的转场与打动用户的细节。
谷歌与苹果都意识到了动效对于注意力的强聚焦作用。但两家公司对于动效设计的态度还是有差异的，苹果强调克制使用动效，从而降低动效对内容认知的影响;而谷歌强调的是鼓励动效产生愉悦感，提高用户主动接受信息的兴趣，并将用户注意力引导至关键内容上去。两者没有对错之分，还是要根据APP应用的调性和实际场景进行区别设计。
3移动应用界面的动效设计的目的和意义
3.1反应元素界面的层级关系
通过动效更清晰地阐述界面层级的变化，使用户更易于理解界面的转场以及当前层级与之前所处层级关系，能更轻松地定位到当前正在进行的工作。尤其是界面层级相对复杂、界面切换较为频繁的应用，更应该重视动效设计，增加界面与界面转场的事件联系和转场的延续感，减少困扰从而提升体验。反应界面层级的动效设计是最常用的动效，例如，IOS系统一直沿用的阐述层级变化的三种动效，现在也已成为许多手机应用基本动效的设计语义范式：
1）通过横向切换表明层级的变化。一般进入某一级界面的子页面是从右往左淡入，而退回父页面是从左往右淡出。
2）通过纵向滑动和弹出来开启一个分支任务。在某一界面执行分支任务操作时，一般会使用纵向弹出操作栏的方式，例如，微信聊天窗口的输入栏的打开与收缩。
3）通过全屏缩放来强调内容来源。通过全屏缩放的方式可以很好地引导视觉焦点转移，从而将视线转移到内容来源项中。例如，IOS系统中打开/关闭某一APP应用时的缩放动效;再例如，微信朋友圈打开/关闭照片的缩放动效。
3.2提供交互反馈和状态
相对其他方式，动效能够更直观地提供及时的反馈和交互状态。消除用户在等待操作生效时可能对自己和产品产生怀疑和挫败感。例如，加载状态、选中状态等等。如图1中对加载状态栏的有趣设计，可以有效消除用户在等待加载时的焦虑。
3.3引导用户
动效也是进行用户引导的有力工具。我们会在一些需要新用户引导的场景下见到各种手势引导操作引导，或者在版本界面更新变化较大的时候，我们也会运用手势动效引导用户建立界面熟悉度。因为使用动画进行引导的形式具有高效真实，易于交互的特性，用户可以瞬间心领神会，大大降低学习成本和学习焦虑。
3.4个性化与情感化因素
动效设计在界面上有着较强的视觉表现力和冲击力，因此也是经常被用来作为体现界面个性化和情感化设计的重要工具。例如，图2经典的登录界面加入卡通形象的交互动效，瞬间就让原本枯燥的输入密码操作变得有趣起来，用户的注意力也更集中了。此外，动效所蕴合的个性化与情感化语义常常也被运用在提高用户对于品牌的认知度和好感度上。
4移动应用界面动效设计原则
错误理解苹果与谷歌对于动效设计的建议，就会导致动效设计走向错误的两个极端，一种是为了避免犯错而基本弃用动效设计，但是容易造成界面干篇一律，用户使用容易感到枯燥乏味;而另一种则是过度炫技式地使用动效，而忽略视觉重点的聚焦导致舍本逐末。许多设计师对于动效设计都有自己独到的理解，较为著名的是Ben iohnson提出的“162”原则，即一个APP中要涉及到一个开场动效，六个引导动效和两个细节动效。但是不同的APP应用对于动效的需求也不尽相同，启用动效设计是相当考验设计师的总体把握力的。下面是笔者根据苹果和谷歌两家公司的界面设计指南，总结的动效设计应该遵循的通用原则。
4.1动效应具有阐释性
动效应具有解释交互的能力，如元素的空间层次关系，传达操作的可用性和预期结果。动效作为用户进入界面最先注意到的元素，应该承担快速帮助用户搞清任务进展和界面内容的作用，增加界面使用的流畅性和操纵感。
4.2动效应具有重点性
因为移动的事物天然更加聚焦注意力，动效在产品界面中位于层级的最高点，我们应当正确地理解这个特点，而不能滥用这一点。也就是说，动效只应当发生在用户交互，或用户视线聚焦的地点，即动效的展示应当与用户注意力关联，不应当产生干扰用户完成任务的情况，更不应该出现无意义的转移注意力的设计。
4.3动效应具有细节性
虽然从用户感知的角度，动效应该是简单地，但也需要有细节地配合，需靠考虑真实的运动状态、光影效果与材质，才能使视觉上看上去舒适、自然，不然就算很简单的动效缺少了细节的考量，也会令人感到突兀。
4.4动效应具有一致性
动效设计只是交互设计的一部分，并不能独立于界面而存在，因此，动效设计需要注重视觉语言的一致性。首先，是要尊重目前业界内对于基础动效所形成的设计惯例，尊重其对用户养成的固有习惯，例如上文中提到的IOS3个基础动效（跳转下一层及为从右往左淡入页面，返回上一级从左往右淡入界面等）就被许多APP所沿用;其次，是要注意其传递的情感调性是否与其应用的APP一致，例如，科技感较强的应用多用响应较快，视觉效果较为迅捷的动效，而艺术绘画类应用经常注重动效的体验性，例如不同材质的纸面给用户带来的质感体验等。
5结语
动效设计作为界面设计的视觉顶层，是指引导和响应用户操作、实现与用户深度交互的重要载体。但在实际设计过程中，我们要综合考虑界面设计的最终目标，避免让动效设计过度消耗用户注意力，而是应该合理利用其活泼的形式，服务于关键信息的有效传达。可以预见的是，在用户注意力资源越来越宝贵的趋势下，动效设计作为能够有效激起用户注意力的界面工具，在今后界面设计中的重要性和地位会越来越高。
