基于APP的交互动画设计与应用

开篇：润墨网以专业的文秘视角，为您筛选了一篇基于APP的交互动画设计与应用范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要：

目前国内对app交互动画的设计理论研究较为孤立和零散，而且局限在对交互动画技术研究的范畴，缺乏技术与设计的有机结合。文章对APP交互动画的设计展开研究，对APP交互动画的作用、特点、设计技巧、应用范围等进行系统分析和梳理，并对APP交互动画的设计原则进行了探讨，丰富App交互动画的设计研究理论。

关键词：

APP 交互动画 设计

中国分类号：TB47

文献标识码：A

文章编号：1003-0069 （2015） 05-0127-02

一 APP与交互式动画概述

（一）APP的发展

App （Application）指的是智能手机的第三方应用程序，比较著名的应用商店有苹果的App Store，谷歌的Google Play Store，微软的Marketplace等。随着移动设备的快速崛起，伴随而来的是App呈现爆发式增长。2011年以来，人们花费在App上的时间已经超过网页，而且势头不减，人们花费在移动App上时间分配，游戏与社交占据了快80%。在中国最近的5年里，App分发成为各大互联网巨头的新宠移动，App正对很多行业如：游戏、艺术品、零售、新闻媒介、旅游等行业产生深刻变革，据相关数据统计，中国已成为APP增长最快的国家之一（图1）。

（二）交互式动画

交互动画是指动画在播放时支持事件响应和交互功能。简单说就是动画在播放时可以接受某种控制，这种控制可以是用户的某种操作，如点击，声控等，这种交互性提供了观众参与和控制动画播放内容的手段，使观众由被动接受变为主动选择。

随着移动端产品体验时代的到来，人们对App界面交互设计得越来越高，近几年，高端机的性能不断更新换代，手机操作系统的升级，使得交互动画在App产品领域的应用非常普遍，例如苹果手机，它自身的iOS用户界面中添加了精美、细微的交互动画，iPhone在App设计中充分发挥了动画在交互易用性方面的优势，它们使得产品应用的体验更具吸引力更具动态性、引导性。

（三）App交互动画的作用

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

（1）增强用户直接操作的感觉

随着移动设备硬件的不断发展，以及其软件的更新，带给用户的选择也会越来越丰富，用户在使用产品功能的同时，也追求简易和畅顺的操作，能与产品产生良好的互动。例如iOS操作系统中，移动桌面图标时会产生震动的动效，这种动效会给用户传达不稳定的感觉，提示用户此时在界面上的图标是可以移动的。又如Google的地图App，地理位置的标识采用了模拟真实的按图钉的效果。在设计App产品时，能合理地结合一些物理化的动画，无论是动画的时长，还是流畅性都达到了，这些交互动画的运用就能让交互更贴近用户，给用户提供舒适的体验。

（2）提高用户兴趣，降低学习成本

通过巧妙的交互动画让用户产生良好的心理感受，进而让用户更容易了解产品的功能，有时详细功能的讲解，往往不如一个简单的交互动画效果更具吸引力。例如，iOS 7的天气App，界面以可移动的动画三维图像展现了当前的天气情况。打开天气App，就可以看见界面整个背景是以动画模仿当时的天气状况。例如，晴转雷雨的天气，模拟天空的界面图像从阳光明媚，过渡到乌云逼近隐现，同时还伴随着动画效果的电闪雷呜，动画效果几乎模拟了当时真实天气状况，又如，不同暗度的夜间动画图，不同明度的白天动画图，甚至还包括了云彩明亮度、厚度，或下雪等天气状况，这样用户通过这些模拟天气的动效，快速且形象地了解到了天气的变化。

（3）强化品牌一致性

很多App产品都把交互动画作为传达品牌个性和内涵的重要途径，我们不难发现很多热门App产品都有非常出色的动效，独特的交互动效已经成为了App的标志。不同App动效可以传达滑稽或者是严肃的感觉，也可以是机械或柔和的感觉，App产品选择恰当的交互动效就能把品牌深深印在用户脑中。简单说，使用恰当的动效，就可以增加产品的识别性，可以帮助树立品牌个性，可以为用户带来愉悦的体验，例如，Path是移动终端的社交类型App，在单一平台下创建统一的交互体验是Path的优势，给人亲和，有趣的印象弹出层，界面滑动，分屏，返回，前进等，这些交互动画无不流露出品牌的特性与情感一个标志性的动画效果，所以优秀的交互动画往往也会是一个产品的代言。

二 交互动画的设计技巧

交互设计中，要制作一个优秀的动画，可以要从以下三个层面进行认识和思考。

（一）掌握交互动画的节奏和幅度

做视觉感受顺畅的交互动画，不管是动态、文字按钮还是动态图像，最重要的两点就是时间（Timing）和节奏（Spacing），需要注意的是尽量让动画符合人的视觉经验。例如，缓动的效果，通常上自然界较为柔和动作的表现为慢入和慢出，在锤子ROM的UI中普遍使用了这种动画手段，如时钟切换的时候指针位移动画是最为明显的。又如，拉伸和挤压，预备动作，逆向缓冲等这些都属于技巧的掌握。尤其是做UI的动效，只有掌握论文这些技巧才能做出不错的交互动画，至少能做出及格的动效。掌握技巧不难，因为技巧都是比较公式化的，多模仿多借鉴好作品的效果，就可以做出较好的交互动效。

（二）阐述清晰，精确引导

APP的界面空间受限于手机屏幕的大小，许多信息和图像要很好地规划在方寸之间，一般依据信息的重要性被分为不同的等级，需要多次进入和返回等操作，而动画是可以清晰阐述产品功能间的切换过程的，利用交互动画增强引导性，是降低软件操作难度和提升用户体验的好方法。―下有三种比较常用的办法。

（1）动态聚焦

通过动态化的处理引导用户聚焦界面的关键部位，以使交互体验更加流畅。青蛙的眼睛能够快速捕捉移动中的物体，人眼也具有相似特征，运动中的物体总能引起下意识的关注。如图（2）所示动效，屏幕上方的数字不是直接显示一个数值，而是从零迅速递增到特定的数值，特意展现一个交互动态的效果，目的就是为了吸引用户的目光，起到聚焦的作用。国内的支付宝钱包APP也利用了此类动效。

（2）示意过渡

过渡动效就是给界面的变化加上流畅的过渡，目的是引导用户理解到底发生了什么，而不会使其不知所措。如锤子Rom里，点击一个App图标时，整个图标会放大并翻转着来到用户眼前，让App方格背面成为这个App的界面，就是在告诉用户，你现在用的是这个App，这个App还在你面前，同样结束应用的时候也是转回去，暗示用户刚刚的页面都回到这个icon方格里了。

（3）空间转场

转场动效是设计师普遍重视的一种特效，它的作用也是引导用户，让用户更好地理解页面跳转，知道自己身在何方。iOS7桌面图标组的进入和退出一则动效就是一个漂亮的转场动效，为了避免两个页面之间的跳转过于生硬，利用动效填补上了页面跳转的中间过程，使得体验更加流畅和自然。

三 交互动画设计法则

一个优秀的App交互动画不仅仅是炫，而且要实用，有的还要考虑手机的性能等因素，所以想做一个好的交互不并容易。

（一）谨慎地增加动画，传达有价值的信息

动画的使用犹如双刃剑，顺其势可披荆斩棘，塑造良好交互的App产品，如使用不当或是滥用，则往往适得其反。过多无理由的动画会阻碍应用的流畅性，降低性能，还会分散用户在任务中的注意力。谨慎地增加动画，特别是在那些不能提供沉浸性体验的应用中。最重要的是要有目的和限制性地使用运动效果和UI组件中的动态行为，并确保对结果进行测试。过度使用动态则会使App交互和看起来很迷惑，信息层级关系很难控制。真正优秀的动效不是只有漂亮外表的花瓶，还得具备优化交互和提升体验的作用。

（二）简化界面信息和交互层级

利用动效简化界面信息和交互层级可以降低操作难度和提升用户体验，目前App以及wap站的视觉效果绚丽完美的同时，同时带有很多的复杂视觉元素，处理好每个视觉元素的关系，以及有效地传达用户操作后元素之间的关系变化，就需要设计交互动画，阐述其变化的逻辑与过程，让操作更合理，更流畅。

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

（三）使用风格类型一致的动画。

为了使动画的风格保持一致，动效设计师在设计交互动画的时候与内置动画保持统一。也就是说，设计师设计的动画应该切合内置iOS应用的动画，因为用户习惯于内置iOS应用的精细动画。我们要避免触及系统的标准行为，尽量尊重用户习惯。在iPhone中，动画式交互反馈方式是标准物理法则的风格，比如窗口内容的上下卷滚、元素的出现和消失，以及内容的放大、缩小等。但当你的动画违背物理定律和自然法则的时候，用户会感觉到非常不适应。

结语

APP交互动画化显然已成为移动互联网产品界面设计的新趋势，如何设计出有趣且吸引入的交互动画已成为设计师们的新课题。不同的产品适合不同类型的交互动画，有些产品，如游戏适合炫酷的动效，有些则不适合。切记不要动画而动画，而应该将其视为提升用户体验的新方法。