MG动画设计在移动界面中的表现方式

吴晓炜

摘要： 随着移动互联网公司APP产品的不断普及，使用者对APP应用程序在移动界面设计方面的要求越来越高。在这个趋势下，当今主流的APP产品中均大量地使用MG动画来增进用户体验和强化界面的视觉表现力。本文对MG动画设计的原理以及它在移动界面设计中的基本表现方式进行了简要的分析。

关键词：APP产品；MG动画设计；移动界面设计

近年来，移动互联网APP应用类软件发展得极为成功，在为用户提供了方便的同时也成为了商家和广告主聚焦的热门地带。随着APP产品在智能手机和平板电脑等移动终端上取得了统治性的市场地位后，其间的竞争也日趋激烈。APP移动客户端的界面设计受到了互联网企业的高度重视。 想成为有竞争力的APP软件，用户体验是第一位的。 传统的平面设计准则下构建的静态界面逐渐不能在满足人们如今的视觉需求。于是，一种新的视觉艺术表现形式：动态图形设计Motion Graphic Design， 简称MG动画设计，迅速地脱颖而出，引发了移动界面设计领域的新潮流。那么到底什么是MG动画设计？它为UI界面带来了哪些关键性的作用？

首先，MG动画设计并不能说是全新的视觉艺术，它其实是动画设计与平面设计相结合的产物。 UI界面最初是类似于网页页面之间跳转切换的原理来设计的。设计师很重视每个页面的平面视觉设计效果和页面信息处理，但一直忽略了页面跳转的设计。页面的跳转都是直接的硬切换，类似于电影的剪辑手法。不过，电影剪辑中，场景和角色动作为观众提供了前因后果等信息，而众多页面的直接跳转并不能让用户感受到界面与界面之间的关系。用户在界面突然变化时会觉得困惑和不理解，这就是网页类界面最初在逻辑关系设计的缺陷。

让用户轻松理解页面之间的关系其实是非常重要的，这直接关系到操作效率。虽然用户可以通过经验来克服这些问题，最终习惯和学会有效地与这款界面进行交互，但是突然的变化始终会让用户迟疑，界面体验就一直很糟糕，往往会影响用户的进一步行为，这对于APP产品来说是致命的。

因此，设计师开始将界面之间的关系交给MG动画来处理，做成图形动画来表达。动画很容易就能看懂，即使再夸张的跳转也没问题，因为动画擅长于提供足够的视觉信息让观众理解，利用真实的动作来展示对象的物理变形。这样一来，MG设计就打造出了界面之间必要的视觉线索，让用户理解某个动作前后发生了什么，感觉每个行为都到有充分的逻辑。

第二点，MG动画设计成功地将传统动画的经典表现方式添加到平面版式设计语言中，使UI界面呈现出多维的动态设计趋势。

迪斯尼动画师编著的《Animation： The Illusion of Life》中总结了动画表现的十二法则，如今这些法则已被MG设计师应用到到界面设计之中。其中最有代表性的表现方式为拟物化，夸张和增强现实。

1. 拟物化，将UI中的元素当作真实独立，有物理属性的的物体。在动画片中，人物和元素都是真实的，有重量的物体。他们每次走动都好像是生活在真实世界中一样，这种感觉非常真实。这种拟物感不仅仅是填充一个像素区域那么简单，这些物件的运动是通过增加惯性来实现的。动画的所有的原则，例如：慢进慢出，跟随，和弧形运动，其随后所有的讨论，都是基于这个原则，他们是有质量的物体。把UI界面中的元素变成独立的，区别于背景的物体，并让其拥有动作惯性是非常重要的，用户可以连续并稳定的操作他们。

2.夸张，通过夸张的手法，往往可以让设计达到事倍功半的效果。经过夸张手法处理的动画表现的更现实。夸张的表现手法可以突出某些受到忽视的细节。在动画中，动画师可以通过夸大某个细节来引起更多的注意力。可能这些细节原本很难背察觉。比如当用户的鼠标指针移动到某一功能时，icon会跳动一下，提醒用户点击之后会有变化。这样，可以让用户更容易理解界面。他们不断的为用户解释或者暗示界面之间的继承关系。如果没有这样的线索，用户会非常难以理解这些界面。

3. 增强现实，所有的动画技术都会增强某个现实，用来加强动画动作与观众之间的关系。 MG动画设计也是利用这点来增加UI界面与使用者之间的互动关系。例如UI元素快速的进入屏幕，然后迅速做出一个减速再到达目的地。这种方式有助于让元素在移动中看起来更有物理质量。此外，缓进缓出效果出现在某一个快速动作之前，有助于观看时更加舒适。如果没有它，UI元素的移动会感觉很假，类似缓进缓出这种细节效果可以极大的影响一个界面元素的视觉质量。增强现实的最后一个方法是跟随运动。 在现实世界中，当主物体发成运动时，与其关联的物体会做出跟随运动。 动画师们将这种观察使用在动画中，当动画中的主体物停止后，其他部分细节依然可以运动。包括了身体，衣服，和一些局部的动作处理，让其动效变的更加极致。在MG动画中，移动APP图标位置是典型的跟随运动效果，当APP插入一个新位置时，其他APP位置跟着位移。

MG设计源于动画领域，侧重于娱乐，而传统界面设计侧重于信息的交互式传递。如果将将两者的优势相结合，由独特而流畅的动态图形动画来提升严谨的互动体验，构建出用户与界面之间的独特的情感关系，使人也更容易理解界面，用户更乐于参与其中。