APP动效设计：优化用户体验的关键

在如今琳琅满目的APP中如何脱颖而出呢？设计师要考虑的不仅仅是产品如何更合理地展现结构与功能，更重要的是思考自己的APP是否能在做到简便、易懂的同时给用户以新颖感。

此时，有限的屏幕空间仅靠文字的提示是不够的，APP需要更多的新鲜血液，即动效设计。动效设计可以扩展空间内容、简化引导流程、降低学习成本，更重要的是给用户带来意想不到的惊喜，它就像人类的肢体语言，通过肢体语言传达更多的抽象信息和性格展现。肢体语言又称身体语言，是指通过头、眼、颈、手、肘、臂、身、胯、足等人体部位的协调活动来传达人物的思想，形象地借以表情达意的一种沟通方式。一个人要向外界传达完整的信息，单纯的语言成分只占7/100，声调占38/100，另外的55/100信息都需要由非语言的体态来传达。肢体语言的重要性可见一斑。

肢体语言大致可分为三类动效，即基本动效、招牌动效和高难度动效，这三种动效是如何在APP设计中体现的呢？

1.APP设计的三类动效

基本动效让用户舒服

基本动效也可称为日常动效，如坐立、行走、握手、拥抱等，对应APP中的基本动效分三类。

指向性动效：如滑动、弹出等。

提示性动效：如滑动删除、下拉刷新等。

空间扩展：如翻动、放大等。

流畅、自然映射、重力模拟这些动效看似简单却能让用户在操作时轻松自如并有强烈的代入感。这类动效最重要的是让用户感到毫无负担、如沐春风，也就是不要夺人眼球，悄无声息地顺应用户行为，引导用户需求。

这类动效在设计过程中需要注意以下几点。

系统兼容和资源占用。

动态速度的节奏。

仿生性or现实重现。

招牌动效加深用户印象

招牌动效是基于基本动作有选择性的差异化展现，巧妙的设计在满足产品功能需求的基础上更能让用户惊艳。这类动效是APP的专属符号，APP的品牌展现通过此类动效有较大的发挥空间。同时这类动效的设计更具尝试性和前瞻性，它是动效趋势的实践和探索，甚至能引发跟风潮流。

这类动效设计需要注意以下几点。

操作前的提示引导。

夸张化和个性化的表现。

对动态趋势的预测。

高难度动效让用户惊喜

基本动效让用户舒服，招牌动效让用户印象深刻，然而只有这些还不够，令人惊喜的高难度动作可以让别人对你刮目相看。这类动效很酷、很炫，可以让用户做长时间的视线停留享受，让用户在惊叹的同时不得不为设计师点赞，大大提升了对APP所属品牌及开发团队实力的认可。

当然不能忘了APP的主要功用，高难度动效只是锦上添花或画龙点睛，所以在APP设计中高难度动效并不一定都会使用，要根据APP的实际需要进行设计，在不干扰主功能的前提下进行探索展示，因此这类动效多出现在引导页或者特殊功能展示上，如图5‑178所示。

对于这类动效需要注意的是在满足系统资源占用的前提下尽可能发挥。

图5‑178 动效展示

基本动效、招牌动效和高难度动效的合理运用可以让APP变得更出众、更性感、更有趣。在APP设计过程中，这三类动效要遵循“以基本动效为主，招牌动效为辅，高难度动效精选使用，切勿过度炫技”的准则。在全民扁平化的设计趋势中，相信动效会为设计带来更多的可能和惊喜。

2.赋予动效生命力

一段动效首先需要是生动且有趣的，不仅要有好看的外观还要有流畅的体验。如果要做到这一点，需要赋予动效以生命力，具体有以下几种方法。

模拟惯性

现实中物体的运动是有惯性的，例如公交车突然刹车时乘客会突然往前一倒。仔细观察不同的动效，会发现图像在变化（放大、缩小和翻转）的末端都会“超出”一点再立即“反弹”回来，如此处理使得整个动效充满活力，显得生动、有趣。

模拟重力

与惯性一样，重力也是现实中存在的现象，所有物体在无向上的支持力的情况下都会下坠，例如倾倒垃圾。一般APP删除卡片的动效就是横向滑动直至消失，但是有些动效却加入了重力效应。如卡片在横向滑动的同时也在翻转并下坠，就像现实中往垃圾桶中倾倒垃圾一样。这在使得整个动效生动、有趣的同时也便于用户理解操作的含义。(www.xing528.com)

均匀变速

一个优秀的动效肯定不会是匀速运动的，匀速运动的物体显得生硬和死板，就像机器人一样。要想让一个图像运动的有活力，就需要对其运动速度进行设计。界面中不同元素的运动速度不尽相同，但其运动均遵循一定的原则，其中之一就是均匀变速，切忌“急起”。也就是说界面元素在运动时的初始速度要为0，以匀加速开始运动，而在运动结束阶段往往是可以急停的。

碎片化运动

使一款应用变得个性十足的一个好方法就是给它加上炫酷的动效，而使一个动效炫酷的常用方法就是碎片化运动。简单地说就是把界面中的图像拆解成一个个碎片，然后让它们进行不同步的运动，利用时间间隔和变速产生炫酷的效果。

3.提升APP动效的内在美

真正优秀的动效不是只有漂亮外表的“花瓶”，还得具备优化交互和提升体验的作用。下面总结了三类动效的“内在美”。

引导

图形界面本是难懂且抽象的，增强引导是降低软件操作难度和提升用户体验的好方法。

动态聚焦

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

示意过渡

过渡动效就是给界面的变化加上流畅的过渡，目的是引导用户了解到底发生了什么，而不会使其不知所措。如添加卡片的过程进行了生动的模拟，让用户能够很轻易地了解发生了什么。试想一下，如果该页面没有滑动效果，而是直接生硬的跳转，是不是差劲很多？

空间转场

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

4.简化

有时优秀的设计就是出色的简化，简化界面信息和交互层级可以降低操作难度与提升用户体验。

隐藏二级操作项

利用动效可以使界面中的部分信息隐藏，在进行某些操作后隐藏的内容会动态展开，从而达到简化初始界面的目的，使界面简洁、大气。

按钮动效化

使按钮动效化能够让界面中的重要信息动态地浮现在同一按钮上，使得用户的目光紧紧盯着按钮，弱化了页面跳转带来的干扰，使体验更加流畅。

5.增强反馈 软件的反馈对于用户体验的提高来讲至关重要，增强反馈可以起到更好的提示作用，使体验过程更加轻松和愉悦。抖动是增强反馈的方法之一，用动效反馈代替图形文字的静态提示更加自然和引人注目。例如一个动效出自苹果的Pages软件，在进入编辑状态后待编辑对象进入不断的抖动状态起到很好的引导作用。

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

6.动效设计何时动

等待的时间：面对缓冲、加载等，用户会缺少耐心，而充满个性、有趣的动效可以让用户被设计所吸引。

如果希望用户点击这个地方，可以在此处设计一个动效。

如果希望用户点击的效果不一样，也可以给它一个动效。

7.常见的动效设计方法

下面是一些常见的动效设计方法，在合适的条件下自然要考虑从这些方法入手，为我们的设计增加一些动感。

将元素替换为个性化内容：传统的等待或加载动画人们已经熟悉，要想让人眼前一亮，改头换面是必须的。如谷歌用了自己的颜色，“去哪儿”用了自己的Logo等，这些都可以在体现个性化动效的同时凸显产品品牌，不失为一个很好的选择。

更换产品的运动方式：除了旋转运动之外，我们还可以运用重复、构建、变形、拟物和人的动作（翻书）等，只要是和产品定位相符的元素，我们都能给它创意一个独特的运动方式。

赋予组件明显的交互反馈：冷冰冰的点击和出现往往不能吸引用户的注意力，所以当我们需要加强某些元素来引导用户的时候可以给这些元素加上适当的出现效果，如渐隐/渐显、位移、放大/缩小、光晕、分布等效果，这样会起到很好的引导效果。

动效设计的精妙之处在于瞬间使人们获得的体验，通过瞬间的可见变化丰富了人们在使用APP时的感觉，从而不再陌生、不再冰冷、不再无趣等。动效设计在赋予元素动的同时，我认为还要符合人们的认知，并不是所有的动都能让人愉悦，既要满足产品的需求，还要匹配人们当时的场景诉求。