1.1 为什么要为APP设计动效

动效是科技产品“情感化设计”的纽带，在设计清晰的逻辑和漂亮的界面以后，需要使用动效将这些漂亮的设计衔接起来，界面、交互、动效构成了情感化设计的三大载体。

为什么要为APP产品进行动效设计？首先必须清楚这个问题，才不会让我们在设计动效时迷失在炫技的动效中，合理地使用动效可以达到以下效果。

动效降低了用户的认知负荷，从而让体验更加愉快。

将物理世界的运动用在动效中，缩短了用户和界面之间的鸿沟，让用户更专注于任务而不是理解界面。

动效有利于沟通不同的环节和内容，使衔接更容易。

动效建立更为有效的信息和交互流程，使交互性变得更强。

动效可以让界面易理解、有魅力。

一个功能完备的动效不仅要足够微妙有趣，而且应当具有清晰且合乎逻辑的目的。但是过多的动效可能造成卡顿，从而拖累应用运行速度，而毫无动效的APP，又未免让用户感觉有些生硬，不够生动。成功的动效应具有以下特征。

（1）自然是UI动效的核心

在现实生活中，事物不会突然出现或突然消失，通常它们都会有一个转变的过程。动效的变化规则源于现实世界，动效中的每一个动作都应当从现实世界中获取灵感，好的动效设计应当尽量避免突兀的转变，状态生硬的改变会使用户有时候很难立刻理解。现实世界中物体的加速和减速都会受到重量、惯性和摩擦力的影响，类似的，在动效设计中，瞬间的启动和停止是不合规律的。例如用户在列表中选取一个条目查看详细细节，小卡片展开为大卡片的动效变化规则就源自于现实世界。

（2）高效的UI动效是层次分明的

一个层次分明的动效通常能够清晰地展示状态的变化，抓住用户的注意力。这一点和人类的意识有关系，用户对焦点的关注和持续性都与此相关。良好的过渡动效有助于在正确的时间点，将用户的注意力吸引到关键的内容上，而这取决于动效是否能够在正确的时间强调对的内容。

（3）关联是动效的重要功能

动效的关联包含两个方面；（1）能将界面和触发它们的操作或者控件关联到一起，产生关联的逻辑关系，帮助用户理解界面中的变化是如何产生的；（2）过渡关联牵涉到变化前后元素之间的关联，良好的过渡动效连接着新出现的界面元素和之前交互与触发元素，这种关联逻辑让用户清楚变化的过程，以及界面中所发生的前后变化。

（4）清晰是UI动效的关键

不只是动效，清晰几乎是所有好设计的共通点。动效是功能性优先、视觉传达为核心的视觉元素，动效设计应当清晰直观，明确而一致。屏幕上的每一个变化，都会成为影响用户体验和用户决策的因素。当一个动效中容纳太多过程的时候，难免会让人看不清、感到迷惑，甚至在操作过程中失去方向感，少即是多是保持动效清晰明了的核心规则，当动效中同时包含形状、大小和位移变化时，请务必保持路径的清晰以及变化的直观性。

（5）意图是UI动效的目的

在界面中，动效作为动态元素先天具有更加突出的属性，能够引导用户理解变化的趋势，并且不会觉得变化是突然的，在合适的时机引导用户注意力到合适的关注点上，让用户了解两者的因果关系。

（6）快速响应使UI动效高效

视觉反馈在界面中的作用无疑是重要的，对于用户而言，想要确认信息的欲望是一种生物本能。UI应当精准而快速地针对用户的交互产生响应，只有这样用户才能将他们的操作、交互和控件的变化、效果联系到一起，形成回路。当用户清楚地知道什么样的操作会带来什么样的反馈，会觉得非常愉快。快速的动效能给用户一种爽利高效的感觉。为了兼顾动效的效率、理解的便捷以及用户体验，动效应该在用户触发之后的0.1s内开始，在300ms内结束，这样不会浪费用户的时间，还恰到好处。

总之，设计从来都不是天马行空、随心所欲的，每一个动作背后都有其意图所在。无论什么样的APP，这些动效原则都能让产品更加优秀。专注于最重要的事情，才不会让设计迷失，也不会让用户迷路。小心设计，关注每一个细节，才是成功的人机交互秘诀。