巧妙的过渡动画.pdfVIP

巧妙的过渡动画 小编导读 ：有的网站就是比其他网站做得好 ，无论在内容 ，可用 ，设计 ，特 等等。交互 设计(IxD)和动画的细节造就了它们之间最基本的区别。我们将分享一些案例经验 ，分析为什 么这些简单的模型会如此受用。 当我们设计电子产品时 ，我们会使用像Phot osho p、Sket ch这样的设计软件。那些经过多年工作的 人一定知道设计不仅是视觉展示 ，设计还有更多的事要做。St eve Jo bs是这样说设计 ： It ’s not just w hat it loo ks like and f eels like. Design is how it wo ks. 我们的体验和对产品的印象是被各种因素所影响 ，而交互在其中扮演最基础的角色。我们不再抱有 这样的想法—— UI就是静态的设计 ，然后再添加一些神奇的交互。我们从一开始就应该把握交互才 是互联网的本质 ，并把它看做核心成分。 接下来我们会看到一些例子 ，其中的交互是由微妙的动画构建起来 ，逐步提升用户体验。 动画式滚动 超链接骂得多 ，也用得多。当你点击一个链接的时候 ，你有可能被带到任意的地方 ，从商品页到街 边一个破旧的木偶商店的网站。这样的结果就不连贯。 书的用户体验最伟大的地方在于它是线 的。书的每个章节都是连贯的 ，你首先得把第一章读完 ， 才能理解第二章的内容。如果你跳过一个章节 ，你很快会意识到你错过些什么 ，因为有些知识写在 那个章节里面。在网络上 ，特别是长的网页 ，这样的事经常下意识发生。通过增添一些滚动动画 ， 我们可以解决它 ： 然后对比这个 ： 对比“name”锚点链接的默认行为和动画行为。跳转内容不再是无意识的动作 ；它是用户的决定。事 实上 ，希望就在每秒中的24 帧中的移动版有一个菜单按钮 ，它不需要任何动画就让你返回页面顶端 。这让我迷惑了好一阵子。 Takeaway:界面中的突然改变很难让用户去理解。时刻展示给用户究竟发生什么。 状态式开关 在上个案例中我们可以看到 ，动画能帮助用户理解界面上的一举一动。没有什么比突然改变跟不 自然 ，因为现实世界里面就不存在突然改变。我们再看一个例子 ：切换菜单。用户把“+”与添加内容 、添加元素关联起来。旋转4 5° ，“+”就变成“×” ，一个被广泛理解成“关闭”的元素。 这个动画就完全改变的ico n的意义。这样一个小细节代表猜测将要发生什么 ，以及知道ico n在不同 状态下的意义的区别。这样的切换是很用户友好的。同时 ，“+”旋转的方向跟内容时一样的 ，加强了 信息的流动 。 Takeaway:让你网站上的元素的每一个状态都是可以被理解的。 折叠式表单和评论 很多博客、新闻网站的评论表单都不是让人喜爱的元素。为什么 ？他们大部分都不友好 ？当你想要 发表一条评论 ，你想要做的事是写评论 ，而不是其他东西。但是 ，典型的表单会要求你先填其他 信息。这很讨厌。 要鼓励人们更多地去评论 ，我们折叠表单 ，只留下最核心的元素 ：评论框。但用户点击该区域 ，表 单就会自动展开。这一真实的案例可以在New Yo k T imes的bet a版网站找到。 你可以进一步提升它 ，当它扩展的时候 ，把指针焦点锁定在评论框。这个方法有一个问题 ，交互设 计的原则是一个动作的发生应该靠近交互出现的地方(靠近关注的位置)。我们再走得远一点 ，用评 论框的动画来引导用户 ： 或者你可以把评论框放在上面 ，让它按需扩展 ，其他的框放在它下面。 你可以看到 ，这减少混淆 ，让评论表单变得更诱人。但是如果折叠前面所有的评论 ？ 通过折叠评论 ，我们可以得到与文章长度相符的滚动条 ，而不是整个页面。一个通常的做法是 ，当 用户到达页面底部时 ，自动加载评论。如果没有一个好理由的话 ，我们应该避免让用户去点击。 Takeaway:逐步展示的方法是为了减少UI部件以保留其中的精华。只有在用户需要的时候才把它们 放出来。 下拉刷新 在iPho ne出现过了不久 ，一个最激动的交互方式出现了“下拉刷新” ，由Lo en B icht e 倡导的。它让 用户更新已时间倒序排列的内容。你可以在Tw it t e 的应用中看下这个概念的应用。当你拉到最顶端 的tweet 时 ，再下啦一点就可以刷新信息流。 它为什么如此有效 ？再下拉刷新出现之前 ，用户点击刷新按钮来加载更多的内容。联系用户发掘更 多内容的欲望来做刷新动作 ，这个动作就变得自然而然。 Takeaway:联系动作背后的意图 ，才能做出无缝的体验。 粘性标签 粘 标签是另一个微