巧妙的过渡动画

作者: lyzhie | 来源:发表于2013-12-08 19:09 被阅读2968次

    先推荐两个我知道的研究这方面的网站 http://shengxi.sinaapp.com/orientation.html
    http://www.ui-transitions.com/
    然后开始译文了。

    有的网站就是比其他网站做得好,无论在内容,可用性,设计,特性等等。交互设计(IxD)和动画的细节造就了它们之间最基本的区别。我们将分享一些案例经验,分析为什么这些简单的模型会如此受用。

    当我们设计电子产品时,我们会使用像Photoshop、Sketch这样的设计软件。那些经过多年工作的人一定知道设计不仅是视觉展示,设计还有更多的事要做。Steve Jobs是这样说设计:

    It’s not just what it looks like and feels like. Design is how it works.

    我们的体验和对产品的印象是被各种因素所影响,而交互在其中扮演最基础的角色。我们不再抱有这样的想法——UI就是静态的设计,然后再添加一些神奇的交互。我们从一开始就应该把握交互才是互联网的本质,并把它看做核心成分。

    接下来我们会看到一些例子,其中的交互是由微妙的动画构建起来,逐步提升用户体验。

    动画式滚动

    超链接骂得多,也用得多。当你点击一个链接的时候,你有可能被带到任意的地方,从商品页到街边一个破旧的木偶商店的网站。这样的结果就不连贯。

    书的用户体验最伟大的地方在于它是线性的。书的每个章节都是连贯的,你首先得把第一章读完,才能理解第二章的内容。如果你跳过一个章节,你很快会意识到你错过些什么,因为有些知识写在那个章节里面。在网络上,特别是长的网页,这样的事经常下意识发生。通过增添一些滚动动画,我们可以解决它:


    ScrollingAnimatedScrollingAnimated

    然后对比这个:


    ScrollingNoAnimationScrollingNoAnimation

    对比“name”锚点链接的默认行为和动画行为。跳转内容不再是无意识的动作;它是用户的决定。事实上,希望就在每秒中的24帧中的移动版有一个菜单按钮,它不需要任何动画就让你返回页面顶端。这让我迷惑了好一阵子。

    Takeaway:界面中的突然改变很难让用户去理解。时刻展示给用户究竟发生什么。

    状态式开关

    在上个案例中我们可以看到,动画能帮助用户理解界面上的一举一动。没有什么比突然改变跟不自然,因为现实世界里面就不存在突然改变。我们再看一个例子:切换菜单。用户把“+”与添加内容、添加元素关联起来。旋转45°,“+”就变成“×”,一个被广泛理解成“关闭”的元素。

    Stateful-toggleStateful-toggle

    这个动画就完全改变的icon的意义。这样一个小细节代表猜测将要发生什么,以及知道icon在不同状态下的意义的区别。这样的切换是很用户友好的。同时,“+”旋转的方向跟内容时一样的,加强了信息的流动性。

    Takeaway:让你网站上的元素的每一个状态都是可以被理解的。

    折叠式表单和评论

    很多博客、新闻网站的评论表单都不是让人喜爱的元素。为什么?他们大部分都不友好?当你想要发表一条评论,你想要做的事是写评论,而不是其他东西。但是,典型的表单会要求你先填其他信息。这很讨厌。

    要鼓励人们更多地去评论,我们折叠表单,只留下最核心的元素:评论框。但用户点击该区域,表单就会自动展开。这一真实的案例可以在New York Times的beta版网站找到。

    NY-TimesNY-Times

    你可以进一步提升它,当它扩展的时候,把指针焦点锁定在评论框。这个方法有一个问题,交互设计的原则是一个动作的发生应该靠近交互出现的地方(靠近关注的位置)。我们再走得远一点,用评论框的动画来引导用户:

    ExpandingCommentsExpandingComments

    或者你可以把评论框放在上面,让它按需扩展,其他的框放在它下面。

    你可以看到,这减少混淆,让评论表单变得更诱人。但是如果折叠前面所有的评论?

    通过折叠评论,我们可以得到与文章长度相符的滚动条,而不是整个页面。一个通常的做法是,当用户到达页面底部时,自动加载评论。如果没有一个好理由的话,我们应该避免让用户去点击。

    Takeaway:逐步展示的方法是为了减少UI部件以保留其中的精华。只有在用户需要的时候才把它们放出来。

    下拉刷新

    在iPhone出现过了不久,一个最激动的交互方式出现了“下拉刷新”,由Loren Brichter倡导的。它让用户更新已时间倒序排列的内容。你可以在Twitter 的应用中看下这个概念的应用。当你拉到最顶端的tweet时,再下啦一点就可以刷新信息流。


    TwitterTwitter

    它为什么如此有效?再下拉刷新出现之前,用户点击刷新按钮来加载更多的内容。联系用户发掘更多内容的欲望来做刷新动作,这个动作就变得自然而然。

    Takeaway:联系动作背后的意图,才能做出无缝的体验。

    粘性标签

    粘性标签是另一个微妙而又有用的,对UI元素和有意义的动画的结合品。Edenspiekermann在他作品中运用这一技术

    Sticky-LabelSticky-Label

    这个项目标签会随着内容滚动,给右边的图片提供语境,直到下一个项目的出现。这个行为就像iOS上的联系人,这在需要提供语境的长文章中很有用。这一动画加强导航和平滑内容描述的作用。

    Takeaway:在长文章中使用粘性标签,可以描述或为内容增添有用信息。

    功能可见的动画

    功能可见的概念源于认知心理学,指的是特定物体的特征来引导观众。

    这UI设计中,EU网站上的可用性术语(PDF)是这样定义:

    功能可见是UI的一个理想属性——软件应自然引导人去到正确的步骤以完成他们的目标。

    脊线(ridge)经常用于加强功能可见的效果。按钮周围的脊线代表着这个按钮是可以被操作的。iOS上的相机应用把这一技术推广出去。


    iOS_Lockscreen-500-finaliOS_Lockscreen-500-final

    iOS 6 的锁屏中,相机icon周围的线都暗示它是可拖动的。Apple在iOS 7中去掉它们,显然由于用户已经习惯了它,现在的icon更像是单独的按钮。其实操作还是一样,拖动按钮,推开锁屏界面,露出下面的相机。这是在界面中为用户找出 产品特点的好技术。

    Takeaway:添加功能可见的元素,帮助用户在界面中找出 产品特点。

    基于语境(context)的隐藏

    iOS上的Google Chrome在发布之初就有基于语境的隐藏功能。它大概长这样:


    CBHCBH

    基本思路就是一旦往下拖动,控制栏等元素都自动隐藏。当用户往上拖动时,它们会重新出现。这方法提高语境体验(专注控制栏)和增大可视区域。后者对移动设备尤为重要。

    基本假设是用户使用时会去滑动内容。当滑动停止时,可能就对语境有需要;因此控制栏就重新出现。虽然这个方案节省屏幕位置,但请检验这个假设在你的项目中是否成立。

    iOS走得更远,当你到达页面底部时,控制栏会自动展开。它是动态合并用户需求的好例子。

    Takeaway:利用基于语境的隐藏,来提高专注度和节省空间。

    焦点动画

    一周前,Nikita Vasilyev(多伦多的UI设计师)提出一个主意。他开发了一个脚本,是焦点转移的动画。现在还是试验阶段,不过这个概念很有意思。先看下他的视频。(记得带耳机——音乐很……)

    但用键盘来导航时,用户不太清楚点击tab键时,焦点移动什么位置。动画就能指出他的正确位置。动画很微妙,但对导航很有用。

    Takeaway:为用户导航,不管用什么形式。

    结论

    这里只有部分示例,在其他地方也能找到更多。目的并不是展示最新、最时尚的交互技术,而是指出小的交互细节可以多大地提高用户体验。

    如果我们要设计更好的电子产品,我们需要挑战先有的信仰,看看交互怎么在无形中舒缓用户生活。我不是说我们要重新发明轮子,但是停止探索是个很幼稚的行为。所以,远离安逸的环境,不断地去探索和测试。

    If you like this article, you can follow me on Twitter, or join me for a bar of Swiss chocolate in Switzerland.

    相关阅读:


    来源:smashingmagazine / October 23rd, 2013
    作者:Adrian Zumbrunnen
    翻译:lyzhie


    来讨论交互吧。
    其实我不是很喜欢这个设定,今天好像有评论功能了,想顺便探讨下这个。上图:



    有道词典是肯定不会卸掉的,所以可以让我关掉那个用不上的 引用+私信、分享功能?还是说 引用+其他功能(评论,写日志等)出现。

    其他人有不同想法,请评论,谢谢。

    相关文章

      网友评论

      • 丁小它:http://www.ui-transitions.com/
        这个网站是表达什么的?看了下有点懵
      • 8af345d3ee91:@LostAbaddon 恩,最难得的是做每一个决定前都始终遵循这条原则! :+1:
      • LostAbaddon:@铁树 嗯。我的侧重点其实是想说App的默认设置要是傻瓜也能立即上手的,是让用户用起来最爽求不需要费脑筋的,同时App又可以根据老鸟玩家的个人喜好而任意定制,留下足够的灵活设置空间。
        当然,前提是真的需要如此。
      • 8af345d3ee91:@LostAbaddon 第二段你是不是想要说“用户可以大致分为初级和高级两类”? 如恢复中提到的那本书也有举例过window和Unix这个例子,高级用户更需要效率和自定义程度高的工具,命令行很符合他们的需求,简洁直接,每一个命令都是有意义的。 在桌面软件里,我们有更大的空间来设计这些功能,但在移动显示屏里,空间小了,可却增加了手势操作。这种时候就需要所占物理空间更小,但交互更复杂的控件,这也是我更喜欢App的设计的原因。 :smiley:
      • LostAbaddon:@铁树 关于这个问题,个人认为一般App不要考虑去“培养”用户习惯,这是不应该的,就如你所说,这种“强求”会带来不好的结果——比如年轻人经常会看到一个初看很赞的App,然后迅速上手,被培训被调教,最后愉快地使用了,但过阵子不用,就发现完全不会用了。无谓的学习成本总是没必要的。
        另一方面,以前和朋友们讨论过,个人认为用户可以大致分为初级和低级两类,一个App的设定应该有一个默认设定,这个必须是针对初级用户制定的,让它们可以用得顺手,而且学习成本越低越好;而设定的高级定制项则是给高级用户定制的,让它们可以按照自己的心意调教出最顺手的App——就比如Windows给小白,Unix给老鸟,大致这样。
      • lyzhie:@铁树 哈哈 :wink:
      • 8af345d3ee91:对于最后的这个探讨: 不能强求用户去按照理想化的设定操作,所以应该提供给用户一个可以修改的地方。 参考《交互设计精髓》中所讲的,或许应该为中级用户和高级用户提供一个让他们通过探索来发现可以修改这个设定的小地方。 (希望用户做笔记是理想化的,但当他们只想阅读时,或许因为想高亮正在阅读的位置而选择了文字,这个小弹出框会不会打断他们的专注,因为这为什么总是会出来,让这该死的小东西消失一会儿好不好!哈哈)
      • lyzhie:@LaughingJacky 悄悄改掉XD
      • LaughingJacky:最后一段应该是『如果我们要设计更好的电子产品』吧。来试用下简书的评论功能:D
      • lyzhie:@简叔 谢谢!用Markdown写作真得舒服~~
      • MJGA:@lyzhie 文章很好,lyzhie的翻译文章选的质量都很高啊!
      • lyzhie:@laughing 屏幕取词我是直接关掉。其实划词我也挺讨厌的,不过有些时候还能用上。看文章时候,鼠标选取好像只是一种无意识的动作,这个缓慢出现按钮还是挺打扰人,特别是缓慢出现… 其实我觉得像在触屏设备上,长按手势就会好很多,无意识触发会比较困难… 好吧,其实我会比较喜欢用iPhone来阅读简书,浏览器自带的阅读功能会更纯粹。没干扰的阅读对我来说会更舒服
      • Qvo65q:说实在的,有时候我觉得有道的屏幕取词我觉得又爱又恨。因为有时候我会设置开机自动启动词典,然后划词也打开,这时候看视频全屏模式的时候就特别讨厌,总是要先退掉词典。话说,lyzhie,你是在看中文,随时翻译成英文么=。=不然这两者也没什么影响吧。

      本文标题:巧妙的过渡动画

      本文链接:https://www.haomeiwen.com/subject/gybqtttx.html