移动端手机应用中UI动效设计探究

罗艳

摘要：随着互联网时代的到来，对于UI设计的需求正在持续性放大。UI动效的出现更是推动了UI设计的发展，UI动效能够帮助提升用户体验，给用户带来更好的操作感受，拉进产品与用户之间的距离。本文主要对UI动效在移动端手机应用中的运用进行研究，在概念、作用、分类以及特性几个方面对UI动效进行了分析，更加全面的剖析适用于手机应用程序的动效设计。

关键词：UI动效;应用程序;移动端

1、UI动效的概念

随着技术革新，用户对于产品细节的感知度和挑剔程度正在日益剧增，越来越多的产品都在尝试通过不同的手段来打造产品的差异化，而动效设计作为近年来大火的设计趋势之一也被越来越多的产品所青睐。UI动效日渐从“锦上添花”慢慢变成“必不可少”的优秀产品的构成元素。

动效源于国外的MG动画，简单来说就是会动的图片，也是处于动画设计和平面设计之间交叉的一门学科，是运用了动态的图形来传递信息和表达氛围的。UI动效是穿插于人机交互的过程中，是为了缓解生硬的跳转和无聊的等待过程中焦躁心情的产物，好的动效能使人感觉舒适，人机交互更流畅，引导性更强，体验更棒。在进行用户界面设计的时候，UI动效可以存在于交互、转场和具体的控件操作上，作为一种状态转变、交互反馈和视觉引导的工具而存在。

2、UI动效的作用

UI动效的应用能让设计师更加充分的表达设计想法，也能让用户更好地了解产品，增添产品的活力，拉进产品与用户之间的距离。UI动效的典型作用主要有三个方面。

2.1内容的展示

UI动效能够作用于页面内容展示，能够展示页面上元素的变换以及页面之间的切换。通常一个应用程序内会包含多个页面，用户会频繁地进行页面切换的操作，转场动效就是帮助完成页面之间的跳转，使用转场动效完成页面过渡更加符合用户的认知心理，可以更好地展示页面之間的层级关系和逻辑关系，减少用户的认知负担。

2.2品牌的建设

很多时候，静态图片能够传递的信息是非常有限的，运用动态的表达方式能够增添其内容传达的维度。在一些刷新加载页面和启动页页面中，通常会用到应用程序的图标进行展现，如果结合动效的方式来表现，在动效设计中利用品牌相关元素来完成图标的动态变换，这样能更好的将应用程序的内涵和动效结合起来，也能更好地传递品牌理念与表达品牌特色。通过UI动效在页面上的表达，能够起到品牌建设的作用，使得品牌传递的信息更充分和更立体。

2.3趣味性的表达

加入动效的页面更具活力，并且增添了产品的趣味性，产生与用户情感交流的效果。当用户在进行文件下载和页面刷新等操作时，由于网络的原因需要花费一些时间等待命令完成，动效的加入可以让无聊的等待过程变得友好且有趣，能缓解用户在等待过程中消极情绪。

3、UI动效的分类

依据UI界面设计对于动效的需求，将UI动效按照不同的功能划分成四种类别，分别是反馈动效、切换动效、引导动效、呈现动效。

3.1反馈动效

反馈类动效主要是为了告诉用户目前操作到哪，实时状态如何，缓解用户对应用处理速度的量化感知。无论是点击、长按、拖拽滑动等交互行为，都应该得到系统的即时反馈，将其以视觉或动效的方式展现，帮助用户了解当前系统对交互过程的响应情况，并为用户带来安全感。

当用户进行一个操作后，出现反馈，界面操作前的状态和操作后的状态不一致，通过这个不一致，给予用户在该操作上得到了提交的反馈，这是将动效运用在操作反馈上。在进度提示反馈中，进度条加载通过动效的表现明确告知用户当前的具体进度和状态，让用户随时随地知道加载所需时间，让用户感觉对当前操作环境是可控的，给予用户安全感。当系统状态发生重要的变化时，动效也可以用来提醒用户，可以给用户一个快速而又简洁的一个反馈，这是将动效用于系统提示反馈上。

3.2切换动效

在移动端界面中加入一些平滑舒适的过渡效果，不仅能让界面显得生动，更能帮助用户理解界面前后变化的逻辑关系，从而提升产品的使用性。这类动效主要使用在轮播图、页面切换以及导航菜单的切换中。

界面的层次结构和元素的互动是非常重要的，在界面中的每个元素都有其定位和目的，UI动效能够通过用户的互动有效阐明界面的层级关系，以动态的方式表达上下层级的逻辑关系，更加便于用户对于产品结构的理解。当页面布局发生改变时，以动效的方式来进行衔接页面的跳转，而不是生硬的进行切换，这样能让用户操作起来更加舒适，同时能够让用户清晰地看到过渡的过程并且理解这种状态的改变。

3.3引导动效

当应用程序中的功能比较复杂或增加了新功能的时候，可以在用户使用时采用动效对于功能的方向、步骤、位置等进行动态引导，使用户快速地了解和掌握该功能。在这里，UI动效如同提示板，会告知用户如何和产品进行交流互动，能够直观的向用户表达交互操作，起到引导的作用，通过动态形式来引导用户对产品有更近一步的认识与了解。

很多应用程序会在界面内容展示时，使元素按照一定的秩序规律逐级呈现，引导用户视觉焦点走向，帮助用户更好地感知页面布局，层级结构和重点内容，同时也能让整个流程更加丰富流畅，增添了界面的活力。

4、UI动效设计的特性

4.1功能性

UI动效能够在一定层面上解决用户的需求，能够优化用户对界面的感知，使其感到更轻快更全面，并且动效设计的加入还能引起用户的注意，提示和引导用户进行下一步的操作。也能提供给用户操作后的视觉反馈，并为下一步的跳转做准备。

4.2物理性

动效需符合空间逻辑并根据物理定律来制作动态，是定义屏幕和UI设计元件之间的空间相对关系，比如相对高度、权重以及速度等方面。动态设计时需要考虑到重力、惯性、速度和刚性等因素，将这些物理属性融入动效设计中，得到的动态效果才会显得更加真实，用户也会觉得操作更加自然，当然就有助于用户快速形成使用习惯，尽可能多使用熟悉并可预知的动态。

4.3趣味性

用户每天都接触众多的应用程序，不同的程序解决着用户的各种需求，真正能够留住用户都需要有好的用户体验来增加用户粘性。要把动效设计得有感染力，需要在设计动画时不仅让用户感觉真实，还要有自己的独特风格。给应用程序加上一些动效变化，能够增添一些关爱和趣味，让用户喜欢上该应用程序并产生深刻的品牌印象。

5、总结

由于人工智能的普及和5G时代的到来，信息体量也是呈几何数增长，这也意味着有了技术的支撑，手机、平板电脑等移动电子设备的内存配置越来越高，UI动效的优势越发明显。

UI动效设计所具备的优势，首先是提升用户体验，强化品牌感，强化产品特点，再者是能够提高流畅度与整体性，环节用户负面情趣，增加趣味性，并且能够减少沟通成本，赋予设计师更多的竞争力。动效属于情感化设计，从而能提升产品体验，提高用户粘性，所以未来是必不可少的！动效设计能让用户更能感受到产品额外的感情，这里也是牵扯到情感化层次的内容，未来的交互设计一定是在于动效设计的。

参考文献：

[1]黄方闻，动静之美—sketch移动UI与交互动效设计详解[M].北京，人民邮电出版社，2016.7.

[2]邸小松 封姿羽，情感化手机端界面动态效果设计研究[J].吉林，兰州职业技术学院学报，2021.2.

[3]奚柯，动效设计在手机APP界面中的应用研究[D].东南大学，2018179BEDB5-1ADD-47F6-B4D5-A69464486C99