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

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

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

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

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

滚动条动画

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

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

对比下面的例子：

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

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

状态的切换

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

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

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

折叠表单及评论

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

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

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

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

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

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

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

下拉刷新

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

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

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

标签贴靠

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

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

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

可供性动画

可供性这个概念来自于认知心理学，它指的是物体可以指示观察者操作的特殊属性。

从用户界面设计角度，EU的在线pdf《可用性词汇表》对“可供性”定义如下：

可供性是用户界面的理想属性——如此软件才能自然的引导人们进行正确的步骤来完成他们的操作目标。

视觉上的突起常被用来增强可供性。突起的按钮暗示按钮能被操作。这个用户体验的手法被广泛应用与iOS的拍照软件中。

iOS 6的锁屏界面上，照相机icon上下设计了几条棱线，暗示这里可以拖拽。因为用户习惯了这种快速打开照相机的方法，苹果公司在iOS 7里去掉了棱线的设计，将相机的icon做得更像是一个独立的按钮。它的相关操作还是一样的：拖拽按钮的时候，锁屏界面向上弹起，展示下面的照相机界面。这是一个向用户表明界面中产品特征的非常棒的方法。

小贴士：将元素的可供性设计得更强能引导用户界面中的操作。

情境隐藏

iOS上的chrome从最初版本就有这种情境隐藏的例子，它是这样处理的：

基本理念是当用户自然的向下滑动页面开始浏览时，chrome的导航工具栏会自动隐藏。当用户回滚页面时，导航工具栏会再次出现。这样做既使体验更加情景化（聚焦在内容本身）也增加了屏幕的显示区域。而后者在移动终端上显得尤其重要。

潜在的设想是用户会顺势滑动浏览他们专注的内容。一旦用户停止滑动页面，可能就需要变化用户的操作场景了；因此，导航工具栏再次出现。既然这种技术节省了屏幕空间，你可以试一下在你的操作场景里是否适用。

iOS在这方面更进一步。当你滑动到页面底部的时候，工具栏也会再次出现。这是一个非常好的动态结合用户在界面操作需求的例子。

小贴士：情境隐藏能强化用户的操作焦点，节省屏幕空间。

焦点转换

大概一周之前，一位多伦多的ui设计师Nikita Vasilyev，有了一个特别巧妙的想法。他开发了一套页面焦点跳转的脚本。尽管方案还在实验阶段，但是概念特别有意思。看下下面的视频。（记得带上你的耳机——音效也很华丽）。

查看视频

当用键盘切换焦点的时候，用户光点击Tab键无法知道焦点跳到那里了。这个小的动画告诉了人们焦点在位于页面中的何处。动画虽然很小但对于引导用户却有非常大的影响。

小贴士：引导用户，不管用户怎样操作。

结语

本文只列了少数几个案例，实际上还有许多许多。关键不是展现最新最炫的交互技术，而是强调一个小小的交互细节如何能够显著的提升用户体验。

如果我们是为了设计更好的数码产品，我们就需要不断挑战我们现在的信仰，以此来看交互模式怎样潜在的优化用户的生活。我不是说我们要彻底推翻现在，而是如果停止探索真的会变得无知。所以，离开我们的安乐窝，来不断的探索和实验。

如果你喜欢这篇文章，你可以在twitter上找到我，或者加入我们在瑞士的瑞士巧克力协会。

你觉得哪种动画在你的项目中是最实用的呢？（转载mxd）

谢谢楼主分享，学到东西了。

太棒了，感谢楼主分享

太棒了，感谢楼主分享