App中加载页动画的趣味设计研究

纪晓

摘 要 加载动画趣味化的本质即打破原有界面中时间与空间的限制，转移用户注意力，达到让用户产生移情或共鸣的目的。加载页动画具有较强的表现力，可丰富App的视觉表现以及增加用户对界面的包容度，其主要表现形式有节奏化、情节化、情感化三种。

关键词 加载动画；界面设计；交互设计；动画设计

中图分类号 G2 文献标识码 A 文章编号 2096-0360（2017）16-0019-02

动态效果可以提高用户对因果关系和指向性的感知，还可以提升用户的兴趣度，让用户能更享受浏览过程[1]，加载动画正是移动应用中不可或缺的动态元素。随着移动应用的发展，加载动画也逐渐由工业化的、批量化的模式走向情感化设计。从形式上来说，表现形式丰富多彩，不再是单一而枯燥的进度条形式，而是UI界面综合艺术的表现；从功能上来说，不再是单纯为提醒加载进度而存在，而是被赋予了吸引注意、安抚用户、表达内涵等多种新的意义。趣味化的设计综合表现力强，能够消解严肃，带有浓厚的情感色彩，适用于当代网络语言体系，因此，加载动画越来越倾向于以趣味化的方式进行表达。加载动画的趣味化设计主要有3种表现形式，分别是节奏化设计、情节化设计和情感化设计。

1 节奏化设计

节奏是一种“美”的形态，这种“美”在动画艺术中起着至关重要的作用，是动画艺术灵魂的载体[2]。加载动画营造节奏美感，它们的视觉内容本身不需要有任何含义，作用是让观者溶入一定的视觉规律之中，先破后立，打破原有时间节奏，呈现新的视觉感受，削弱等待的沉闷感。加载页动画的节奏化主要表现在两个维度：一是利用相似图形或相似运动营造规律，改变用户的时间节奏；二是利用不同图形产生有规律的变化或运动，改变其空间上的节奏。

1.1 时间节奏的改变

利用相同图形的相同运动变化是改变时间节奏的有效方式。相同运动可以产生韵律，比如音乐播放器中的落差音柱，是利用相似线条的排列及起伏运动来营造韵律感的，其中不止有节奏美感，还含有一定的形式美感。规律运动的时间也遵循严格的要求，过短影响视觉表现力，且容易产生催促的视觉感受，过长则会拉长时间节奏，无法改变原有等待的节奏。通过对多个规律型加载动画的分析与研究，根据信息量的不同，一个运动周期在2～4秒左右是较为普遍适用的时间长度，变化的速度要快于正常时间流逝的速度。

1.2 空间节奏的改变

改变空间节奏的方式主要是利用不同图形的变化产生一定的空间落差，图形的递增和递减都遵循严格规律，让观者产生对“盈”和“亏”变化的期待，从而产生愉快的视觉观感。这类的图形一般为规则图形，比如正方形、正圆、正三角形等等。加载动画空间节奏变化的常见形式有：1）形变，单个图形的形态变化；2）叠加，相同图形的物理量变；3）缩放，图形的比例变化；4）盈亏，固定面积内的图形变化；5）3D效果，平面内营造虚拟纵深感；6）聚散，相同图形进行聚集或驱散；7）综合型，多种变化形式综合表现等。

2 情节化设计

情节化设计是指加载动画进行简单情节描述、通过表现人物或事物的变化，将等待的过程可视化，打破原有时间线、转移用户注意力的一种表现形式。受时间限制和画幅限制，加载动画的情节一般较为简单，分为循环型情节和结果型情节两种。

2.1 循环型情节

循环型情节的本质也是通过改变时间节奏来削弱等待感，只不过主体由图形变成了更复杂的内容。受手机屏幕大小的限制，加载动画常以循环动作表现连贯内容，循环型情节即将所表现的动作重复播放，比如“人走路”，以循环迈腿摆手的动作来形成连贯的走路姿态，空间的相对位置虽然没有变化，但在视觉上造成了一种持续的动效、产生连贯的情节。循环型情节有两个特点：一是运动主体带有一定的拟人化色彩，或为人所熟知的事物，使得观者更容易产生认同感和共鸣；二是情节内包含细节，为动态的主体添加一些细节，丰富单调的动态，或添加表现相对位置的装饰物，如人走路时脚边的石头和花草等，或直接在动态中添加细节，比如表现人走路时在几步当中添加一个跳跃，都是常见的表现手法。循环型情节是加载动画较为常用的手法，它动态简单、轻松，且打破空间界面，具有较强的表现力和趣味性。

2.2 结果型情节

结果型情节即加载动画变化的过程是为结果服务的，最终导向为加载成功的结果。较为典型的结果型情节有沙漏漏下、水杯倒满、电池充饱等。结果型情节是一种兼具提醒以及提高用户期待值的动画表现形式，它既将加载进度融合在图形变化之中，起到明确的提示作用，又利用图形的表现力削弱受众的对时间的感官，是加载动画较为典型且常见的表现手法。

3 情感化设计

当物质生活已经被满足，情感化的需求就凸显出来，App作为高度工业化的产物，单纯作为工具已经不足以满足情感消费需求，因此融入更多的情感元素成为加载动画的一个发展方向。情感化设计的产品能让用户从生理、心理和精神理想方面，享受到产品的社会价值，从而让他们的社会生活充满快乐，激起用户对幸福生活得追求，提高人们的生活品质和幸福感[3]。加载动画情感化设计的本质即通过融入情感元素，形成记忆符号，使得用户产生移情与共鸣、或引发用户思考，达到削弱等待感的目的。加载动画的情感化设计主要包括拟人式设计和情怀式设计两种。

3.1 拟人式设计

拟人式设计即将设计对象赋予人的形态、语言、性格等因素，使其具有某些类人特点的一种设计方式。加载动画常用的拟人方式为拟人形态，把人的外观形态、动态等加入创作对象，使其有一个直观的人的形态体现，比如QQ的企鹅、赶集网的驴子、哔哩哔哩网的小电视机等。其中，QQ企鹅的形象较为典型，其一，它的头、身、手脚都做了细致处理，使其更接近人体形态；其二，它拥有类人的表情，比如抛着媚眼的表情，显得整个形象生动俏皮；其三，它有类人的动态，奔跑、跳跃、左看右看等，鲜活得仿佛身边的一个小伙伴。加载动画的拟人式设计实质上是借设计对象的形态表现人本身的造型姿态、语言、个性、心理活动等等，无形中产生和用户的交流，将严肃、冰冷界面语言转化为生动活泼的交互语言，获得受众情感上的共鸣，是情感化设计中最为常用的一种形式。

3.2 情怀式设计

情怀式设计是反思层面的设计，是引起用户自我感觉，勾起其回忆、引發其思考、使其产生情感依赖的一种设计方式。常见的情怀有：温馨情怀、自由情怀、英雄情怀、女性情怀等等。对于加载动画来说，传递温情、体现鲜明的个性等都是常用的设计方式。传递温情体现的是温馨情怀，这与现代社会中日益疏离的人际关系密切相关，温情化的设计能使用户产生情感上的寄托和依赖，对现实情感起到一定的弥补作用。加载动画中体现温情的方式有很多，最常见的采用“萌系”形象作为动画主体，比如懒蛋蛋、熊本熊等，软、萌、懒、蠢、贱等元素可以消除当代人压力、减少其戒心，是典型的温情化语言的体现。体现鲜明个性也是情怀设计的一种，与温情语言不同的是，个性化的加载动画体现的是较为极端、尖锐的情绪，较为鲜明的形象比如暴力熊、越狱兔等，体现了当代人追求潮流、自由、梦想、反传统、不走寻常路的反叛心理。

综上所述，除了提示加载进度，趣味化的加载动画对于给用户带来视觉美感、表达思想内涵、引发用户反思等方面均有贡献。利用趣味动画改变缓慢的时间节奏是加载动画设计的关键，同时，情感化的设计已经渗透了App设计的方方面面，未来的加载动画设计，会更多地向表达情感、引发思考和共鸣的方向发展，为App设计增加更多的趣味性。

参考文献

[1]Robertson G G.Mackinlay J D.Card S K.Cone trees：animated 3 Disualizations of hierachical informationg[A].Proceedings of the SIGCHI Conference on Human factorsin Computing Systems[c].New York.ACM.1991：189-194.

[2]彭巍.动画艺术的节奏美[J].文艺争鸣，2010（16）：167-168.

[3]PieterMA.Desmet.MeasuringEmotions[DB/OL].[2010-07-14].http//citeseerx.ist.psu.edu/viewdoc/download？doi=10.1.1.104.1400&rep=rep1&type=pdf.endprint