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

小提示：您能找到这篇{用户体验中巧妙的过场动画}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的用户体验中巧妙的过场动画内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

这个网页为其移动显示设置了一个菜单按钮，能够带你去到页面顶部，但没有任何动画。这让我花费更多时间去弄清楚实际发生了什么。

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

状态的切换

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

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

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

折叠表单及评论

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

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

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

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

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

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

下拉刷新

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

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

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

标签贴靠

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

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

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

可供性动画

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

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

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

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

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

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

情境隐藏

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

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

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

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

焦点转换

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

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

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

结语

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

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

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

你觉得哪种动画在你的项目中是最实用的呢？

(Adrian Zumbrunnen著 Judithzhu & Lynnwang译 原文来自：腾讯MXD)