巧妙的过渡动画

　　小编导读：有的网站就是比其他网站做得好，无论在内容，可用性，设计，特性等等。交互设计（IxD）和动画的细节造就了它们之间最基本的区别。我们将分享一些案例经验，分析为什么这些简单的模型会如此受用。
　　当我们设计电子产品时，我们会使用像Photoshop、Sketch这样的设计软件。那些经过多年工作的人一定知道设计不仅是视觉展示，设计还有更多的事要做。SteveJobs是这样说设计：
　　It’snotjustwhatitlookslikeandfeelslike。Designishowitworks。
　　我们的体验和对产品的印象是被各种因素所影响，而交互在其中扮演最基础的角色。我们不再抱有这样的想法UI就是静态的设计，然后再添加一些神奇的交互。我们从一开始就应该把握交互才是互联网的本质，并把它看做核心成分。
　　接下来我们会看到一些例子，其中的交互是由微妙的动画构建起来，逐步提升用户体验。
　　动画式滚动
　　超链接骂得多，也用得多。当你点击一个链接的时候，你有可能被带到任意的地方，从商品页到街边一个破旧的木偶商店的网站。这样的结果就不连贯。
　　书的用户体验最伟大的地方在于它是线性的。书的每个章节都是连贯的，你首先得把第一章读完，才能理解第二章的内容。如果你跳过一个章节，你很快会意识到你错过些什么，因为有些知识写在那个章节里面。在网络上，特别是长的网页，这样的事经常下意识发生。通过增添一些滚动动画，我们可以解决它：
　　然后对比这个：
　　对比name锚点链接的默认行为和动画行为。跳转内容不再是无意识的动作；它是用户的决定。事实上，希望就在每秒中的24帧中的移动版有一个菜单按钮，它不需要任何动画就让你返回页面顶端。这让我迷惑了好一阵子。
　　Takeaway：界面中的突然改变很难让用户去理解。时刻展示给用户究竟发生什么。
　　状态式开关
　　在上个案例中我们可以看到，动画能帮助用户理解界面上的一举一动。没有什么比突然改变跟不自然，因为现实世界里面就不存在突然改变。我们再看一个例子：切换菜单。用户把与添加内容、添加元素关联起来。旋转45，就变成，一个被广泛理解成关闭的元素。
　　这个动画就完全改变的icon的意义。这样一个小细节代表猜测将要发生什么，以及知道icon在不同状态下的意义的区别。这样的切换是很用户友好的。同时，旋转的方向跟内容时一样的，加强了信息的流动性。
　　Takeaway：让你网站上的元素的每一个状态都是可以被理解的。
　　折叠式表单和评论
　　很多博客、新闻网站的评论表单都不是让人喜爱的元素。为什么？他们大部分都不友好？当你想要发表一条评论，你想要做的事是写评论，而不是其他东西。但是，典型的表单会要求你先填其他信息。这很讨厌。
　　要鼓励人们更多地去评论，我们折叠表单，只留下最核心的元素：评论框。但用户点击该区域，表单就会自动展开。这一真实的案例可以在NewYorkTimes的beta版网站找到。
　　你可以进一步提升它，当它扩展的时候，把指针焦点锁定在评论框。这个方法有一个问题，交互设计的原则是一个动作的发生应该靠近交互出现的地方（靠近关注的位置）。我们再走得远一点，用评论框的动画来引导用户：
　　或者你可以把评论框放在上面，让它按需扩展，其他的框放在它下面。
　　你可以看到，这减少混淆，让评论表单变得更诱人。但是如果折叠前面所有的评论？
　　通过折叠评论，我们可以得到与文章长度相符的滚动条，而不是整个页面。一个通常的做法是，当用户到达页面底部时，自动加载评论。如果没有一个好理由的话，我们应该避免让用户去点击。
　　Takeaway：逐步展示的方法是为了减少UI部件以保留其中的精华。只有在用户需要的时候才把它们放出来。
　　下拉刷新
　　在iPhone出现过了不久，一个最激动的交互方式出现了下拉刷新，由LorenBrichter倡导的。它让用户更新已时间倒序排列的内容。你可以在Twitter的应用中看下这个概念的应用。当你拉到最顶端的tweet时，再下啦一点就可以刷新信息流。
　　它为什么如此有效？再下拉刷新出现之前，用户点击刷新按钮来加载更多的内容。联系用户发掘更多内容的欲望来做刷新动作，这个动作就变得自然而然。
　　Takeaway：联系动作背后的意图，才能做出无缝的体验。
　　粘性标签
　　粘性标签是另一个微妙而又有用的，对UI元素和有意义的动画的结合品。Edenspiekermann在他作品中运用这一技术。
　　这个项目标签会随着内容滚动，给右边的图片提供语境，直到下一个项目的出现。这个行为就像iOS上的联系人，这在需要提供语境的长文章中很有用。这一动画加强导航和平滑内容描述的作用。
　　Takeaway：在长文章中使用粘性标签，可以描述或为内容增添有用信息。
　　功能可见的动画
　　功能可见的概念源于认知心理学，指的是特定物体的特征来引导观众。
　　这UI设计中，EU网站上的可用性术语（PDF）是这样定义：
　　功能可见是UI的一个理想属性软件应自然引导人去到正确的步骤以完成他们的目标。
　　脊线（ridge）经常用于加强功能可见的效果。按钮周围的脊线代表着这个按钮是可以被操作的。iOS上的相机应用把这一技术推广出去。
　　iOS6的锁屏中，相机icon周围的线都暗示它是可拖动的。Apple在iOS7中去掉它们，显然由于用户已经习惯了它，现在的icon更像是单独的按钮。其实操作还是一样，拖动按钮，推开锁屏界面，露出下面的相机。这是在界面中为用户找出产品特点的好技术。
　　Takeaway：添加功能可见的元素，帮助用户在界面中找出产品特点。
　　基于语境（context）的隐藏
　　iOS上的GoogleChrome在发布之初就有基于语境的隐藏功能。它大概长这样：
　　基本思路就是一旦往下拖动，控制栏等元素都自动隐藏。当用户往上拖动时，它们会重新出现。这方法提高语境体验（专注控制栏）和增大可视区域。后者对移动设备尤为重要。
　　基本假设是用户使用时会去滑动内容。当滑动停止时，可能就对语境有需要；因此控制栏就重新出现。虽然这个方案节省屏幕位置，但请检验这个假设在你的项目中是否成立。
　　iOS走得更远，当你到达页面底部时，控制栏会自动展开。它是动态合并用户需求的好例子。
　　Takeaway：利用基于语境的隐藏，来提高专注度和节省空间。
　　焦点动画
　　一周前，NikitaVasilyev（多伦多的UI设计师）提出一个主意。他开发了一个脚本，是焦点转移的动画。现在还是试验阶段，不过这个概念很有意思。先看下他的视频。（记得带耳机音乐很）
　　但用键盘来导航时，用户不太清楚点击tab键时，焦点移动什么位置。动画就能指出他的正确位置。动画很微妙，但对导航很有用。
　　Takeaway：为用户导航，不管用什么形式。
　　结论