美文网首页
用户交互(6)-拖放

用户交互(6)-拖放

作者: vcy桑 | 来源:发表于2020-05-18 10:48 被阅读0次

拖放

用户可以通过一根手指将照片,文本,或者其它内容从一个地方拖拽到另一个地方,然后松掉手指将其放下,从而移动或者复制这些内容。

点击或者长按选择的内容使其逐渐浮起并黏住用户的手指。当拖拽内容时,动画和视觉路径会定义可能的目的地。系统也会显示一个徽章来说明无法拖拽的情况,或者复制内容而不是移动它。

源位置和目标位置

拖放涉及到将选中的内容从源位置移动到另一个目标位置。这两个位置可以在同一个容器内,比如像文本视图,或者在不同的容器内,拆分视窗两侧的文本视窗。在笔记中,用户可以拖拽选中的文本到同一个笔记中的新位置。在提醒中,用户可以将列表中的个人提醒拖拽到另外一个列表中。

在iPad中,源位置和目标位置可能存在于不同的应用程序中,需要支持跨程序交互,例如从Safari浏览器的网页中拖拽一张图片到邮箱中的新信息中。拖拽内容时,用户可以通过多任务,退出主界面或者从屏幕底部向上滑动以显示停靠点来访问另外一个程序。

在应用程序之间拖拽内容往往会导致内容的复制而非移动。

支持拖放

拖拽是一种高效直观的功能,用户希望在系统中能够普遍执行。如果你的应用程序当中包含或者生成文本,照片,视屏,音频或者其他用户可能想要移动,复制或者插入的内容,那么就需要支持拖放。

为所有可选择和可编辑的内容提供拖放。可选择的内容应该是可拖拽的,可编辑的内容应该是可添加的。同时,要保证这些区域支持复制和粘贴。

需要时允许内容被拖拽到控件上。通常来说,配置控件允许数据输入或选择的控件(比如像文本域)来接受拖拽释放的内容。

任何时候尽量使用标准的文本视图和文本域。这些系统提供元素包括了内置拖放功能。

支持多项拖拽提高效率。在很多应用程序中,用户可以通过一根手指拖拽单个项目,同时,使用另外一根手指点击选中另外的项目。这些选中的内容会一起移动,并且看似黏在最初拖拽的那根手指上。用户可以成组的拖拽内容并且把它们释放在理想的目标位置。比如说,主界面上支持多个应用程序图标同时选中并且一次性被拖拽到同个文件夹中。有些应用程序中提供允许多项优先拖拽的选项。

确定应用程序中的拖拽是否应该导致移动或者复制。通常来说,源位置和目标位置在同个容器中时(在同个文件中拖拽文字),移动是有意义的,当不在同一个容器中时(在两个文件或应用程序当中拖拽),复制是有意义的。然而,事实并非总是如此。毕竟拖拽应该直观地表现。在提醒的列表之间拖拽单个提醒是移动而非复制,因为用户就是这样希望的。在应用程序之间拖放内容往往导致复制。

任何时候都尽可能的允许用户撤销拖放操作。通常地,当用户不小心将内容释放到错误的目标位置时,他们应该能够撤销操作使程序回到之前的状态。也就是说,释放的内容能够移动,并且如果它是从应用程序中的其他位置移过来的,就移回原来的位置。

考虑启用弹性加载。使用弹性加载,用户可以激活某些控件,如按钮或分段控制器,通过将选中的内容拖拽到控件上并短暂暂停且不释放内容。例如,在邮箱中,选择的信息能被拖拽到导航栏上的“返回”按钮以到达邮箱层级中的其他位置。不要弹性加载当做激活控件的唯一方法。请把它当做一个可被发现的装饰。通常情况下,弹性加载的空间也应该响应敲击手势。

提供拖拽内容

必要时自定义拖拽项目预览。通常来说,用户手指下展示的预览应该是被拖拽内容的半透明样式。样式中提供上下文,指示拖拽正在进行,并且允许用户查看拖拽内下的目的地。

尽可能提供拖拽数据的多种显示形式,按照保真度的最高到最低顺序排列。例如,当提供线段艺术时,应用程序可以按照这种顺序提供PDF的矢量显示,透明的无损的PNG图像和不透明的有损JEPG图像。这样的话,目的地就可以选择导入的最高质量的显示效果。

合适的时候,请将定制对象的本地版本显示为最丰富的数据形式。例如,一款支持用户拖拽图表的应用程序应该首先显示本地图表对象。然而,也应该为不支持图表对象的应用程序提供如图片版本图表这样的选择。

当应用程序内容的传输费时或资源密集时,实行文件提供扩展。即使您的应用程序不再运行,文件提供扩展能够管理传输进度并且保证传输完成。需要注意的是,用户释放内容之后传输进度才开始。

当应用程序的内容传输需要时间时,请提供进度信息。如果需要下载内容或者大型文件的复制需要时间的话,请提供进度信息。至少需要提供内容的总容量,这样目标可以计算出剩余时间并且显示合适的进度指示器。

接受被释放的内容

使用视觉显示来定义潜在目标并且预览释放内容的效果。显示强调,插入点指示器和动画都是定义可能目标的好方法。当内容拖拽到上方时,视窗能够轻微地闪烁并且改变颜色,或者段落会分开为拖拽的图片留出空间。当屏幕上有不止一个可能的目标时,一次只定义一个。当源容器和目标容器相同时,可能就不需要显示强调,除非内容被完全拖拽出源容器并再重新拽入时。当内容被释放或不再定位在目标上时,请确保取消显示强调。

合适的时候,自动滑动目的地中的内容。但内容被拖拽出目的地的边界时,你的应用程序也许需要确定是否滚动目的地中的内容或者允许用户将内容继续拖拽至另一个完全不同的目的地。如果你的应用程序允许用户继续拖拽,需要定义一个区域,当拖拽项目定位到该区域上方时会引发自动滚动。例如,当内容被拖拽到正文的顶部或者底部时,邮箱中的冗长草稿信息会自动滚动。标准的文本视窗和文本域会自动采用这种行为。

提取并显示释放内容最丰富的可能的呈现方式。例如,你的应用程序可能提供几种图表的呈现形式。如果你的应用程序支持图表,他可以提取或显示本地图表对象。如果你的应用程序不支持图表,作为替代,它可以提取或者显示图像版本的图表。

合适的时候,只提取释放内容的相关部分。例如,在邮件信息中,如果用户从联系人当中拖拽一个联系人到收件人区域,这时就只会使用姓名和邮箱地址,联系人的地址信息是不会使用的。

内容释放后,在表视窗和集中视窗中显示占位符。一旦内容完成传输,占位符能短暂地指示内容显示的位置。

当释放内容的传输需要时间时,请显示进度。当应用程序之间发生耗时的传输时,系统会默认显示应用程序模态警示。考虑自定义进度的显示方式,比如说在表视窗和集合视窗的占位符中显示进度指示器,那么用户在使用你的应用程序时就不会收到阻碍。请注意,用户释放内容后,传输进度才开始。

当释放的信息启动进度时,请提供反馈。如果用户在触发任务的控件上释放拖拽的内容,如在分享网站上传视屏,请显示任务已经开始并且告知用户进度。

当拖拽内容释放失败时,请告知用户。如果释放内容不能被插入,可能是因为文件传输被打断了,如果失败了请告知用户。

为释放文本采用适当的样式。当源内容和目标内容支持相同的文本属性时,释放内容应该保持原来的字体,尺寸以及其他属性。否则,释放内容要采用目标的样式。

当用户不能立即撤销拖放操作时,考虑提供巧妙的,直观的退出方式。例如,在一款分享应用程序中,在放入释放信息之前可能会显示中间分享表单。这种分享表单能提供一种补充附加内容的方法(如状态信息),同时还提供取消按钮。当照片被拖拽到分享照片流中时,会显示这种行为。

原文地址:https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

相关文章

  • 用户交互(6)-拖放

    拖放 用户可以通过一根手指将照片,文本,或者其它内容从一个地方拖拽到另一个地方,然后松掉手指将其放下,从而移动或者...

  • tableau可视化练习

    tableau作为领先的数据可视化工具,具有强大可视化效果和高交互性,它不需要任何复杂的脚本 ,用户仅需要拖放界面...

  • ReactDnD复制和移动(例子)

    这个例子演示了可以接受复制和移动的拖放效果的拖放目标,用户可以在拖放时按住alt键或释放alt键来进行切换。 例如...

  • 网页设计资源:30 个最棒的 jQuery 的拖放插件

    jQuery 允许用户为任意 DOM 元素添加可拖放的功能,通过 jQuery 的拖放插件你可以轻松实现网页上任意...

  • 前端面试05:说一下 HTML5 drag api

    dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。 darg:事件主体是被拖放元素,在正在拖放...

  • 京东小程序产品规范

    产品交互风格定义 交互定义 用户交互的重要性 产品功能是否能和用户做好交互,重要是能够引导用户,给用户意料中的反馈...

  • 认识交互设计

    一、交互设计认知与理解 1、什么是交互设计? a.交互设计的含义:用户-产品-环境 用户:目标用户群体(典型用户)...

  • 人机交互大纲

    1人机交互的源起 小练习 2人 小练习 3机 4交互 5交互设计 6原型设计 7用户体验评估与设计 10人机交互的展望

  • UI必修课 交互+架构+视觉

    1 用户体验 6种基础体验 感官体验 交互体验 情感体验 信任体验 价值体验 文化体验 2 用户体验的特点 01 ...

  • 用户交互

    User Interaction User considerations Terminology: [if !su...

网友评论

      本文标题:用户交互(6)-拖放

      本文链接:https://www.haomeiwen.com/subject/dmfmlhtx.html