header_v0.7.32

雅虎设计模式库解构(27)—富交互之Fade In Transition(淡入过渡)

4年前发布

翻译文章 / UI / 教程
申悦 翻译,如需商业用途或转载请与申悦联系,谢谢配合。

如果用户界面中加入某个对象,让该对象从不可见淡入到可见状态来告诉用户这个过渡过程。

YahooDesignPatternLibrary






雅虎设计模式库解构(27)——RICH INTERACTION(富交互)之Fade In Transition(淡入过渡)

                           ——OpzoonUED出品      译者:s2dongman(申悦)

如果用户界面中加入某个对象,让该对象从不可见淡入到可见状态来告诉用户这个过渡过程。

将淡入过程做成动画——让透明度从全透明(0%透明度)提升到正常值。

淡入效果会略微减慢交互过程,来让用户知道发生了什么事儿。

1

  • 这解决了什么问题?

设计师想要告诉用户某个对象加入到了页面或应用程序中。

  • 什么时候使用这个模式?

  1. (需要)在放下过程中为页面增加一个内容模块时。

  2. 将对象添加到容器中时。

  3. (需要)创建一个强关联,告诉用户对象被添加到哪儿了。

  4. 需要在不占用户主要精力的同时告诉用户添加了一些东西。

  5. 内容由系统添加时。

  6. 和交错渐变(Cross Fade)过渡结合时。

  • 解决方案是什么?

  1. 将对象的透明度从0%提升到100%(或者任意正常的强度)。这表明:

    1. 该对象现在有效。

    2. 该对象可能被重点关注。

    3. 该对象现在的位置在哪儿(为了将来参考)。


  2. 参阅Digg Spy中淡入新条目的例子。

淡入淡出速度

  1. 因为淡入淡出并不如移动过渡那样能抓住人们的眼球,我们可以让它持续时间长些。

  2. 通常的规则是:淡入淡出不应该持续超过1秒时间,一般是0.25-0.5秒之间。如果淡入淡出所关联的新信息不在用户通常的关注点内出现,你可能想要让淡入淡出速度加快来吸引眼球。但是如果淡入淡出效果发生在主要关注区域,过渡效果可以减慢。

  3. 缓慢的淡入淡出效果并不如快速效果那样引人注意。因此对于不处于核心重要地位的条目使用缓慢淡入淡出效果添加或展示给用户。

  4. 吸引用户注意力这件事更重要时,需要使用快速淡入淡出效果。

  5. 根据依赖的动画库和单台电脑性能,淡入淡出效果可能没有想象中的那样流畅。

  • 为什么使用这个模式

  1. 淡入淡出效果能帮助减缓(执行)时间。淡入淡出能略微减缓交互过程而不是让其突然发生,这样就能让用户知道发生了什么事儿。

  2. 另外,由于淡入淡出并不像移动动画那样引人注意,它们适合用在表示非重要改变的情况下。

想看更多内容,可浏览Transition(过渡)模式阐述的基本原理。

  • 可访问性

请参阅Transition(过渡)模式关于可访问性的综合讨论。


0
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功