如何设计界面中的动态运动？
导读：
Nathan de Vries 是苹果人机界面团队原型设计师，在 2018 年苹果开发者大会上 Nathan 进行了「Designing with dynamic motion」的主题演讲，从无缝衔接的动效、塑造性格、理解意图三个方面对如何设计动态运动进行了详细介绍，并提出了投射动量（Projection Momentum）的概念来准确判断用户的意图。
我们的思维与身体时刻处于变化中，周围的世界在不断变化，因此我们的界面也被预期以同样的方式进行表现：它们容易触知，对预期高度还原。我们在界面中用于表现运动的一种方式是定时动画，当按钮被点击时，显示设计师精心设计的完美动画，动画一旦结束，使用者又可以继续进行交互操作，你可以大致认为交互动效是随着时间进行线性运动的对话模式。而在流畅自然的界面中，界面使用者的动态本质让设计师的角色从控制动效时间转变为设计响应交互行为的动效。
无缝衔接的动效
如果我们观察一辆汽车匀速前进、刹车减速至停止的时间/位置曲线，在起始位置曲线斜直表明汽车正匀速运动，接下来曲线开始平滑弯曲，此时正是踩下刹车的时刻，曲线的最后变得平直，表明汽车已经停止运动。位置曲线从本质上呈现了无缝衔接的动效，曲线连续没有方向上的突变，你无法明确辨认汽车在哪个时刻恰好停止。
我们认为对物理世界特性的理解有助于更好地响应行为。我们之所以觉得汽车这个案例如此简单，是因为我们对汽车如何运动有着共同的理解和直觉，这让其成为了一个很好的参考点。我们无需对汽车运动进行完美的物理仿真，但可以利用汽车或物体的运动规律，让动态行为的运动感觉更加熟悉、关联甚至可信，这才是最重要的事情。iPhone 的滚动从一开始就参考物理世界的动态行为，小孩子拿起 iPhone 并滚动主屏幕到那个他们最喜欢的应用，就像把玩具车推过地板那么简单。
那么滚动这个动态行为的主要特性是什么？
熟悉、自然的运动
首先是利用大家对物体如何在真实世界运动的认识，以及我们如何影响物体的共识直觉。
保持放手时的动量
内容的运动是完美的衔接，所以当我拖动内容的时候，我的身体提供了运动的流动性，因为我的身体是不断变化的。当我放手的时候，内容会逐渐减速滑动直至停止，所以在某种程度上我们维持了界面的运动。
摩擦力缓慢减速
在滚动时受到的阻力大小不变，这使其可预期并易于掌控。
不知不觉地停止
最后内容在不知不觉中停止，就像我们无法确切知晓汽车何时停止一样。缺少明确的结尾加强了内容始终在运动，且总是可以运动的想法，所以当内容滚动的时候会让你感觉你可以用手指持续滚动无需等待结束的那一刻。
塑造性格
物理世界有数不清的特性可以产生完美的行为，但是有一个在我们的设计工作中不可或缺。图上这朵美丽鲜花的天然纤维拥有称作弹性的有机特性。弹性是材料在移除压力或拉力后，优雅地恢复静止状态的内在倾向。难以置信的是我们的身体也是弹性的，我们可以伸展很长的距离不是因为我们肌肉的力量，而是因为它们可以放松的能力。完成这一切的正是弹性，所以我们的肌肉在受力的时候收缩，外力移除的时候放松，这就是我们维持能量守恒的方式，并让我们感到自然和有机。
弹性同样也应用在 iPhone X 中，点击主屏幕上的图标，弹性行为会将应用拉向你，展现在你期望的位置，当你从底部向上轻扫时，应用又被放置回屏幕上的对应位置。我们也将弹性应用在滚动中，如果滚动太远的距离就像拉开橡皮筋，当你松手后内容就会被弹性拉回到边界内，让你了解到返回静止位置是为下次的滚动做好准备。
所以让我们进一步探究弹性是如何在幕后工作的。你可以把滚动内容想象成一个拴在弹簧上的小球，弹簧的一端是当前值，也就是图上展示的位置；在弹簧的另一端是因为弹性的作用内容要达到的地方，弹簧正将当前值拉向目标，弹簧的行为将影响内容的位置。有趣的是无缝衔接已内化为弹簧行为的一部分，这就是它们成为流畅界面设计通用工具的原因。
但是如果我们想控制运动的速度以及运动是否过头该怎么做？
我们可以让小球变大或变重赋予其更多的质量，如果改变小球的惯性或者想运动/不想停止的意愿，那就会以运动过头而告终。
另一个可以改变的属性是弹簧的刚度或拉伸强度，它将影响施加到小球上力的强度，改变其向目标运动的速度。
最后就像刹车一样，我们可以改变阻尼或者与小球接触表面的摩擦力，这就像让小球刹车一样慢慢停止，也会影响运动过头的能力。
但在日常的设计工作中，我们发现在控制屏幕上物体行为的时候会有些不可控或难以操作，所以我们认为设计工具应该具有人性化的界面，它们需要反映工具使用者的需求，所以我们对这些特性进行了简化让其易于使用。
质量、拉伸强度和阻尼仍然在幕后保留，它们是弹簧系统的基础特性。但是我们将界面简化为两个简单特性，第一个是阻尼，这用来控制运动过头的大小，当阻尼从 100% 变为 0 时，运动将从不会运动过头变为弹簧无限振荡。第二个特性是响应，这用来控制小球到达目标的时间快慢。
这两个特性对应的术语是阻尼系数和频率响应，你如果想把它们应用在设计中，可以查阅相关资料并寻找将其转换的简单方法。现在我们可以通过这两个简单的特性来控制弹性行为，但是对于弹性曲线仍有无限种可能，我们通过设置这两个特性就可以得到完全不同的行为。
那我们应该如何运用这些特性来塑造我们应用的性格呢？
从简单而非弹性开始
首先我们需要记住设备是工具，应该要对它们保持关注，当你有目的的使用时不要引入不必要的动效。我们认为你应该从简单开始，弹簧无需过度运动，你也无需使用富有弹性的弹簧。当你调试弹性行为时，我们建议从 100% 的阻尼开始，不要过度运动，你将得到顺滑、优雅以及无缝衔接的动效，不会分散手头任务的注意力，就像快速发送邮件的效果。
用过度运动响应动量
什么时候适合使用弹跳呢？我们认为如果驱动动效的手势本身具有动量的话，那么你应该稍微过度运动一下来回应这个动量。换言之，如果手势有动量，但没有过度运动，那跟随这个手势的动效就会感觉分裂或不尽如人意。比如，我们将其应用到了「音乐」这个应用中，「音乐」应用在底部有一个展示播放音乐的迷你栏，你可以点击这个小条来显示正在播放的音乐。因为点击没有展示方向上的动量，所以我们使用了 100% 的阻尼确保不会运动过度。但如果你轻扫收起当前的播放界面时，会有一个收起方向上的动量，所以我们使用了 80% 的阻尼来显示一些弹跳和收缩让整个手势操作更令人满意。
弹跳可以暗示
弹跳也可以作为一种提示屏幕下方还有更多内容的有用的功能手段。在 iPhone X 中，我们在解锁页面引入了两个按钮：闪光灯以及相机。为了防止意外的的打开闪光灯，我们需要更加有意图的手势来激活闪光灯。如果你不知道其他可以将其激活的有意图的手势，在你点击按钮时，它会通过一种有趣的弹跳进行回应，让你知道它不仅有效而且还在回应你的操作，告诉你如果按的时候再用点力它将激活功能，它会根据运动的方向进行暗示。
思考超越动效
我们通过许多不同的方式来感知运动，通过颜色的变化、材质及手感，甚至不同的声音，我们还能感知到其他感觉。在你调校应用性格的时候是一个超越动效的机会，通过结合运动、声音和触感的动态行为，你可以从根本上改变界面的感知方式。当你看到、听到以及感觉到手势结果时，这已将一个简单的滚动行为转化成可感知的触觉界面。
融入性格
关于塑造应用性格的最后一点是感觉紧密，融入其中。不管是在你的应用还在整个系统中，保持行为的一致性是非常重要的。以滚动举例，当我向下滚动页面，然后点击状态栏返回到了页面顶部，在两个行为中都运用了弹性，整个页面感觉以相同的方式进行运动，即使驱动运动的是两种不同的行为。这不应局限在滚动这个操作，而是应用到整个应用的交互中。如果你有一个有趣的应用，那你应该融入有趣这个性格，并让整个应用都感受如此，以便用户只要了解了你应用的一个行为，他们就可以简单地学会另一个行为，因为我们通过重复进行学习，而且学会的知识会发展为其他行为。
理解意图
对于像点击按钮这样独立的交互，手势的意图会非常明确。但是对于像轻扫这样的手势，意图不会特别明确，可以说意图基本上被编码进手势运动中了，所以我们的工作就是理解运动并决定该接下来该怎么做。
意图通过运动过来表达
当我进行一对一的视频聊天时，角落里会有一个小的视频窗口展示我们自己，这样我就可以看到对方看到的画面。我们将这种悬浮视频称为「画中画」，我们赋予「画中画」悬浮的样式，让其可以被清楚感知到可被移动，你只需要轻轻一划就可以将其移动到屏幕的任意角落。
在这个案例中，实际上有4个需要处理隐藏的区域，而非3个明显的展示在屏幕上可点击的视觉区域。我们不得不关注由手势引发的运动，并理解其中的含义，它想要去往哪个角落，我们将这些屏幕区域称为手势的端点。当「画中画」被丢出时，我们的目标就是找出意图的正确端点，我们称作将端点与手势意图相匹配。
一种方式是当我拖动「画中画」时追踪最近的端点。虽然现在我可以将「画中画」移动到屏幕的其它角落，但是只要我再移远一点就会出现问题。实际上我需要拖动「画中画」超过屏幕一半的距离，几乎要贴近另一端了，所以它并非放大了我的输入操作，不是真正有效。如果我轻划「画中画」，它会返回最近的角落但不一定是我期望的角落。所以现在的问题是我们仅考虑了位置，完全忽略了抛出时「画中画」的动量及其速度。
应该如何将动量与决定达到的端点相整合呢？我们可以暂时先将端点放在一边，退后一步并将问题简化。我们本质上要做的是在屏幕表面移动内容，实际上针对这件事，用户已经有大量的关于滚动行为的肌肉记忆了。我们为什么不使用呢？
我们一直在使用滚动行为，对于内容会移动多远已经形成了自然的直觉。当滚动时内容会滑行很远并慢慢减速，实际上通过利用这一点，我们是在巩固用户从别处的学到的知识，行为只会做系统期望的事情。
这种假想「画中画」新位置的做法称为「投射」（Projection），我们基于「画中画」的抛出速度，结合减速率，最终可以得出如果滚动它会去往的位置。现在我们可以在松手时计算好预计位置并自动移到那里，无需找出「画中画」的最近端点。所以当我从一个角落向另一个角落轻扫时，只需轻轻一划就会移动到我预期的端点。投射动量的概念十分有用，我们认为这非常重要并愿意分享它的代码，你可以运用到自己的应用中。这个功能需要像「画中画」的位置、速度与减速率这类的信息，然后给出动态行为的端点数值。
使用投射来寻找位置端点的概念十分有用，拖动或轻扫物体时，你需要考虑手势的动量。投射的应用并不局限于位置，你也可以将其用于缩放，甚至旋转或者两者的结合。它是如此的通用，你要确保在使用时考虑了手势的动量并让你应用中的动态运动感觉像是自我的延伸。
小结
对于动态运动，界面行为应该连续、无缝地响应交互操作。
我们应该依赖人们对物理世界的共有直觉，我们在孩提时代了解到物理世界中物体如何运动的知识都可以应用到动态界面设计中。
你应该记住弹跳是需要有目的的，考虑下为什么要使用它以及它是否合适，确保当你增加性格与特质时能够与功能相平衡。
最后记住投射动量，不仅是位置，而是使用你正在处理的所有信息，来确保移动与人们实际希望其到达的位置保持一致，并带它去那。
评论