【交互设计】APP交互动画及设计技巧！

交互动画是指在动画作品播放时支持事件响应和交互功能的一种动画，也就是说，动画播放时可以接受某种控制。这种控制可以是动画播放者的某种操作，也可以是在动画制作时预先准备的操作。 这种交互性提供了观众参与和控制动画播放内容的手段，使观众由被动接受变为主动选择。 最典型的交互式动画就是FLASH动画。观看者可以用鼠标或键盘对动画的播放进行控制。

高端机的性能不断更新，手机操作系统的升级，使得互动动画在应用产品领域的应用非常普遍。应用程序用户界面开始添加精致细腻的互动动画，使应用体验更具吸引力、更具动感、更具引导性。

交互性、开放性和沉浸性是交互动画的三大特性。在App中加入交互动画能给用户带来一种舒适、自然和流畅的感觉，所以交互动画逐渐成为了产品与用户之间的沟通方式，成为产品的肢体语言。在App中适当的交互动画具有以下三个作用：

1.提高用户兴趣，降低学习成本。通过巧妙的互动动画，可以让用户产生良好的心理感受，进而让用户更容易理解产品的功能。有时对函数的详细解释不如简单的交互式动画效果吸引人。

2.增强用户直接操作的感觉。用户在使用产品功能的同时，也追求简易和畅顺的操作，能与产品产生良好的互动。在设计App产品时，能合理地结合一些物理化的动画，无论是动画的时长，还是流畅性都达到了，这些交互动画的运用就能让交互更贴近用户，给用户提供舒适的体验。

3.强化品牌一致性。很多App产品都把交互动画作为传达品牌个性和内涵的重要途径，我们不难发现很多热门App产品都有非常出色的动效，独特的交互动效已经成为了App的标志。

简单说使用恰当的动效，就可以增加产品的识别性，可以帮助树立品牌个性，可以为用户带来愉悦的体验。

交互动画设计技巧

1.掌握交互动画的节奏和幅度

做视觉感受顺畅的交互动画，不管是动态、文字按钮还是动态图像，最重要的两点就是时间和节奏，需要注意的是尽量让动画符合人的视觉经验。例如：缓动的效果，通常上自然界较为柔和动作的表现为慢入和慢出，又如拉伸、挤压、预备动作，逆向缓冲等这些都属于技巧的掌握。

特别是对于UI的动态效果，只有掌握了这些技巧，才能制作出一个好的交互动画，或者至少是一个过眼云烟的动态效果。掌握这些技能并不难，因为这些技能比较公式化。如果你多模仿，多从好作品的效果中学到东西，就能做出更好的互动效果。

2.阐述清晰，精确引导

动态聚焦。通过动态化的处理引导用户聚焦界面的关键部位，以使交互体验更加流畅。青蛙的眼睛能够快速捕捉移动中的物体，人眼也具有相似特征，运动中的物体总能引起下意识的关注。

空间转场。转场动效是设计师普遍重视的一种特效，它的作用也是引导用户，让用户更好地理解页面跳转，知道自己身在何方。

3.交互动画设计法则

简化界面信息和交互层级。例如：显示和隐藏二级操作项，利用动效可以有效控制界面中的信息隐藏，当重复进行某些操作后隐藏的内容会动态展开，从而达到简化初始界面的目的，使界面大气简洁。又如使按钮动效化能够让界面重要信息动态浮现在同一按钮上，使得用户的目光紧紧盯着按钮，弱化了页面跳转带来的干扰，使交互体验更加流畅。

使用风格类型一致的动画。为了使动画的风格保持一致，动效设计师在设计交互动画的时候与手机内置动画保持统一。例如：窗口内容的上下卷滚、元素的出现和消失，以及内容的放大、缩小等，但当你的动画违背物理定律和自然法则的时候，用户会感觉到非常不适应。

小心地添加动画来传达有价值的信息。有目的、有限制地在运动效果和UI组件中使用动态行为，并确保测试结果。过度使用动态会使应用程序的交互和外观混乱，信息层次结构难以控制。真正优秀的动态效果不仅是外观美观的花瓶，更是优化互动、提升体验的功能。

切记不要动画而动画，而应该将其视为提升用户体验的新方法。

转载声明：本文来源于网络，不作任何商业用途