［译］过渡界面（Transitional Interfaces）

原作者： Pasquale D'Silva

文章来源：Medium

翻译：Joyce Cheng

译文仅供个人学习，不用于任何形式商业目的，转载请注明原作者、文章来源、翻译作者及链接，版权归原文作者所有。

题图

设计师热爱累死累活地抠细节。大部分时间都用来纠结按钮、表单样式、设置类型的像素了，以及把那些图标弄得跟图钉一样锋利。A＋，干得好，千万别停啊伙计们。

......但是关于它们如何在静态组合之外整合在一起，需要一些小小的思考。你轻触一个按钮然后表格就….出现了？你滑动删除一个项目然后它就消失了？这样会超级诡异而且不自然。真实世界中几乎没有东西做事情的方式像是仅仅切换状态这么令人不爽。这感觉像是个故障。

噢，好吧亲爱的。你做了一些笔记——它会“滑进”。

怎么滑？很快吗？它会反弹吗？缓冲吗？静态设计无法提供状态之间的上下文。

当人们谈到动画和有意思的交互的时候，他们不停地用到“愉快”这个词。这些家伙真酷真棒啊。但是猜猜还有什么？动画也可以有功能性的用途诶。它可不仅仅是一个装饰性的细节。

动画利用的是一个被忽视的维度——时间！一种将空间缝合在一起的隐形织物。你不必非得成为一个数学呆子才能理解这一点。

让我们来看一些简单的想法：

移入/缓冲

在传统的动画中，一个分解（breakdown）用于确定某物如何从A点移动到B点。它为移动增加偏差，以及确定余下的帧如何就位。以下面这个25帧的动画为例，其中第13帧（中间点）位置不同：

线性

移入

移出

看看！你刚刚学到了缓冲/移入。计算机挺混账的，很喜欢线性地填空，因为它们就是一袋袋懒惰的电线啊。伟大的动画师/运动设计师把大多数的时间花在跟计算机对抗上以确保它们不把事情搞砸。

动画全在于时机。你可以利用各种不同的间距得到不同的结果。但是关于这一点到此为止。这不是一个动画教程，主要是让你思考一些时机和间距的运用。

关于界面中的动画的一些想法

就像我前面说的，动画可以帮助提供上下文。它帮助大脑理解信息是如何流动的。

在列表中插入一个条目

比方说，你有一个关于事情的实时列表，你希望它根据实时数据进行填充。如果你把它留给计算机的话，它看起来会是这个样子：

哎呀，这太粗糙了….

修改它只需要几帧动画。关于列表究竟发生了什么，给你的大脑一个线索如何？

要添加新的条目，列表需要为新增项腾出空间，然后新增项（来自某处）把空白填满。没那么不爽了。状态的移入&移出软化了变化。感觉更自然了，因为我们有空间的上下文连接——镜像般地反映了我们在真实生活中往一堆东西里添加物品的情况。

还有更多：

点看列表条目

下面是典型的滑入一个条目的默认模式。该模式经常被使用，但是在空间上意义不大：

滑动的方向在各种视图的线性链之外无法真正给你任何有用的线索。

假如把条目当成一个容器呢？你戳它的话，可以得到更多的细节，在行内显示。

如果目标是点看列表条目内容并且将全部的关注集中于它，那么我们甚至可以在同一视图中让其它的一切都隐藏起来：

标记>进入>一个>视图的>所有路径的>面包屑是很容易让人迷路的。

保持在行内显示的一个好处是，你可以避免解释用户究竟在一个子视图里面嵌得有多深。分层导航的显示可以废除了，因为用户看见了他们是如何到那里的。

当然了，以上想法并不适用于每一种情况——但这种观点可以带来连接信息流的更优雅的解决方案。

实例——Thinglist

Thinglist是我与凯尔·布拉格尔一起制作的一款Elepath的产品，它里面交织了一些非常有趣的过渡界面工作。上面的例子展示了我们是如何实现新的过滤功能的。

你应该看看的过渡界面的例子：

你懂的，其实我举不出很多例子….一方面，有许多美丽的，但是非常静态的界面。另一方面——有些界面被花里胡哨的动画过度装饰了。

现在我能举出来的有三个。

Clear：手势驱动的非常紧凑的动画。

Willcall：具有连贯的动态的节奏。状态间没有生硬的跳跃。可爱型的活泼有趣。

Facebook.app：不是非常连贯，但是在吸引注意力方面有很不错的解决方案。具体来说….点击进入灯箱视图以查看全屏照片，进入列表视图查看评论内容。

许多人在思考界面时不考虑时间维度这一点让我很诧异。动作可以提供这么多信息诶！难道是画原型的工具对大多数设计师来说太复杂了？

起初我的这篇文章是写给Elepath员工的一份内部文档，用以开始解释我对动作的热爱。毕竟我是个动画师嘛。

后来我们觉得分享这篇文章来发起讨论也挺好的。我很想听听其他认真考虑界面如何&为什么移动的做界面的人的想法。

更新：我把这篇文章扩展成了一个50分钟的演讲，你可以在这里观看->

*对于你纵身跃入兔子洞并沉迷于动画，我可不负任何责任。