header_v0.7.32

雅虎设计模式库解构(28)—富交互之Fade Out Transition(淡出过渡)

4年前发布

原创文章 / 网页 / 教程
申悦 原创,如需商业用途或转载请与申悦联系,谢谢配合。

如果用户界面中删除了某个对象,让该对象淡出直到消失来告诉用户这个过渡过程。
将淡出过程做成动画——让透明度从正常值下降到全透明(0%透明度),也就是不可见状态。

YahooDesignPatternLibrary






雅虎设计模式库解构(28)——RICH INTERACTION(富交互)之Fade Out Transition(淡出过渡)

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

如果用户界面中删除了某个对象,让该对象淡出直到消失来告诉用户这个过渡过程。

将淡出过程做成动画——让透明度从正常值下降到全透明(0%透明度),也就是不可见状态。

(该模式)告诉用户,某对象不再可用,也就是“消失了”——就像字面上看到的那样,同时也应让用户清楚对象被移除的确切位置。

transition-fadeout

  • 这解决了什么问题?

设计师想要告诉用户某个对象正在离开(消失)。

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

  1. 从页面上移除一个内容模块时。

  2. 从容器中移除对象时。

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

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

  5. 内容由系统移除时。

  6. 和自愈过渡(Self-Healing)过渡结合时。

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

  • 解决方案是什么?

将对象的透明度从正常值降到透明(0%透明度)。这表明:

  1. 该对象不再有效(通常是删除了)。

  2. (给予用户)(由过渡产生的)一种强烈印象,告诉用户该对象消失了(让用户看到它正在离开)。

  3. 该对象从哪儿被移除了。

淡入淡出速度

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

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

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

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

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

  • 为什么使用这个模式

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

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

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

  • 可访问性

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


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

    提示文案

    提示文案

    提示失败
    提示成功