基于移动终端的交互式动画设计探讨

夏丽雯

摘 要 交互动画能够提供更好的视觉上的用户体验，并可以起到引导和提示作用，移动终端中交互动画受限于网络、设备等，要为用户提供自然、愉悦的操作体验，就需要将视觉和触觉进行科学结合。文章在分析移动终端视觉体验和交互动画的基础上，结合交互动画的设计技巧，探讨了移动终端交互动画的设计原则。

关键词 视觉体验；交互设计；交互动画

中图分类号 G2 文献标识码 A 文章编号 2096-0360（2018）13-0126-02

近年来，移动智能设备快速发展，各类配置、系统等被不断优化，移动终端的视觉体验也有了更好发展，动画被广泛应用在移动终端的界面设计中，其主要应用形式有欢迎、跳转、加载、反馈等，有效减少了用户因等待引起的焦虑，并且使体验更加流畅愉悦。交互动画是动画和交互设计结合产生的同时具有艺术美和设计性，并增加了人与物的互动性，极大程度地优化了用户体验，提高了用户在互动环节中的主动性。

1 移动终端视觉体验和交互设计

视觉体验是交互体验的最初阶段，在交互设计中有着重要地位，移动终端视觉体验是其交互动画设计的基础，视觉体验源于视觉元素，交互设计视觉元素包括色彩、图像、文字等。移动终端是目前主流的物理设备，涉及到人们日常生活的方方面面，具有很好的交互性，是互动交流的重要平台，能够充分挖掘动画作品中的艺术特征，强化观赏体验与情感交流，是交互动画的重要载体。移动终端便于携带且使用情境复杂，用户在使用设备时注意力集中状态较差，由于用户需要在有限时间内浏览大量信息，此时用户會选择直奔主题或是直接退出，导致很多精心设计的细节及标题性文字会被忽略

掉[1]。因此设计师需要根据移动终端阅读界面视觉特点，增加图片、图标等的使用，避免使用大量文字，人们识别图像速度远超文字，可以轻松看清图片内容和细节，在使用文字时尽量简洁、清晰，减少阅读困难，同时可以使用法“井”字型三等分方法平衡和稳定界面元素，移动终端屏幕尺寸相对较小，界面元素丰富，科学的排列方式，可以避免界面杂乱无章，从而增加视觉吸引力。

2 交互动画

1）交互动画的特点。交互动画是在创作中加入了交互设计，在播放时能够支持事件响应和交互功能，观众可对动画进行控制或感应播放环境，进而呈现出不一样的动画效果和内容，增加了观众的参与度，使动画变得更具趣味性[2]。随着移动终端和网络的广泛应用，交互动画更加深入人们的生活，推动了新技术在艺术创作中的应用。交互动画促进了观众观看动画形式和习惯的改变，使观众能够积极参与到交互环节中，增强情感带入感，更好的体验故事情节发展，使观众从被动欣赏转变为主动参与，符合当下时代发展趋势。交互动画最大特点就是动画中融入了交互任务，在动画情节创作完成后，需要考虑到交互环节的流畅性、引导性、娱乐性等，来满足受众需求。由于交互动画可能存在较多的分支剧情，因此在设计时要考虑交互内容对整部动画的影响。移动终端交互动画即用户在使用App中进行交互产生的动画，常见的有刷新、页面跳转、图片缩放等，可提供更好的用户体验，提高用户黏性，其动画设计多较为微小，需要设计人员不断改进来取得更好的视觉和体验平衡。

2）移动终端交互动画作用。交互动画的作用主要是反馈提示和视觉引导，常见反馈提示为页面跳转、点击按钮变化等，视觉引导则多用于数据类页面。在设计移动终端前，要先对常用的交互手势进行了解和分析，移动交互动画作用之一是对用户的操作进行反馈提示，在设计动画时需要结合不同的手势应用情况。点击是触屏设备常用的手势，按钮和输入框均需要应用这类手势，其动画设计要具有明显的反馈效果，并且减少动画时间对执行效率的影响。双击手势常用于图片浏览中的快速缩放，在设计动画时，一般将双击位置设为缩放中心点，围绕双击地方进行缩放，通常不需要额外设计。拖动多用于界面元素的拖动，区域是任意的也可以是固定的，如界面App排列和整理，拖动动画路径要和手指移动轨迹保持一致，也可在用户按住一个元素时给予反馈动画。长按多用于删除和弹出菜单，在不同的移动终端进行长按可唤出不同功能，如移动终端界面编辑和App卸载等，在进行动画设计时常用进度条对所需长按时间进行提示。滑动手势可分为左、右、上、下不同方向滑动，滑动起始位置不同其效果可能会不同，上下滑动多用于需要多屏展示的内容，如列表、文章等，左右滑动多用于切换页面或操作，在设计时不需要进行动画设计。双指缩放一般用于界面缩放，和双击手势相比，缩放应用多范围更广，并且缩放更加直观、精确，多用于游戏、地图类型的App中。旋转可实现某一元素的旋转操作，常用在照片编辑操作中，在游戏中也有应用。除这些常见手势外，不同移动设备手势设计也有差异，在设计交互动画时，要充分考虑到交互手势的运用，优化动画效果，提高用户体验[3]。

3 交互动画设计

1）交互动画设计技巧。在进行交互动画设计时，要尽量将动画的时间控制在0.3～1s，用户在使用App时不会花大量时间去欣赏动画，过长的动画会造成用户的不便，而过短的动画会被用户忽略，因此在设计时需要合理控制动画的持续时间，使用户不需要因为动画花费时间等待，同时可以清楚感受到动画。再有动画的效果要符合用户预期，使动画可以被用户预期到，如左右滑动手势的动画是菜单从左右滑出，减少用户操作不便，在移动终端的交互动画设计中，可根据其特点基于系统进行设计，在使用App时，用户对系统自带的动画更加熟悉，在不同App中使用相似动画，可以使用户能够更快的理解，减少学习成本，更便捷的使用软件。在设计游戏中动画时，可以进行独立设计，因此在实际工作中需要根据情况进行灵活选择，保证动画可以提升用户体验[4]。

2）移动终端交互动画设计原则。（1）动画功能一致性：动画既可提供更好的视觉方面的用户体验，也可起到提示和引导作用。在同一App中，相同功能的动画要保持一致性，用户在使用中会对相似的操作更加熟悉，在掌握应用的使用后对相似的动画就会易理解，同时动画的一致性会使软件整体更加的整洁有序。（2）动画添加合理性：随着网速和配置性能的提升，移动终端中应用的用户体验也在不断提升，在发展了App同时也降低了用户的耐心，对一些需要耗费时间加载的App，可以设计简单有趣的动画分散注意力，减少用户对等待时间的关注，如页面加载、页面刷新等。（3）动画设计简洁性：在移动终端交互动画设计中，并不是动画越多效果越好，从用户角度来将App的流畅度很重要，过多动画应用会耗费较多的资源，影响应用的整体效率。在设计时需要平衡性能，结合用户体验进行多方面思考。（4）动画设计时效性：现代生活对时效性有很高的要求，从开发角度来看，动画设计需要编制大量代码，在工作中常会因为产品上线时间要求，对动画进行压缩，删去对功能影响不大的动画，同时减弱动态效果还可以节省设备电量，提高移动终端系统流畅度。（5）动画设计科学性：交互动画设计主要目的是提升用户体验，在进行设计时要尽可能的模拟真实世界，使动画更加形象。同时要注意动画的视觉连贯性，在明确引导用户同时，使用户能够直观感受到动画过程，如页面跳转衔接，平衡新入元素、淡出元素和通用元素，使用户能够清晰感受到其中的关联。（6）动画设计层次性：交互动画设计中元素的出现和消失非常常见，在设计动画时要对元素的运动和顺序进行充分的思考，以实现对用户更好的引导。在设计元素时，要避免出现和消失同时发生，同时也要减少先后顺序的明显性，使整个动画流畅、自然。元素运动设计要设置一个统一的焦点，使元素运动有层次性，避免混乱不连贯的情况[5]。

4 结束语

移动终端中交互动画设计能够有效提升界面的视觉效果，交互动画设计在移动终端中应用广泛，在进行设计时需要结合视觉体验、设计技巧等，根据交互动画设计原则对整体设计进行合理控制调整，优化整体设计，使用户能够获得更好的操作体验和情感体验。

参考文献

[1]孙传祥.基于自然交互方式的移动终端产品交互设计研究[D].济南：山东大学，2012.

[2]张嫒.基于移动智能终端阅读类App的视觉体验设计研究[D].北京：北京工业大学，2016.

[3]韩雪.基于手持移动终端的交互式动画设计研究[D].天津：天津大学，2014.

[4]孙唯特.基于移动智能终端的交互式动画分析[J].艺术科技，2015（11）：77.

[5]黄方闻.动静之美 Sketch移动UI与交互动画设计详解[M].北京：人民邮电出版社，2016.