header_v0.7.2

雅虎设计模式库解构(33)——富交互之Drag and Drop Modules(拖拽模块)

4年前发布

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

对于多事件状态的每个状态(或者,就像我们所说的,“有趣时刻”),拖拽交互必须协调好屏幕上不同数量的元素(角色)的样式、位置或动画。

YahooDesignPatternLibrary






雅虎设计模式库解构(33)——RICH INTERACTION(富交互)之Drag and Drop Modules(拖拽模块)

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

对于多事件状态的每个状态(或者,就像我们所说的,“有趣时刻”),拖拽交互必须协调好屏幕上不同数量的元素(角色)的样式、位置或动画。

对于拖拽模块,“有趣时刻”和“角色”的集合更小。

关键的“有趣时刻”是页面初始渲染时,鼠标悬停在可拖拽对象上,开始拖拽,拖拽到有效目的地,拖过无效目的地,拖过初始位置,接受放下,拒绝放下,以及拖回初始位置。

四个界面“角色”是:鼠标指针、一个模块(或者代表相同意思的缩略图)、模块的初始位置,以及一个“放下目标”。

11

  • 这解决了什么问题?

设计师想要用直接用鼠标重新排列页面上的模块。

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

  1. 你不想为了重新安排页面布局而让用户跳转到另外一个页面

  2. 你正在设计用户可个性化设置的门户页面(就像http://my.yahoo.com)

  • 解决方案是什么?

拖拽交互可能会很复杂。其复杂性依赖于事件状态的数量(我们叫这些事件状态为:“有趣时刻”),(这些事件状态)可用于特定的拖拽顺序中。

此外,可以根据给定的事件状态设置很多屏幕上元素(角色)的样式、位置或动画效果。如需查看拖拽操作可能会用到的完整事件状态列表,请参阅“Drag and Drop”阐述的基本原理。

对于拖拽模块,“有趣时刻”和“角色”的集合更小。下面是和大多数拖拽模块相关的“有趣时刻”:

  1. 页面生成(当页面第一次被渲染时会显示什么);

  2. 鼠标悬停在可拖拽对象上;

  3. 开始拖拽(鼠标按下,鼠标移动范围大于3像素);

  4. 拖过有效目的区域;

  5. 拖过无效目的区域;

  6. 拖过初始位置;

  7. 接受放下;

  8. 拒绝放下;

  9. 放回初始位置。

在拥有内容模块的页面上,以下用户界面元素(角色)会参与到每个“有趣时刻”中。

  1. 鼠标指针;

  2. 模块或代表模块的缩略图;

  3. 被拖拽模块的初始位置;

  4. 放下目的地(或者展示模块将被放在那儿的插入栏)

“有趣时刻”故事板表格

在拖拽交互操作的“有趣时间”,“角色”会参与进来。以下表格展示了当用户为了重新排列页面模块进行拖拽时的每个交互操作。


页面生成鼠标悬停开始拖拽拖过有效区域拖过无效区域拖过初始位置接受放下拒绝放下放在初始位置
页面内容提示(能拖拽)N/AN/AN/AN/AN/AN/AN/AN/A
鼠标指针普通Move Cursor可移动指针可移动指针可移动指针可移动指针普通普通普通
拖拽对象普通普通减小透明度&跟随减小透明度&跟随减小透明度&跟随+无效标记减小透明度&跟随

2.模块以动画形式放到插入条下方

3.模块在新区域停止移动

4.模块在自愈过渡中滑上去来填充空间

减小透明度+缩放回原始位置减小透明度+缩放回原始位置
初始位置普通普通开一个洞(空间)空间保持空间保持空间保持空间保持空间被拖拽对象再次填充空间被拖拽对象再次填充
放下目的地普通普通普通插入条N/AN/A1.插入条被删除N/AN/A

下面会详细描述拖拽解决方案。

页面生成

由于页面上的拖拽“习语”还没有普及,“习语”的可发现性是个问题。有一种解决方案就是:提供一种初始帮助提示,告诉用户模块能够通过拖拽重新排列。当用户使用了几次这个功能(就是拖拽),或者在登录了几次后,提示应该消失掉。

鼠标悬停

  1. 鼠标指针改变。将鼠标指针的CSS样式设为:move cursor。这样会出现4个箭头(除了Mac电脑上的Firefox浏览器的箭头样式——一个张开的手的指针)。

  2. 可选的:当鼠标悬停在可拖拽的对象的可拖拽区域上时展示一个工具条提示。工具提示告诉用户他们能够拖拽某个模块。测试标明,用户似乎不需要这些额外提示。悬停时的鼠标指针改变已经足够了。

开始拖拽(和跟踪)

  1. 拖拽模块

    1. 模块配合鼠标移动(开始追踪鼠标位置)。

    2. 略微降低(拖拽模块)的透明度,从而能让用户透过(拖拽模块)看到下面的页面元素和模块。在拖拽过程中保持低透明度。模块浮在其他页面元素上。


  2. 初始位置。由于移动了模块,在模块的初始位置会产生一个“洞”。

拖过有效目标区域

  1. 放下目标区域。在模块会被放下的区域显示一条细的插入条(在两个模块之间)。

拖过无效目标区域

  1. 鼠标指针标记。在鼠标指针旁边会浮现出“无效标记”,告诉用户不能放在这里。

  2. 没有放下目标(插入条)。

拖过初始区域(那个“洞”)

  1. 鼠标指针。可移动指针样式(十字)。。

  2. 可拖拽模块。保持拖拽中的样式(降低透明度,等等)。

  3. 没有放下目标(插入条)

接受放下

  1. 鼠标指针。变回普通指针。

  2. 放下目标。移除掉插入条。

  3. 把模块放在新位置后会发生一系列动画:

    1. 放下目标。

      1. 移除掉插入条

      2. 为新位置开个“洞”


    2. 被拖拽的模块

      1. (当洞打开时)可拖拽模块以动画的形式放到新位置中。

      2. 透明度回到普通值。


    3. 初始位置

      1. 该区域以动画过渡的方式闭合起来(自愈过渡)

      2. 会引起初始位置那个洞周围其他模块的闭合。



拒绝放下

  1. 鼠标指针。变回普通指针。

  2. 可拖拽模块

    1. 以动画的方式回到初始位置(“那个洞”)——缩放回去。

    2. 将透明度增加到全透明度。


  3. 初始位置。并没有用模块填充回初始位置。

放在初始位置

  1. 鼠标指针。变回普通指针。

  2. 可拖拽模块。

    1. 以动画的方式回到初始位置(“那个洞”)——缩放回去。

    2. 将透明度增加到全透明度。


  • 为什么使用这个模式

google.com/ig、netvibes.com、live.com和其他门户网站实现拖拽的解决方案略有不同。主要不同有如下几点:

拖拽操作是一种预览不是一个完整的操作。因此直到发生放下操作之前都不会重新安排页面上任何元素。并不会在初始位置留一个“洞”,且高亮一个插入条来告诉用户发生了什么、对象会被放在那儿。

由于页面会重新布局,当用户放下模块时,用动画效果将布局变化平滑处理。用自愈过渡将初始位置的“洞”闭合。用“滑动过渡”将模块滑进目的位置中。

可拖拽模块不应该妨碍页面的重新布局。我们通过减少可拖拽模块的透明度来让用户仍旧能看到它下面(的页面元素)。

  • 可访问性

  1. 拖拽并不是完全“可访问”。有一种方法可以支持“可访问性”,那就是为重新安排页面内容模块提供另一种方法。在“My Yahoo!”,你可以选择“改变布局(Change Layout)”功能来让用户跳转到另一个页面,在该页面中给用户一种在列表中重新排序内容模块的方法。

  2. 模块顺序可能对失明的用户并不重要。如果内容模块是由结构良好的HTML代码生成的,它们应该能够快速地从一个模块移到另一个模块。它们可能仍旧想要改变内容模块的顺序,从而允许用户能够首先访问到重要模块。

  3. 当高亮拖拽操作的源和目的地时,请小心选择颜色,避免奇怪的颜色组合和/或(让颜色)缺乏对比。良好的颜色组合能帮助有视觉障碍的用户更容易发现目标。还可以允许用户预先配置好他们自己选择的颜色。


0

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功