其他
动态设计，让交互更顺畅
而动态设计作为起源于影视动画行业的概念，如今不只在内容创作行业大放异彩，在人机交互领域也日益发挥出重要的作用。
本文从动态设计的角度，分析了影响动态感受的几个关键因素，希望通过对动画基本原理的描述和拆解，帮助大家理解自然顺畅的动态设计的必要条件，在之后的用户体验设计中助大家一臂之力。
本期提纲：
1. 动态设计在交互中的作用
• 解释页面之间的关系
• 凸显重要的信息• 让互动更加生动有温度2. 如何做出自然顺畅的动态设计
• 弹性
• 缓动• 预备动作• 补充细节
3. 总结
多任务的操作也有类似的功能，手指上推展示出当前页面和其他页面的位置关系，方便用户进行定位。
当我们需要表现元素间的层级关系以及位置信息时，可以通过动态设计对系统进行解释，让人理解动作的前后发生了什么，以此降低用户的理解成本。
相信大家都对苹果设备的密码框抖动印象深刻，当用户输错密码时，密码框会摇摇头，然后清空输入，全程不需要文字提示就达成了目标，既符合直觉，又让设备仿佛有了生命，使操作变得美而简单。
“道理我都懂，但做出来的动画总感觉很生硬”。
很多初上手的设计师都会遇到动画不流畅的问题，这通常是因为元素的运动并没有遵循自然界的运动规律。
当软件中的虚拟对象和动作是来自真实世界的映射时，人们会更快地理解。
小球弹起，烟花绽放，秋叶落下……大自然纷繁复杂，但表象之下其实都遵循着最基本的运动本质 —— 力，以及力的转化。
拿小球动画举例：
棒球投手在投球之前，胳膊会先往后扬，人在跳起前需要先往下蹲，这种发力之前先往反方向运动的行为，在动画中被称为 “预备动作”。
比如下面的小球，在撞击白色方块之前先往左回撤了一下：
预备动作不只可以让发力更真实，同时还能让人提前注意到主体的变化，起到引导视线的作用。
需要注意的是，只有当物体主动发力的时候才会使用预备动作，被动受力时则不需要。
依旧是小球跳动的例子，和之前不同的是，我们在它跳起前加上一个 “往下压” 的预备动作，就会有种它自己在奋力跳起的感觉：
这是因为我们的眼睛在转移视线的时候，通常会在中间进行一次无意识的眨眼，来帮助我们的视线重新定位。
加上眨眼之后：
容当我们觉得动态不自然，很有可能是忽略了重要的细节，日常保持多观察的习惯，必要的时候亲自实践。
如果我们以自然界中的运动作为参照，强调弹性、缓动、预备动作，以及落实必要的细节，便能帮我们做出视觉感受顺畅的动态设计。
➊《迪士尼动画原则》Ollie Johnston / Frank Thomas
➋ Material Design - Google
➌ 人机界面准则 - Apple Developer
作者：Barry
尽精微，致广大