header_v0.7.0

雅虎设计模式库解构(29)——富交互之Self Healing Transition(自愈过渡)

4年前发布

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

如果用户从表格或列表中删除了某个对象,先保持这个被删除对象(原先的)空间,然后以动画的方式,将该对象下方、或紧接着它的对象以动画过渡的方式填充那个空间。

YahooDesignPatternLibrary






雅虎设计模式库解构(29)——RICH INTERACTION(富交互)之Self Healing Transition(自愈过渡)

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

如果用户从表格或列表中删除了某个对象,先保持这个被删除对象(原先的)空间,然后以动画的方式,将该对象下方、或紧接着它的对象以动画过渡的方式填充那个空间。

这种过渡告诉用户(并从视觉上强调)该对象从哪儿被删除了,并且表格或列表不再包含(这个)被删除的对象。

transition-selfheal

  • 这解决了什么问题?

设计师想要告诉用户某个对象已经从一个列表中被删除了。

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

  1. 被删除的对象在表格或列表中时。

  2. (让用户)知道发生了删除动作,并且某个对象从表格或列表的什么位置被删除了,是很重要的。

  3. 当某个对象从一个地方被拖拽到另一个地方,在拖拽操作完成时。

  4. 和出现在别的地方的对象配合时(通常和淡入效果配合)。

  • 解决方案是什么?

  1. 为被删除的对象留出空间;

  2. 当交互完成时,下方的对象向上滑动填充该空间;

  3. 请参看“滑动(Slide)模式”

  • 为什么使用这个模式

自愈过渡告诉用户:

  1. 对象从哪儿被删除了。

  2. 列表不再包含被删除的对象了。

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

  • 可访问性

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


0

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功