【第213期】产品的肢体语言–交互动画

【早读君聊聊】现在很多产品下载页非常流行表现炫技的动画，这种是非常好的吸引研究的一种表现形式。但昨天在跟交互设计师讨论关于动画与产品本身要表达的内容上是否要做权衡考虑。不要为了动画而失去产品最主要的功能点。比如某APP首屏下载功能，各种动画后按钮姗姗来迟。还有就是APP功能宣传上，动画太过的话，反而弱化了功能的表达。

正文从这开始~~~

随着体验经济时代的到来，人们对产品界面的期待值也越来越高，交互动画在手机领域的应用已经非常普遍，例如Iphone充分发挥了动画在交互易用性方面的优势。 而交互动画会给用户带来一种舒适、自然和流畅的感觉。 交互动画逐渐成为了产品与用户之间的沟通方式，成为产品的肢体语言。尤其是目前高端机的性能提升迅速，也为交互动画的执行效率提供了有效的硬件保证。

Google地图的让工具化与拟物化结合，不论是翻起页面的效果，还是图钉的效果，都是还原真实场景中的操作，通过动画的表现，让其更加逼真。也使界面更加的有层次。

在产品设计过程中，合理运用交互动画让产品与用户更好的互动，让产品变的更具情感，合理的动画运用可以：

提高用户操作流畅性
随着移动终端设备硬件以及软件的不断强大，带给用户的选择也会越来越丰富，用户在使用产品功能的同时，也追求完美的操作，与产品产生良好的互动。
目前app以及wap站的视觉效果绚丽完美的同时，同时带有很多的复杂视觉元素，处理好每个视觉元素的关系，以及有效的传达用户操作后元素之间的关系变化，就需要设计交互动画，阐述其变化的逻辑与过程，让操作更合理，更流畅。

提高用户兴趣，降低学习成本
通过巧妙的交互动画让用户理解产品功能，进而让用户产生良好的心理感受。让用户更容易了解功能，更好的方便的使用产品。有时详细功能的讲解，往往不如一个简单的交互动画效果更具吸引力。目前在游戏中广泛应用。

强化品牌一致性
弹出层，界面滑动，分屏，返回，前进等等，这些交互动画无不流露出品牌的特性与情感
一个标志性的动画效果，往往也会是一个产品的代言。

交互动画设计法则

传达有价值的信息
在用户完成行为之前把结果展示给他们，使他们能更确定自己的行为，避免出错。帮助用户预见自己的行为将造成的结果。
在iphone的屏幕上移动应用图标时，当你把一个图标拖动到一个位置时，旁边的图标会向后或向两侧移动告诉你当你松开手时这个图标将要停放的位置。

以下是总结的交互动画的一些设计原则：
阐述清晰，精确引导
动画是可以清晰阐述产品功能间的切换过程的。当用户进入一个不同的交互模式时，比如两个应用程序之间的切换，动画可以提供一个指引，告诉用户已进入另一个场景。
当我们最大化窗口的时候，这个窗口不是简单的直接放大，而是平滑地向四周展开。这样我们就可以清晰地知道这个窗口被放大了。

动画时长巧妙掌控
在设计动画时，注意动画执行的时间，并且在一些较高频率操作的功能中的动画，是要可以通过操作（点击两次此操作，或是其他操作，点击空白处或是目标区域等等）跳过的。

执行效率需多考虑
目前交互动画在高端机方面应用越来越多，但是各个机型的配置不尽相同，在考虑动画时，需注意各个机型的执行效率，如果覆盖面较广的产品，需要设定一个合理的可支持最低配置以及搭建测试环境，以便确保动画在执行时不会给机器带来过大的压力。

尊重现实规律，或让用户具有“超能力”
就是要符合逻辑规律与自然规律。比如动画中如有位移，应与指向目标位置方向移动；拟物化的设计，就需要真实的动画去模拟还原真实的过程。有时也可以在真实的场景中，让用户完成真实场景中人类不能完成的事情同样也会跟用户满足感。

点到为止，过犹不及
动画的使用犹如双刃剑，顺其势可披荆斩棘，塑造更完美的产品，如使用不当或是滥用，则往往适得其反。

使用频率较高的功能，慎用交互动画
如果是用户使用率非常高的功能，交互动画时一定要慎重。动画执行次数过多也会让用户反感，并延长操作时间。

用户输入，请勿打扰
用户在专注于内容的创建或是填写信息时，动画会分散用户的注意力，甚至让用户产生坏心情。但是信息提交，信息发送等操作，设计巧妙的动画，往往会增加用户的成就感。

尊重用户习惯，“标新立异”不可取
我们要避免触及系统的标准行为，尽量尊重用户习惯。在iPhone中，动画式响应方式是标准的界面风格，比如窗口内容的上下卷滚、元素的出现和消失，以及内容的放大、缩小等等。

用户清楚这些常见的界面元素是如何工作的，他们不愿在每次点击按钮的时候，被迫花费多余的时间去看一些不必要的动画。