拖拽操作
UX百科编辑部2024-02-02 发布
493人在学·1条笔记
收藏
用户可以使用拖拽功能,将所选照片、文本和其他内容从一个位置拖到另一个位置进行移动或复制内容。
若要拖拽,用户需要首先选择好内容,然后将其放在另一个位置。位置可像文本视图那样位于同一容器中,也可像分屏浏览的文本视图,甚至是不同 App 中的文本视图那样位于不同容器中。
拖移操作可能会将所选内容移动到目的位置或者拷贝该内容。成功放置后,移动的内容仅存放在目的位置中;拷贝的内容会存放在两个位置中。一般情况下,将所选内容放入同一容器会执行移动,而将内容放入另一容器则会执行拷贝。在 App 间拖拽内容始终会执行拷贝。
根据平台的不同,用户使用不同的交互方式来执行拖拽。例如:
- iOS 支持通过触控屏手势、指针设备交互以及全键盘控制模式进行拖拽。
应用指南
- App 应尽可能支持拖拽。
- 提供完成拖拽操作的备选方法。用户有时会不方便或无法执行拖拽操作,因此提供其他方式来实现拖拽。
- 确定在 App 内拖拽内容时是移动还是拷贝。
- 合理支持多项目拖拽。
- 要考虑好如何让用户撤销拖拽操作。用户有时会无意中将内容放到错误的目的位置,因此他们希望能够撤销该操作并恢复之前的状态。
- 考虑提供多个拖拽内容的版本,按图片质量从高到低排序。通过提供多个备选版本,目的位置可以选择可接受的最高质量版本。例如,如果用户可以拖移他们在你 App 中创建的素描,那么你可以按照这个顺序提供一个 PDF 矢量表示、一个带透明度的无损 PNG 图像以及一个不带透明度的有损 JPEG 图像。
- 考虑支持弹性载入。弹性载入可让用户通过将所选内容拖到特定控件上来激活控件,如按钮和分段控件。例如,“日历”可让用户将所选日程拖到工具栏中的日、周、月或年分段上,方便他们将日程移到其他日期。
提供反馈
拖拽是一个可产生多种结果的动态过程。为了让用户感到这一过程处于掌控中,全程提供清晰且持续的反馈至关重要。
- 用户拖移所选内容时显示拖移图像。为用户拖移的内容创建半透明表示十分有效。半透明有助于区分原始内容与内容表示,并且可让用户在将内容拖到目的位置上时看到目的位置。显示拖移图像,直至用户放置该内容。
- 修改拖移图像以帮助用户清晰预见拖拽操作的结果。例如,将照片拖入文稿时,拖移图像可放大以显示该照片在文稿中的默认大小。
- 告知用户目的位置是否可接受拖移内容。例如,你可以仅当目的位置接受拖移项目时才显示插入点或高亮标记包含视图,而当目的位置不接受拖移项目时则不显示视觉反馈,或者明确显示“不允许”图像,
- 当用户将项目放到无效的目的位置或者放置失败时,提供视觉反馈。
接受放置
- 拖拽时可移动目标位置的其他内容,用来展示放置位置。
- 当有选择时,选择 App 可接受的放置内容的原版本。
- 仅提取放置内容的相关部分。例如,当用户将联系人拖到电子邮件中的收件人栏位时,“邮件”只会显示名字和电子邮件地址,而不是该联系人的地址信息。
- 连接键盘后,在放置时检查 Option 键。当用户按住 Option 键拖移时,他们可以强制同一容器内的拖拽操作执行拷贝操作。如果用户在将内容放置在同一容器中前松开了 Option 键,则拖移操作会移动该内容。
- 放置内容时提供预估时间。例如,你可以显示进度指示符来帮助用户预估传输所需的时间。
- 当放置内容启动了某一任务时提供及时反馈。如果用户将内容放到了启动任务(如打印)的控件上,应告知用户该任务已开始并让用户了解其进度。
- 为放置文本应用适当样式。当源位置和目的位置都支持同一文本样式时,应确保放置文本保持其原始字体、字样、大小以及其他属性。否则,应为放置文本应用目的位置的样式。
- 放置后,在目的位置保持内容的选择状态,并按需在原位置进行更新。用户希望他们放置的内容保持选中,以便可以立即执行相关操作。如果源位置和目的位置是同一容器,则拖移操作执行移动时,内容会从其原始位置消失。同一容器内的拖移操作执行拷贝时,应取消选择保留在原始位置的内容。当用户将所选内容拖到其他容器时,应取消选择源位置的内容。
493人在学·1条笔记
收藏
已学会
6人已学会