header_v0.7.32

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

4年前发布

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

第31章已结束过渡模式的介绍,本章开始进入新的章节——拖拽模式。该模式的主要形式就是通过鼠标拖拽方式对界面元素进行移动。本章先对该模式进行整体介绍。

YahooDesignPatternLibrary






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

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

第31章已结束过渡模式的介绍,本章开始进入新的章节——拖拽模式。该模式的主要形式就是通过鼠标拖拽方式对界面元素进行移动。本章先对该模式进行整体介绍。

  • 该类别下存在的模式

1
Drag and Drop Modules(拖拽模块)

用户需要直接通过鼠标重新安排页面上的模块布局。

2
Drop Invitation(放下引导)

设计师想在拖拽操作中为用户提供有效落脚点。

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

拖拽是一种快捷操作,它允许用户通过直接操作来完成更复杂的任务。它遵循良好的设计原则,例如“所见即所得”;它使用直接操作并保持信息在上下文环境中。

在拖拽交互中,以下“关注点”很重要。好的解决方案需要考虑以下每一种情况(特殊的拖拽模式可能选择忽略下面的一些情况):

  1. 页面加载

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

  3. 鼠标按在拖拽的对象的拖拽区域上

  4. 开始拖拽

  5. 拖出初始位置

    1. 拖拽出初始位置

    2. 再拖进初始位置


  6. 拖过有效区域

    1. 拖进有效区域

    2. 拖拽到有效区域上

    3. 拖离有效区域


  7. 拖过无效区域

    1. 拖进无效区域

    2. 拖拽到无效区域上

    3. 拖离无效区域


  8. 拖过非特定区域上

  9. 接受(拖拽)放下(对象)

    1. 接受放下对象开始

    2. 接受放下对象结束


  10. 拒绝(拖拽)放下(对象)

  11. 放在初始位置上

此外,以下界面元素在以上状态中部分或全部发挥作用:

  1. 页面(提供静态文字、图像)

  2. 鼠标指针

  3. 工具提示

  4. 拖拽对象

  5. 拖拽对象代理(可能和拖拽对象相同)

  6. 拖拽对象的父容器

  7. 放下(的)目标(位置)


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

    提示文案

    提示文案

    提示失败
    提示成功