header_v0.7.32

雅虎设计模式库解构(31)——富交互之Spotlight Transition(聚光灯过渡)

4年前发布

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

如果屏幕上的对象或数值改变了(且并不是同时发生大量变化),使用轻量级的确认方式让用户对这个变化引起注意。

YahooDesignPatternLibrary






雅虎设计模式库解构(31)——RICH INTERACTION(富交互)之Spotlight Transition(聚光灯过渡)

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

如果屏幕上的对象或数值改变了(且并不是同时发生大量变化),使用轻量级的确认方式让用户对这个变化引起注意。

例如,将内容区域或数值的背景色变成轻柔的颜色。这种和背景色不同的颜色,需要和普通背景色有足够的区别,但又不要区别太大。

变化一发生就高亮,然后在一秒或更短的时间内就淡出。

1

  • 这解决了什么问题?

设计师想要让用户对界面上内容或数值变化的地方引起注意。

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

  1. 当用户的交互过程引起了数值或内容的改变,你想提供一种“轻量级”的确认方式告诉用户(这种改变)。相比高亮(提示),“确认对话框”太重量级了。

  2. 当发生了没有用户交互的变化时,你想要让用户对界面上的变化引起注意。

  3. 同时发生了太多变化时。如果数值变化非常频繁,或者整个页面数值都在变化,对每个变化都使用高亮会非常分散注意力。

  • 解决方案是什么?

  1. 将内容区域或数值的背景色改成轻柔颜色。

  2. (这种)与背景不同的颜色需要有足够的对比,能和普通背景色区分开,但是不能对比太强烈。

  3. 高亮应该即时发生。

  4. 高亮应该在1秒或更短的时间内淡出。

  • 为什么使用这个模式

当为页面提供小范围更新时(不是整个页面刷新),聚光灯过渡很有用。(它令)眼睛能够注意到变化,并且知道哪儿发生了变化。

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

  • 可访问性

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


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

    提示文案

    提示文案

    提示失败
    提示成功