拖放

用户使用一根手指就可以移动或复制所选的照片、文本或其他内容,方法是将内容从一个位置拖动到另一个位置,然后抬起手指将其放下。

触碰并保持选定的内容,使其看起来悬浮并附着在用户的手指上。当拖动内容时,动画和视觉会标识出可能需要放置的位置。当拖动的内容无法放下,或着只能对拖动的内容进行复制而不能移动操作时,系统会显示标识来提醒用户。

0:00
/

初始位置与目标位置

拖放是一个将选定内容从初始位置移动到目标位置的操作。这些位置可以位于相同的内容区域中(如文本视图),也可以位于不同的内容区域中(如分屏浏览模式下相对于两侧的文本视图)。例如,在备忘录应用中,用户可以将选中的文本拖动到同一条笔记的新位置。在提醒中应用,用户可以将单个提醒事项从一个列表拖放到另一个列表中。

Jietu20220414-004011

在 iPad 上,初始位置和目标位置也可以存在于不同的应用程序中,从而实现跨应用的拖放操作,比如将照片从 Safari 浏览器的网页拖到邮件应用的新邮件内。在拖动内容的同时,用户可以通过多任务处理功能、退出到主屏幕或从屏幕底部向上滑动显示程序坞来访问另一个应用。

提示:在跨应用之间拖动内容,是将内容在两者之间进行复制,而不是将其移动。

支持拖放功能

拖放是一种高效、直观的功能,用户希望在整个系统中都能广泛使用这个功能。如果应用包含或可生成文本、照片、视频、音频,或者其他一些能够让用户移动、复制或插入的内容,那么应用应当支持拖放功能。

  • 让拖放功能适用于所有可选择和可编辑的内容

    可选择的内容应该是可拖动的,可编辑的内容应该也应该是可放置的。同时,还要确保应用支持在这些内容区域内复制和粘贴。

  • 在适用的情况下,允许将内容放置在控件上

    通常情况下,应设定好控件的功能,使其能够进行数据的录入或选择(例如文本输入区域),以此来支持拖放内容的操作。

  • 尽可能使用标准文本视图和文本输入区域

    系统提供的这些控件都已包含对拖放功能的原生支持。有关相关指导,请参见文本字段和文本视图。

    Jietu20220414-004029

  • 考虑支持多个内容的拖放来提高效率

    在大多数应用中,用户可以使用一根手指拖动单个内容,在拖动的同时,使用另一根手指点击其他内容进行多选。此时被选中的内容会一起移动,并堆叠在首次拖动的内容的手指下方。然后,用户可以将这些内容作为一个集合,把它们拖放到指定的位置。例如,主屏幕允许同时选择多个应用图标并将其拖入一个文件夹中。一些应用,如照片,提供了允许用户在拖动之前选择多个照片的操作模式。

    Jietu20220414-004051

  • 确认在应用中拖放内容是移动或复制操作

    通常情况下,当初始位置和目标位置处于相同的内容区域时,拖放应是执行移动操作(例如在文档中拖动文本),当它们处于不同的内容区域时,拖放应是执行复制操作(例如在文档之间或应用之间拖动)。当然,情况并非总是如此。重要的是,应该使拖放操作表现得直观。例如,在提醒应用中,在列表项之间拖动某个事项,是对它进行移动而不是复制,这也是符合用户预期的。而在应用之间拖放内容就是复制。

  • 让用户在需要时可以撤销拖放操作

    通常情况下,当用户不小心将内容放置在错误的目标位置时,他们应该能够使用“撤消”功能来将应用恢复到之前的状态。换句话说,如果应用的内容是从别的应用中移动过来的,则应将其在当前应用删除,并恢复到原来应用的位置中。

  • 考虑使用弹性加载。

    通过弹性加载,用户可以通过将选定的内容拖到某些控件上并停顿,在不放置内容的情况下激活这些控件,如按钮和分段式控件。例如,在邮件应用中,可以将选定的邮件拖到导航栏的“返回”按钮上,以到达应用中的其他位置。不要将弹性加载作为激活控件的唯一方式。把它作为一种可以被发现的小挂件。在多数情况下,弹性加载控件也应当对点击手势做出响应。

提供可拖动的内容

  • 可对拖放内容的预览进行自定义

    通常情况下,当用户拖动内容时,在手指下显示的内容的预览样式,应该半透明的。这种样式符合当前的使用场景,表明拖动正在进行中,让用户能够看清被拖动内容下面的位置。

  • 尽可能提供多种拖动数据的展示类型,按保真度从高到低进行排序

    例如,在展示具有艺术性的线条图时,应用应当按顺序依次提供 PDF 矢量图片、带透明度的无损 PNG 图片和不带透明度的有损 JPEG 图片。这样,用户就能选择最高质量的显示效果来将其导入目标位置中。

  • 在适用的情况下,将自定义对象的本地版本作为最丰富的数据形式进行呈现

    例如,一个允许用户拖动图表的应用,应该首先显示本地的图表对象。然后,它应该为不支持图表对象的应用提供替代方案,比如图表的图片版本。

  • 当应用的内容传输耗费时间或资源密集时,使用 File Provider 扩展进行处理

    即使应用不再运行,也应使用 File Provider 扩展管理传输过程,并确保传输完成。请注意,直到用户删除内容后,传输过程才开始进行。

  • 当应用需要时间传输内容时,请提供进度信息

    如果必须下载内容或大型文件需要时间进行复制时,请提供进度信息。至少,提供内容的总大小,以便目标位置可以计算剩余时间,并显示适当的进度指示器。

接收拖放后的内容

  • 使用视觉提示来识别潜在的目标位置,并显示放置内容的预览效果

    高亮显示、插入点光标和动画都是识别可能目标位置的好方法。当内容被拖过来时,视图可以微妙地闪烁并改变颜色,或者段落可以分开,为拖动的图像腾出空间。当屏幕上有多个可能目标位置时,一次只识别一个。如果初始位置和目标位置处于相同的内容区域,可以不需要高亮显示,除非内容被拖出内容区域后再拖回去。当内容被放下或不再位于目标位置上方时,请去掉高亮效果。

  • 在适当的时候自动滚动目标位置的内容

    当内容被拖到目标位置的边界外时,应用可能需要判断,是滚动显示当前目标位置的内容,还是允许用户继续拖动到其他目标位置。如果应用允许用户继续拖动,可以定义一个区域,当被拖动的内容放置在其之上时,该区域会自动滚动。例如,在邮件应用中,当内容被拖到正文区域的顶部或底部时,冗长的邮件草稿会自动滚动。标准文本视图和文本输入区域会自动采用这种方式。

  • 让提取并展示的拖放内容的表示形式尽可能丰富

    例如,你的应用可能会为一个图表文件提供几种表现形式。如果应用支持图表,它可以提取并显示本机的图表对象。如果应用不支持图表,它可以提取并显示图表的图片版本。

  • 在适用的情况下,仅提取已放置内容的相关部分

    例如,如果用户将某个“联系人”拖到“邮件”中的“收件人”区域,则只提取该联系人姓名和电子邮件地址,而不用联系人的地址信息。

  • 当内容放置后,在表视图和集合视图中显示占位符

    占位符会短暂显示此处是被拖动的内容在完成传输后的存放位置。

  • 当放置的内容需要较长时间传输时,显示其传输进度

    默认情况下,当应用之间发生长时间的传输时,系统会显示一应用模式警报。考虑使用自定义的进度样式——例如在表视图或集合视图的占位符上,显示一个进度条——这样就不会对用户的使用造成阻碍。请注意,直到用户删除内容后,传输过程才开始进行。

  • 当拖放的内容启动一个进程时,请提供反馈

    如果用户将内容拖放到启动任务的控件上——例如,将视频上传到网站上——就会显示上传任务已经开始,并通知用户其进度。

  • 内容放置失败时通知用户

    如果无法插入拖放的内容,可能是因为文件传输中断,应该通知用户内容放置失败。

  • 对放置的文本使用适当的样式属性

    当初始位置和目的位置具有相同样式的文本属性时,放置的文本应该保留其原始的字体、字型、大小和其他属性。否则,被放置的文本应该采用目的位置所使用的样式属性。

  • 当用户不能立即撤消拖放操作时,请提供一种微妙、直观的方式让用户退出操作

    例如,一个共享类应用可能会在放置内容之前,显示一个分享面板。分享面板可以提供一些比如状态消息等的附加操作选项,同时还会提供一个取消按键。当照片被拖到共享照片流中时,应用就会显示这个交互动作。

网页快照 https://cubox.pro/share/XjR3WV