iOS11人机交互指南-交互-05:拖拽 Drag and Drop

拖拽

使用单个手指,用户可以通过将内容从一个位置拖动到另一个位置,来移动或复制所选择照片、文本或其他内容,然后抬起手指将其放下。

iOS11人机交互指南-交互-05:拖拽 Drag and Drop_第1张图片

触摸并按住所选内容使其看起来像是用户手指下的玩物。随着内容被拖动,动效和视觉提示向用户暗示可能的目的地。系统还会显示一个不能丢弃的标记,否则会复制内容,而不是移动内容。


来源和目标

拖拽能将所选内容从源位置移动到目标位置。这些位置可以在同一个视图中,如文本视图;或者在不同的视图中,如分栏视图中的文本视图。例如,在笔记中,用户可以将选定的文本拖动到同一笔记中的新位置。在提醒中,用户可以将单个提醒从一个列表中拖放到另一个列表中。

iOS11人机交互指南-交互-05:拖拽 Drag and Drop_第2张图片

在 iPad 上,来源和目标位置也可以存在于不同的应用程序中,从而实现跨应用程序交互。例如将 Safari 中的网页照片拖到邮件中。拖动内容时,用户可以通过多任务访问另一个应用程序、退回主屏幕,或者从屏幕底部向上滑动以显示 Dock。

注:在应用程序之间拖拽内容只是复制而并非移动。


支持拖拽

拖拽是一种高效、直观的功能,用户期望在整个系统中都能使用。如果应用包含文本、照片、视频、音频或其他可能要操作的内容,诸如:复制、插入,应用应该支持拖拽。


可选择和可编辑的内容即可拖拽

可选择的内容应该是可拖拽的,可编辑内容应该允许删减,确保应用支持在这些区域中能复制、粘贴。


如果适用,允许控件上删减内容

通常允许数据输入或选择的控件,如文本字段,可以删减内容。


尽可能使用标准文本视图和文本字段

系统内置的可拖拽元素,有关相关指导,请参阅文本视图和文本视图。

iOS11人机交互指南-交互-05:拖拽 Drag and Drop_第3张图片

考虑多项拖拽

在许多应用中,用户可以用一根手指拖动单个项目。如果需要拖拽多个项目,一根手指按住,用另一个手指点击选择多个项目,会将所选项目一起移动,并显示最初按压的手指下面。然后,用户将项目作为组拖曳并将其放在所需的目的地上。例如,主屏幕允许选择多个应用程序图标并将其拖动到一个文件夹中。某些应用(如照片)提供选择模式,可在拖动之前选择多个项目。

iOS11人机交互指南-交互-05:拖拽 Drag and Drop_第4张图片

告知用户在移动还是在复制

通常当源和目标视图相同(拖动文档中的文本)时,移动是有意义的;当它们不同(在文档之间或在应用之间拖动)时,复制是有意义的。但事实并非如此,用户期待有提示性信息,告知他们在列表之间拖拽会移动而不是复制,并告知他们在应用间拖拽会复制。


如可能,允许撤消拖拽

用户时常会无意中拖拽错误的内容,他们应该可以撤消这次错误操作。也就是说,删除的内容应该被删掉,如果拖拽错了会还原。


考虑启用跳跃加载

通过跳跃加载,用户所拖拽的内容会暂时处于待命状态,而不是放弃本次操作。例如在邮件中,所选邮件可以拖动到导航栏的 “后退” 按钮上,以到达邮箱层次结构中的其他位置。当然,切勿使用跳跃加载作为唯一方法激活控件,而是作为一个有趣的点缀。在大多数情况下,跳跃加载的控件也应该响应点击手势。


提供拖拽内容

如果必要,自定义拖拽预览

一般来说,用户手指下显示的预览应该是拖拽内容半透明表示,并允许用户查看拖拽内容下的目标。


提供从高质量到低质量的多重表示

例如,当提供行展示时,应用可以按顺序提供 PDF 矢量预览图,具有透明度的无损PNG图像,和无透明度的有损JPEG图像。这样,目标可以选择可以导入的最高质量的表示。


将自定义对象的本地版本作为最丰富的数据形式

例如,允许用户拖拽图表的应用,应首先显示本地图表对象,那么它应该为不支持图表对象的应用提供类似图表的替代图像版本。


非即刻完成请提供进度

如果不能立即完成,如复制大型文件,请提供进度信息,包含内容大小、算剩余时间、进度指标。


接受移入内容

用视觉线索识别潜在目标并预览效果

突出显示插入点,用指示器和动效都是识别可能目标的好方法。当内容被拖拽时,可以巧妙​​地闪烁视图并改变颜色,或者将段落移开,为拖动的内容腾出空间。如果屏幕上有多个可能的目的地,一次识别一个。如果来源和目标视图相同,可以突出显示就不太必要,除非内容被完全拖出源,然后重新进入,确保在内容移入或不再位于目标上方时突出显示。


适时自动滚动目标内容

当内容被拖拽到目标边界之外时,应用可能需要确定是滚动目标内容,还是允许用户继续拖拽到完全不同的目标。如果应用允许用户继续拖拽,请考虑拖拽的项目位于其上方时,定义自动滚动的区域。例如,当内容被拖拽到主体区域的顶部或底部时,邮件中的草稿消息列表将自动滚动。标准文本视图和文本字段自动采用此行为。


提取并显示移入内容多种可能表示

如果应用程序支持图表,可以提取并显示本地图表对象。如果应用不支持图表,可以提取并显示图表的图像版。


仅提取移入内容的相关信息

例如,用户将联系人从列表拖到邮件消息中的收件人字段,只会使用姓名和电子邮件地址,而不是联系人地址信息。


完成后显示占位符

占位符在完成移入后,暂时指出内容驻留在哪里。


如果移入内容需要时间,显示进度

默认情况下,当应用之间发生耗时的传输时,系统会显示应用警报模式。考虑自定显示进度,例如在表格视图或集合视图中占位符的位置显示进度指示器,在这段时间内用户不会被阻止使用应用。请注意,在用户移入内容之前,传输不会开始。


移入内容时提供反馈

如果用户将内容移入到启动任务的控件上,例如将视频上传到共享站点 - 显示任务已经开始,并向用户通知进度。


通知用户移入失败

移入内容可能由于传输中断而无法完成,通知用户移入失败。


文本使用合适样式

当来源和目标支持相同样式的文本属性时,移入的文本应保持原始字体属性。否则移入的文本应该采用目标风格。


考虑一种巧妙直观的方式,以便无法立即撤消时选择退出

例如,将照片拖动到共享照片流中,共享应用可能会在发布移入内容前呈现中间分享表。这份表可以提供额外内容(如状态消息),同时还提供取消按钮。

你可能感兴趣的:(iOS11人机交互指南-交互-05:拖拽 Drag and Drop)