界面设计中的交互动画应用研究

[摘要]界面友好是产品易用性的典型特征之一，随着人们对界面体验舒适度和产品易用性要求的提高，交互设计中动画的运用日益广泛。本文结合实际案例说明了交互设计中动画能明显提高交互产品的友好性，并从理论方面阐述了交互设计中动画制作应该遵循的方式与规律。
关键词：动画设计，交互设计，界面友好，易用性  
Abstract: User-friendly is one of the typical characteristics about ease of use for products. With the requirements that ease of use for products and experience of comfort for interface improving gradually, the animation has been widespread used in interactive design. This paper illustrates that the animation in interactive design can improve the user-friendly of interactive products, and shows the method and regular that the animation in interactive design should follow.
Keywords: Animation Design；Interaction Design；User-friendly；Ease of use
引言
　　随着计算机业的发展，动画效果在界面设计中的运用越来越广泛。不论是在应用程序中还是在web网络中，交互设计中的动画运用已经和界面设计有着密不可分的关系。随着体验经济时代的到来，人们对产品的要求也不仅仅只体现在功能和界面美观方面，成功的产品设计已不再只是高科技内容的附庸 ,而是更多关注产品强大功能对于使用者的实际有效性。[1] 交互式界面设计亦是如此，人们对产品的界面开始提出了新的要求——良好的体验性和情感交流。交互界面的友好性成为产品易用性评价的关键因素之一，动画运用作为交互设计实现的一种方式，它能明显地提高交互操作的友好性。[2]
1  什么是交互式设计
　　生活中我们使用各种产品的时候，实际上就是一个交互的过程，比如用遥控器遥控空调，空调指示灯变换给人以信息反馈。使用过程中产生的感觉就是一种交互式的体验。随着计算机技术、网络技术的不断发展，各种新产品和人进行交互接触的方式也越来越多，人们也开始越来越重视人机交互[3]。
　　交互设计（Interaction Design）作为一门关注交互体验的新学科在二十世纪八十年代产生，它由IDEO的创始人比尔•莫格里奇在1984年一次设计会议上提出，他一开始给它命名为“软面（Soft Face）”，由于这个名字容易让人想起当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更

名为“Interaction Design”――交互设计[4]。
　　交互设计可以把产品和使用者更加友好的联系起来，优秀的交互设计可以提高产品的易用性，并让使用者在使用过程中身心愉悦，操作方便。交互设计就是设计使用者与产品交互的过程、方式等。
2  界面设计中交互动画设计的重要性及其法则
　　美国心理学家马斯洛在1943年提出，人的需要可以分为“生理需要，安全需要，归属与爱的需要，尊重的需要，求知的需要，审美的需要，自我实现的需要”七个方面[5]。即人的需要从生理需要到心理需要到精神需要。界面中的交互设计的要求也是一样，技术水平决定了产品的功能。新技术的突飞猛进，很多产品在功能和效率的实现方面逐渐完善，不同的产品在技术和功能层面显现出同质化趋势，好的产品开始重视使用者的心理需求和精神需求。在界面产品的交互设计中，采用动画给使用者带来良好用户体验就是一个很好的方法。
　　少丹尼尔•平克在《全新思维》一书中指出，人的左脑统治了人们思维活动数百年，在这数百年的时间内，人们都推崇效率为先的思想。这使得人们对理性思考、分析能力、逻辑思维疯狂崇拜。随着21世纪的到来，很多新技术被证实可以代替人的左脑的理性活动，尤其是计算机技术的迅猛发展，使得人的左脑大大解放，计算机业在很大程度上担负起了人左脑的工作。随着体验经济时代的到来，经济和社会也会从以计算机似的逻辑线性思维方式为基础的信息时代转向以概念、感性为基础的新时代。人们逐渐开始重视右脑，人们对右脑需求开始颠覆左脑， 21世纪是右脑的时代。右脑重在管理人的感觉[6]，如何让人的右脑有更好的体验，如何让产品和使用者进行更好的感性交流，这要求产品不仅要有完善的功能，还要在使用过程中给人带来良好心理感受。[7]
　　研究表明，在进行软件产品交互界面设计的时候，加入适当的动画效果，能明显提高产品的友好性。在界面设计中，为了让使用者有更好的操作感受，交互设计中动画的运用越来越多。交互式动画不仅使操作界面更加华丽，增加操作的趣味性，更重要的是，它可以使操作成为一个过程，增加操作者对于操作的认识，从而使操作的识别性更强。
2.1 用户对交互产品的要求
　　为了更好的了解用户对交互的要求，我们对部分常与计算机界面打交道的用户进行了问卷调查，调查采取网上发放填写问卷的方式。在本次调研中，一共发放问卷40份，收回38份。其中测试人员年龄约在18-30岁之间。其中50%为本

科学历，50%为本科以上学历。67%为普通使用者，20%为界面设计人员。通过问卷调查，得出了用户对产品几个方面的要求情况：

图1 用户对交互产品的要求
Fig.1 User requirements of interactive products

　　通过图1可以看出，百分之四十三的用户群体更加注重产品的操作交互方式，这表明了用户在考虑产品的时候，交互方式已经排到了第一位。
2.2 增强界面易用性

 
图2 交互设计中动画对操作心情的影响
Fig.2 the influence of the animation in interactive design on mood

　　通过图2可以看出，超过50%的用户认为动画会使操作者的心情更加愉快，只有9%的用户认为交互式动画不会对操作心情产生影响。说明了交互式设计中加入动画会使绝大多数的用户在操作时心情更加愉悦。
2.3 提升产品识别性。

 
图3 交互设计中动画对产品识别性的影响
Fig.3 the influence of animation in interactive design on identification of products

　　通过图3可以看出，大概有一半的用户认为交互式动画会提高产品使用的识别性。上图说明交互式设计中动画的应用对产品识别性的提高也有着很大的帮助。
　　以上调查表明，越来越多的使用者开始关注产品的操作使用方式、关注人机交互。在交互过程中，动画不仅能够在很大程度上使得操作者身心愉悦，而且还能够在一定程度上提高产品操作的可识别性。在界面设计中，要想产品能和使用者进行很好的交流，动画的运用已经成为一个不可或缺的重要因素，交互界面设计中的动画可以使产品摆脱程序冷冰冰的感觉，增加产品的亲和力与易用性。精致的动画效果还可以提高操作的可识别性和判断性，使操作者在操作中有着良好的心理感受。
2.4 实现方式及设计法则
　　目前，动画的实现方式多种多样。所有的计算机语言几乎都能根据需要来实现动画效果。目前比较简单流行的是采用adobe公司的软件flash来制作动画，该软件操作简单，容易上手，而且集成绘画、动画编辑、特效处理、音效处理等功能。
　　然而交互式动画设计并不仅仅是动画设计，也不是胡乱的在交互方式中加入动画，交互设计中加入动画应当使交互产品的亲和力、友好性更强，更具有易用性。80年代曾任苹果公司副总裁的Donald A. Norman 博士在研究日用品设计中，提出产品设计应该遵循易用性和可理解性原则，就是我们通常所说的可用性和易用性原则。在动画设计中，也要遵循同样的原则。他提出，具备可用性和易用性的产品要符合两个条件：

第一是该产品要提出一个完整的理论模式，使用户可预测行为的结果，不盲目操作。在动画设计中，就是设计者应该使操作者熟悉动画的过程。使用一些自然界固有的方式来进行动画设计，操作者不用专门去学习，通过动画，很容易掌握操作的方式；第二是提高可见性，即每一个操作对应一个变化，使用户得知操作是否有效。[8] 除了以上两点，在设计动画时，还应该遵循以下原则：
　　1 动画与主题一致性。用户设计动画的时候，应当将动画与界面作为一个整体来考虑。动画的风格、实现方式应该采用与界面主题相关的元素或思想。
　　2 导航的一致性。在界面设计中，很多导航都采用动画的方式来表现。按钮出现的方式、大小位置的变换应当也要保持一致性。
　　3 动作的一致性。界面中的动画可能是颜色的变化、位置的变化或形状的变化，不管属于那种形式的变化，在交互式界面设计中，都要保持动画的一致性。
　　界面设计中动画的加入在一定程度上会降低产品的工作效率，但是在计算机技术以摩尔定律飞速发展的今天，界面动画产生的效率问题对于绝大多数的用户来说，已经很难察觉。只要我们在设计动画的过程中符合以上几点原则，根据实际的需要在界面交互中加入适当的动画，这些动画几乎不会影响我们操作的执行效率。
3 广东科学中心多媒体交互设计案例分析
　　下面以笔者参与的广东科学中心多媒体交互设计项目为例，来分析交互设计中的动画在提升界面友好性与易用性方面的设计思路与方法。

图4 多媒体—爱因斯坦火车

Fig.4 Multimedia - Einstein train

　　本多媒体主要向观众讲解科学知识，通过观众与多媒体的交互操作，使得观众通过有趣的动画操作，学习科学知识。多媒体交互的目标对象主要是初中及以下年级的学生。观众来参观博物馆本来就是来放松心情的。如果多媒体制作的过于程序化，仅仅显示需要的内容，就会缺少趣味性，自然也达不到吸引学生目的。在多媒体设计方面，这些多媒体不仅运用了绚丽的外观以吸引观众的注意，在实际操作中，更是加入了大量的动画效果以增加操作的趣味性。大部分的点击操作，都会伴随着动画而出现。这样不仅使软件的操作具有极强的趣味性，使操作者的心情更加愉悦，也使操作的识别性更强。动画使操作者的命令变成了一个时间过程而不是一个时间点，操作者能够很清楚自己操作后多媒体产生的反应，使操作者很明白自己对多媒体进行了什么操作。如图4所示，当点击图中科学原理的时候，科学原理下的子菜单会慢慢展开，

右侧的箭头会随着操作而逐渐改变指向。在整个过程中，还加入了声音的提示。科学原理子菜单的展开式出现，右侧箭头的变动提醒，以及声音的加入，使整个操作的可识别性与趣味性大大提高。
　　这些操作过程中的动画效果完全符合Donald A. Norman 博士所提出的可用性和可理解性原则。这些动画使操作的趣味性、识别性大大提高，使操作者更明白自己刚才进行了什么操作及该操作带来的结果。良好的反馈也使界面更加友好。
4  结语
　　随着体验经济时代的到来，人们对于个人感受越来越重视。界面设计中动画的加入就成了必然趋势。交互设计中的动画将以人们更加熟悉的方式表现，让人觉得动画具有很强的亲切感和可操作性。交互设计中动画也将朝着更符合自然的方向发展，符合“自然规律”的动画也将会不断出现。
 

———————————————————————————————————————————————————
[1]刘永翔．基于产品可用性的人机界面交互设计研究 包装工程[J] ，2008，04
[2]褚中苇、 魏东．交互设计在人机界面设计中的应用 艺术与设计[J]， 2007，04
[3]李世国、华梅立、 贾锐．产品设计的新模式_交互设计 包装工程[J] ，2007，04
[4](美)Jennifer Preece、Yvonne Rogers、Helen Sharp．交互设计[M].北京 电子工业出版社，2003
[5]任力生．设计心理学[M] 化学工业出版社 2005
[6]杜葵．“右脑时代”重在管理人的感觉 人力资源[J] Human Resources, 编辑部邮箱 2007年 22期
[7]李静、李世国．从交互设计的视角探索人与产品的情感交流  包装工程[J] ，2008，09
[8]曾权清．多媒体界面的设计原则包装工程[J] ，2006，06