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

用户体验中巧妙的过场动画 一些网页优于其他网页 ，不仅仅是因为它们的内容、 用程度、设计或是特色等等。现代网页间根 本的区别在于它们交互及动画细节。我们将分享一些从各种模型中获得的经验 ，同时分析为何这些 简单的样式能够如此好用。 当我们设计数码产品时 ，我们常常使用诸如Phot osho p及Sket ch这样的设计软件。大多数从事此行 业多年的人显然知道设计不仅仅是视觉呈现。然而 ，很多人依然继续创造静止的设计。St eve Jo bs 曾说了这样关于设计的话 ：“设计不仅是外形和感觉 ，设计关乎如何运作。 ” 我们对一个产品的体验印象是由一系列因素综合作用的结果 ，其中交互发挥了基础性的作用。我们 再也不能认为用户界面只是是静态的设计 ，交互效果是之后才施加的。相反 ，我们应当从一开始就 信奉网页的交互特性 ，将其作为网页的自然组成部分来考虑。 让我们来看看一些灵活交互形式的例子 ，以巧妙的动画 ，优雅的提升用户体验。 滚动条动画 人们对于网页超链接总是褒贬不一。当你点击一个链接时 ，它有 能带你到任何地方 ，比如从一个 产品页面到一个令人毛骨悚然的街边古老木偶商店网站 ，结果欠缺上下关联性。 书籍用户体验的一大好处在于它的线性关系。书中的每一章都是为最后做铺垫的。读一本经济学入 门书籍时 ，你必须阅读第一章以帮助理解第二章的内容。当 跳过一个章节 ，你会发现自己 能错过 了一些东西 ，因而使自己对之后的内容缺少一定理解。在网页上 ，特别是那些较长的网页 ，这种情 况不经意间就发生了。增加 一个滚动动画效果能够弥补这种情况 ： 对比下面的例子 ： 对比上面“名称”锚点链接的预设行为和下面的动画行为。跳过内容不再是一种无意识的行为。它是 一种确定操作。事实上 ，Ho pe Lies at 24 Frames Per Seco nd这个网页为其移动显示设置了一个菜 单按钮 ，能够带你去到页面顶部 ，但没有任何动画。这让我花费更多时间去弄清楚实际发生了什么 。 小贴士 ：界面中突兀的变化会让用户难以处理。不要让他们迷失 ，要时刻让用户知道发生了什么。 状态的切换 如我们上面看到的 ，过渡能够帮助用户了解界面的操作步骤和整套流程。没有什么比突然变化更显 不自然的了 ，因为 种突然的变化在真实世界中是不存在的 。让我们看看另一个例子 ：切换菜单。 用户将“+”与增加内容或是展开一个元素的动作联系起来。将“+”翻转4 5° ，“+”变成了被公认为“关闭” 的界面元素——“ ”。 这种简单的过渡完全改变了图标的意义。这样一个小小的细节意味着两种不同的体验感受 ，一种是 用户必须猜测下一步将会发生什么 ，另一种是用户明确了解 ico n两种状态下表示的意思。如果你问 我倾向于哪种 ，我会觉得状态切换那个体验要好得多。同时值得注意的是 ，加号反转方向总是与内 容呈现动作保持一致 ， 强化了信息的连贯性。 小贴士 ：让你的网页元素在每一状态下都能易懂。 折叠表单及评论 很多博客和新闻网站上的评论表单看上去都不是令人愉悦的元素。为什么呢 ？因为它们绝大多数都 不够友好 ，不是吗 ？当你准备发表一条评论 ，你只是单纯希望输入评论而已。相反的 ，一种典型的 表单会问你各种其他无关的东西 ，非常烦人。 为了促使用户发表更多评论 ，我们 以折叠表单 ，仅仅展现最为关键的元素 ：评论框 。当用户点击 输入框 ，你 以相应的展开表单。我们 以在纽约时报测试版网站上找到这种进阶展开的实际例子 。 你 以更进一步 ，在展开表单时光标聚焦评论框。然而这一方法有一个问题 ：一个关键的交互设计 原则是这样说的 ，行为应发生在离交互产生最近的地方 （焦点附近 ）。因此我们还 以再进一步 ， 为评论框增加动画来引导用户注意到评论框上 ： 你甚至 以将评论框固定至顶部 ，根据用户的操作展开 ，展现它下面更多的内容。 正如你看到的 ，这减少了杂乱同时令评论表单更具吸引力。那么如果将所有以往评论也折叠起来呢 ？ 将评论折叠 ，并用滚动条表示正文的长度 ，而不是整个页面的长度。一个常见的做法就是当用户到 达页面底部的时候自动加载评论。我们应该避免强制用户点击 ，除非有更好的理由这样做。 小贴士 ：逐步显示来减少视觉模块 ，只保留其本身的精华部分。在用户需要的时候展现。 下拉刷新 最为令人兴奋的交互之一便是在iPho ne发布后短时间出现的由Lo ren Bricht er开创“下拉刷新”。它允 许用户更新滚动显示的最新内容。你 以在tw it t er的app上看到这个设想的效果。一旦你滚动到 tw it t er的顶部 ，再滚动一小段便 以刷新真个信