用户体验中巧妙的过场动画

(Adrian Zumbrunnen著     Judithzhu & Lynnwang译)

一些网页优于其他网页，不仅仅是因为它们的内容、可用程度、设计或是特色等等。现代网页间根本的区别在于它们交互及动画细节。我们将分享一些从各种模型中获得的经验，同时分析为何这些简单的样式能够如此好用。

当我们设计数码产品时，我们常常使用诸如Photoshop及Sketch这样的设计软件。大多数从事此行业多年的人显然知道设计不仅仅是视觉呈现。然而，很多人依然继续创造静止的设计。Steve Jobs曾说了这样关于设计的话：“设计不仅是外形和感觉，设计关乎如何运作。”

我们对一个产品的体验印象是由一系列因素综合作用的结果，其中交互发挥了基础性的作用。我们再也不能认为用户界面只是是静态的设计，交互效果是之后才施加的。相反，我们应当从一开始就信奉网页的交互特性，将其作为网页的自然组成部分来考虑。

让我们来看看一些灵活交互形式的例子，以巧妙的动画，优雅的提升用户体验。

滚动条动画

人们对于网页超链接总是褒贬不一。当你点击一个链接时，它有可能带你到任何地方，比如从一个产品页面到一个令人毛骨悚然的街边古老木偶商店网站，结果欠缺上下关联性。

书籍用户体验的一大好处在于它的线性关系。书中的每一章都是为最后做铺垫的。读一本经济学入门书籍时，你必须阅读第一章以帮助理解第二章的内容。当跳过一个章节，你会发现自己可能错过了一些东西，因而使自己对之后的内容缺少一定理解。在网页上，特别是那些较长的网页，这种情况不经意间就发生了。增加一个滚动动画效果能够弥补这种情况：

对比下面的例子：

对比上面“名称”锚点链接的预设行为和下面的动画行为。跳过内容不再是一种无意识的行为。它是一种确定操作。事实上，Hope Lies at 24 Frames Per Second这个网页为其移动显示设置了一个菜单按钮，能够带你去到页面顶部，但没有任何动画。这让我花费更多时间去弄清楚实际发生了什么。

小贴士：界面中突兀的变化会让用户难以处理。不要让他们迷失，要时刻让用户知道发生了什么。

状态的切换

如我们上面看到的，过渡能够帮助用户了解界面的操作步骤和整套流程。没有什么比突然变化更显不自然的了，因为这种突然的变化在真实世界中是不存在的。让我们看看另一个例子：切换菜单。用户将“+”与增加内容或是展开一个元素的动作联系起来。将“+”翻转45°，“+”变成了被公认为“关闭”的界面元素——“x”。

这种简单的过渡完全改变了图标的意义。这样一个小小的细节意味着两种不同的体验感受，一种是用户必须猜测下一步将会发生什么，另一种是用户明确了解icon两种状态下表示的意思。如果你问我倾向于哪种，我会觉得状态切换那个体验要好得多。同时值得注意的是，加号反转方向总是与内容呈现动作保持一致，强化了信息的连贯性。

小贴士：让你的网页元素在每一状态下都能易懂。

折叠表单及评论

很多博客和新闻网站上的评论表单看上去都不是令人愉悦的元素。为什么呢？因为它们绝大多数都不够友好，不是吗？当你准备发表一条评论，你只是单纯希望输入评论而已。相反的，一种典型的表单会问你各种其他无关的东西，非常烦人。

为了促使用户发表更多评论，我们可以折叠表单，仅仅展现最为关键的元素：评论框。当用户点击输入框，你可以相应的展开表单。我们可以在纽约时报测试版网站上找到这种进阶展开的实际例子。

你可以更进一步，在展开表单时光标聚焦评论框。然而这一方法有一个问题：一个关键的交互设计原则是这样说的，行为应发生在离交互产生最近的地方（焦点附近）。因此我们还可以再进一步，为评论框增加动画来引导用户注意到评论框上：

你甚至可以将评论框固定至顶部，根据用户的操作展开，展现它下面更多的内容。

正如你看到的，这减少了杂乱同时令评论表单更具吸引力。那么如果将所有以往评论也折叠起来呢？

将评论折叠，并用滚动条表示正文的长度，而不是整个页面的长度。一个常见的做法就是当用户到达页面底部的时候自动加载评论。我们应该避免强制用户点击，除非有更好的理由这样做。

小贴士：逐步显示来减少视觉模块，只保留其本身的精华部分。在用户需要的时候展现。

下拉刷新

最为令人兴奋的交互之一便是在iPhone发布后短时间出现的由Loren Brichter开创“下拉刷新”。它允许用户更新滚动显示的最新内容。你可以在twitter的app上看到这个设想的效果。一旦你滚动到twitter的顶部，再滚动一小段便可以刷新真个信息流。

为什么它效果如此好呢？在下拉刷新出现前，用户需要点击浏览器的刷新按钮来加载更多内容。将用户发现更多内容的期望和刷新动作联系起来，这个明显的刷新动作就可以舍弃掉了。

小贴士：将意图与行为联系起来，体验将变得更加连续无缝。

标签贴靠

标签贴靠是另一种用户界面组件中精妙且有用的集合同时也是非常有意义的过渡动画。看下Edenspiekermann工作室的网站在自己的作品展示上怎样利用这项技术的。

项目的标签跟随内容滚动，从而为右侧的图片提供上下文指示，直到下一项出现。这个动画跟iOS的联系人界面很像，他们对于长列表界面的上下文指示特别有用。这个过渡动画不仅可以帮助快速定位而且流畅的展示了上下文关系。

小贴士：标签贴靠适用于那种内容无法很好的适配视窗，而描述或标题会给内容增加有价值信息的长列表中。

可供性动画