杨旺功

　　

　　论

　　摘要：文章分析动效设计在用户界面设计中的影响因素。追溯了动效设计的概念和渊源，并分析了动效设计在移动界面设计的使用的理论，阐述动效设计对用户体验的影响，最后提出了影响动效设计对用户注意力影响程度的维度。动效设计弥补了静态视觉设计的先天不足。未来的用户界面设计不仅强调界面视觉和交互设计，而且对动效的要求更加强烈。

　　关键词：动效设计；扁平化设计；用户体验；用户界面设计

　　检索：www.artdesign，org.cn

　　中国分类号：TP3

　　文献标志码：A

　　文章编号：1008-2832（2016）05-0047-03

　　引言：动效设计是平面和动画的结晶，它可被艺术爱好者应用于电影片头，也可创造字体的动态表现。由于智能手机的普及和移动应用的普及，传统用户界面之间联系的缺失性与扁平化的设计思想成为动效设计在用户界面设计使用的源动力。

　　一、动效设计的概念

　　动效设计的英文是Motion Design，是运动图形设计（MotionGraphic Design）的简称，也称为动态设计。运动图形设计遵循平面设计和视听语言的双重标准，通过视频或动画来创作成动态影像的艺术形式。严格意义上讲，运动图形设计是动效设计的一个分支，而它具有众多的艺术表现形式和作品，所以这两者的概念逐渐趋同。下文所谈的动效设计即动态设计，或运动图形设计'不做细微区分。

　　虽然动效设计起源于20世纪50年，但是由于其实践性较强，所以到目前为止还没有权威的定义。由于动效设计的概念不明确性，使其内容形式越来越广泛，不仅包括字体的动态变化，运动图形的电影片头等。

　　上述实践活动停留于运动的图形的表象，而动效设计的价值在于详尽的说明事物发生的过程和内在原理。动效设计的基本表现元素不是图像，而是图形。由于图像具有直观性、明确性和具体性的特征；图像具有抽象性、普遍性、归纳性，因此可以从多张图像概括归纳形成图形，图形就上升到抽象性的概念。动效设计的杨心不在于是否配有音乐和解说，而在于通过符合的变化表达意义，用于解释和说明功能。动效设计坚守核心价值，放开表现手法后，其生命力更加旺盛，表现形式愈发丰富。

　　二、动效设计的起源

　　比利时物理学尤瑟夫普拉托（Joseph A F.Ptateau）被认为是“近代有记载的Motion Graphic第—人”。早在1832年他和他的儿子发明了叫视觉暂留转盘（Phenakistoscope）的动画装置。这种动画装置将两个圆盘安装在同一转轴，每个圆盘被均匀地分成16个扇形区域，有序地扇形区域内绘制系列的舞蹈动作图案，图案边沿有相同的裂缝，圆盘的图案面对镜子，当转动圆盘时，人们可以在圆盘背面从裂缝中看见舞蹈连贯的动作。该装置第一次让观众看到运动的幻想。

　　20世纪五六十年代，著名美国平面设计大师萨罗·巴斯（saul Bass）在动效设计领域做出了卓越的贡献。其制作了一些的动效设计的电影片头，包括《臂人》（TheManWithThe GoldenArm）、《西北偏北》（Northby Northwest）、《精神病患者》（Psycho）等。萨罗_巴斯也因此成为了电影动态片头的鼻祖。

　　20世纪80年代后，得益于电脑软件的使用，动效设计得到了空前绝后的发展，制作越发便捷，效果越发华丽。动效设计的参与者不在局限于电视台和设计师，以至于动效设计的作品在各大媒体上使用，使得动--效设计进入全新时代。

　　经典作品《功夫熊猫》就是动效设计与电影结合的表现形式，剧情中将实景与动效融合，为观众展现出一个亦真亦幻的动人世界，以至于让观众不把影片的片尾的演员名单不罢休。图1是功夫熊猫的动效设计。

　　在信息技术飞速发展，物联网和大数据技术的应用，互动营销已经成为一种趋势，经过动效设计的互动营销不仅让营销形式更加炫目，而且让客户尝试全新的视觉盛典。毕竟动态交互图文的吸引力远高于静态的文字和图像，动效设计和互动性和包容性目前还未被其它的艺术形式所超越。

　　三、动效在用户界面中的应用

　　在用户界面设计中，若将单独的页面视图视为一个节点，那么节点之间的联系通过何种方式表示：A困扰着设计师。随着扁平化设计的出现，不同页面视图之间的联系可通过页面的切换动效来表达，即通过切换动画形式来表达页面之间的过渡，从而表达页面之间的因果关系和内在联系。传统的用户界面设计，还仅限于时间关系，动效设计不仅可以表达页面的时间关系，还可以叙述因果关系。

　　2013年，苹果发布了iOS7之后，扁平化设计（Flat Design）的思想逐步深入人心。事实上，苹果并非扁平化设计的首创者，微软早于苹果之前已经将扁平化设计应用于Metro Design，但是苹果将扁平化设计得到普及，将其做到极致。在ios人机交互界面指南中，这样描述道，谨慎添加动效，尤其是在不能提供沉浸式体验的应用中。

　　之所以扁平化设计的设计风格难以展示对象之间的层级关系和重要性的差别，是因为色彩、形状、大小、距离等设计元素本身的局限性。如果将动画的时间元素融合到扁平化设计中，那么对象的重要性将得到表达，如对象到达屏幕的速度快，那就是提醒客户注意它，自然而然层级关系和重要性就表现出来了。

　　iOS7的视觉美学使它相对于iOS6更加扁平化，因此去掉了很多质感设计，仅仅为了避免对内容的干扰而保留的十分微弱的质感。这一方法完全符合iO57的设计理念：内容优先、透气。对iOS6的繁杂的ul进行精简，剔除多余的设计元素，选择性的保留，统一质感。

　　ios7的另外一个设计原则是：用深度层次表达（use Depth tocommunicate）。在页面设计上，具有前后层次的区分，通过纵深感来表达内容之间的层次关系。而动效的利用，完美解决了内容层次之间关系的表达。通过模拟的纵深和动画，让用户感知页面的从属关系。

　　动效设计不仅受到苹果重视，同样也得到谷歌的青睐。原质化设计（Material Design）是googLe发布的Android L所提及的设计思想。其核心原则是，材质的隐喻（Material is the metaphor）。它是通过提炼物理真实世界的不同材质的特性，然后根据需要组合使用的—种设计方法。原质化设计从视觉上是通过卡片式设计来体现材质的隐喻。但是材质的特性往往需要互动的手段才得以体现，通过与对象互动产生的动效来体现它的材质特性。

　　原质化设计不仅利用动效，而且将动效的优先级提高到了前所未有的高度。动效不仅使对象的表现更优秀，而且提高了可用性。谷歌如是描述动效设计，应用界面大、小元素都可以考虑动效设计，小到图标的小动效，大到关键性转场和交互动效，都可以构建沉浸式的用户体验，不经美观，还可以完善功能。

　　虽然苹果和谷歌两家公司对动效设计的思想比较类似，但是他们对动效的认识还有细微的差别。谷歌主张考虑周到的动效，转场本来就是设计应有的，用以提供有意义的、令人愉悦的体验。相比之下，苹果的设计则更为谨慎，只建议在适当情况下使用动效。

　　四、动效的作用

　　动效不仅以有趣的视觉效果吸引用户的注意力，而且让用户具有流畅的用户体验感，动效让原本处于静止状态的页面和状态之间填补了微妙的变化过程，赋予界面对象以生命力。

　　Dan Saffer是美国旧金山的产品咨询公司Kicker SttJdio的负责人，是交互设计领域的是思想先行者和国际性演讲人。他是如此描述动效的作用，微交互尽管微小的让人不易察觉，但是其作用已经深入人心，有时让你怦然心动，有时让你为豁然开朗。优秀的产品往往注重细节，如细微的交互，这些会让你的产品更加精彩。笔者总结，归纳了动效设计在移动应用产品中的作用，从五个角度分别加以阐述。

　　（一）流畅过渡

　　界面设计在于布局UI界面元素的位置和静态效果（颜色、形状、大小等视觉元素），而动效设计的重心在于让静态界面元素在时间维度上进行演进。动效设计会表现出每一秒钟界面元素颜色、形状、大小、和位置等视觉元素。通过动效的诠释，用户与产品的交互更加的流畅和自然。

　　（二）高效反馈

　　动效设计作为人机交互的方式，因此，动效设计的反馈特征必不可少。当用户对应用发出指令时，用户很迫切知道现在系统正在发生什么。良好的反馈设计可以让用户了解当前进展状态和操作结果，不至于用户误认为自己操作错误而撤销上一步操作，从而降低用户的迷茫感和困惑。iOS9的滑动解锁输入密码的页面，当输入错误密码时，不仅密码标识符晃动，而目手机发生震动，明确给用户密码错误的反馈。另外，在众多的网络应用加载的内容较多，或者翻页重新加载内容时，经常会出现加载动画，或者加载动效图标，通过动效设计明确告知用户数据正在加载中，请耐心等。

　　（三）增强操纵

　　直接操纵（Direct operation）是对用户界面设计的高标准要求。它要求用户可以与真实世界的可视化表示交互，交互对象的行为结果具有可预测性，这样不需要任何提示的情况下，交互行为完全符合用户对真实世界的认知，即用户在界面中的操作是完全符合现实生活中熟悉的事物操作进行。动效设计增强了对现实的模拟，消除虚拟交互对象与现实对象操作的障碍，因而动效设计增强了产品的直接操作。

　　（四）帮助引导

　　由于移动终端的界面空间有限，设计师不可能将所有功能放置于同一个界面，另外为了增强体验，在陌生的应用，或版本更新时，我们会常用一些新的手势，因而动效设计可以提示隐藏功能，指导新功能和手势的作用。在优酷的新版本使用了上滑，下滑实现声音的控制，这样的新功能通过动效设计予以提示，引导用户的使用，否者用户很难知道该新功能。ios9的滑动锁屏功能提示动效是从左到右的渐变效果，用户很容易沿着该指示方向完成操作。

　　（五）升华体验

　　恰到好处的动效使得产品更具有新颖感和科技感，为应用添加亮点，具有良好的可用性。目前为止，动效设计是界面设计的制高点，也是产品取胜的关键因素。为产品融入动态效果，不仅可以提升用户体验，还可以表达出应用的感情取向。如产品的动态标识可以为产品增加魅力和特色。

　　用户体验五要素是一个非常经典的框架体系，包括战略层、范围层、结构层、框架层和表现层。从动效对用户体验的作用分析，动效设计不仅为范围层提供支持，而且还在表现层发挥作用。

　　五、影响动效的因素

　　用户体验（User Experience，简称uE/UX）是一种纯主观在用户使用产品过程中建立起来的感受。动效设计关键是保证物体运动的物理感，同时不牺牲物体运动的优雅感、简约感、美感，让物体的运动充满魔力，打造无缝式的用户体验。

　　动效的迅捷反馈，可以让用户充满信任感和愉悦感。当用户与应用交互时，所反馈的动效不但极具美感，符合物理逻辑，而且能够愉悦用户。反馈动效的设计必须深思熟虑且具有目的性，而不能随性设计，反馈动效应温和，不让用户分心。

　　动效设计核心的价值在于其吸引用户的注意力。如果在展示面积一定的情况下，基本设计元素对用户注意力的吸引程度，动态最高，其次是颜色，最后是形状。本文从影响动效对人类注意力的吸引程度的两个因素，时间维度和面积维度进行研究，并在时间和面积组成的二维坐标轴中，将空间分为四个象限，下面对其特征分别加以阐述。

　　（一）第Ⅰ象限

　　第Ⅰ象限动效特征是相对面积大，时间长。此类动效的整个画面都是动效，其它静止和小面积内容往往处于被忽视的状态。在第一象限动效特征的状态下，画面传达的信息不是某一个细节特征，或者文字信息，而是给客户一种感知认识，或视觉体验，所以此类应用多为应用的介绍页或产品介绍页。

　　百度APP新春启动页面是长时间的动效，用户的注意力基本停留在页面的动画效果，而非进入应用的本身，这样的页面的核心价值在于品牌的宣传，让用户感知产品是服务于百姓生活，是一种温馨的启示。

　　（二）第Ⅱ象限

　　第Ⅱ象限动效特征是相对面积大，时间短。此类动效的动效位于整个页面，但是动效发生的时间较短，稍瞬即逝。此类动效用于表达界面之间的时间和因果关系，提高了用户的注意力，并且使得用户跟容易理解前后页面的关系。因此第二象限的动效多用于展示界面之间的空间关系。

　　iOS9自带日历应用启动后自动进入整个年份界面，当选择其中的日期后，会以镜头拉伸的方式进入具体日期。使用户感知日期包含于月份之间的层级关系。整个视觉特征与实际关系相一致，视觉感受流畅统一。

　　（三）第Ⅲ象限

　　第Ⅲ象限动效特征是相对面积小，时间短。此类动效占据页面的面积相对较小，并且动效持续时间很短。通常是用于比较轻的引导、反馈和提示功能。该动效特征不能打断应用的主流程，仅仅是轻微吸引注意力，所以此类动效多应用于情感化设计页面。

　　支付宝Alipay的客户端的口碑页面内容，下拉拖动屏幕的功能是重新加载刷新页面，该页面正常显示情况下，并没有任何提示，但是当用户单击向下拖动后，页面上面的加载小动画就逐渐显示出了，因此加载小动画与实际功能更完全一致，给用户以暗示，恰到好处。

　　（四）第Ⅳ象限

　　第Ⅳ象限动效特征是相对面积小，时间长。此类动效通常在整个界面占据的面积相对较小，但是动画本身的持续时间较长，因此其本身的重要性较高，目的是保持用户的关注。第Ⅳ象限的动效多用于提示用户关注应用的功能。

　　i0S9版本的滑动解锁功能是第四象限特效的典型实现。滑动解锁主要是为了通过动效引起用户的注意，并引导用户操作。滑动解锁的动效对于屏幕来讲，占用的空间较小，但是持续时间较长。

　　因此，动效的相对面积和动效持续时间的选择必须根据预期功能、预期用户体验的影响的具体情况决定。这两个因素必须认真思考，仔细斟酌。精心设计的动效可以有效的引导客户注意力，改善用户体验，是—种个性的表达。

　　六、总结

　　界面、交互、动效构成了情感化设计的三大载体。动效是最夺人眼球的工具之一，正确的使用会在与用户的对话中起到很好的引导。不过也正因为它的强势，所以一定要梳理好设计目标，不要让其变为干扰，毕竟用户的注意力和时间都变得越来越少，我们要做的是更合理的利用动效来传达我们的信息。