IOS 12设计规范(3-5)用户交互:拖放(Drag and Drop)

点击前往本读书笔记总目录

3.4    拖放Drag and Drop

只要一根手指,用户就可以将选定的照片、文本或其他内容,从一个位置拖到另一个位置来进行移动或复制,然后松开手指将其放下。

IOS 12设计规范

触摸并按住选择的内容使它看起来会上升并附着在用户的手指上。当内容被拖动时,动画和视觉提示要识别你想放置的位置。当无法放下,或着拖拽只能复制而不是移动时,该系统会显示别的标识来提醒用户。请参阅 UIKit 中的 Drag and Drop 。

原位置和⽬的地 (Sources and Destinations) 

拖放包括将选中的内容从原位置转移到⽬的地。这些位置可以在同一集合中, 如文本视图,或分屏模式下两端的文本视图。例如,在 Notes 中,用户可以 将选中的文本拖到同一条笔记中的新位置。在 Reminders 中,用户可以将单个提醒从一个列表中拖出来,并将其放入另一个列表中。

在iPad上,原位置和⽬的地的位置也可以在不同的 App 中,从⽽产⽣跨 App 的交互,比如从 Safari 的网页中拖出一张照片到 Mail 里的新邮件中。在拖拽内容的同时,用户可以通过多任务处理、退出到主屏幕或从屏幕底部 向上滑动显示快捷键来访问另一个 App 。

注意:在App程序之间拖放的内容是复制文件,而不是内容本身(译者注: 即拖动只是将内容复制到另一个应用中而不是移动存储位置)。

支持拖放功能(Supporting Drag and Drop) 

拖放是一种高效的、直观的功能,用户期望在整个系统中都能实现。如果你的App包含或⽣成了文本,照片,视频,音频,或者其他用户想要移动,复制或插入的内容,你的App应该支持拖放功能。

所有可选择和可编辑的内容都能进行拖放

可选择的内容应该是可拖动的可编辑的内容也是可以放置内容的。还要确保你的App能够支持在这些区域复制粘贴。

允许将内容放到控件上:

总之,配置控件要支持数据输入或选择(比如文本字段)接受可放置的内容。

尽可能使用标准文本视图和输入框

系统⾃带的这些组件都包含对拖放功能的原⽣支持。

了解更多相关指导,请参阅 Text Fields 和 Text Views 。

了解更多开发者指南,请参阅 UITextField 和 UITextView 。

IOS 12设计规范

为提高效率,考虑支持多项拖放:

在很多 App 里,用户可以用一根手指拖动一个内容,同时用另一根手指轻敲其它内容,就会在选择的第一个内容的手指下方显示出堆叠效果。然后,用户可以将它们像组一样拖放到指定的位置。例如,主屏幕允许用户根据这个方法选中多个 App 程序图标,并将其拖放到一个文件夹中。在 APP中,如“照片”,提供了用户可以在拖拽之前选择多个对象的选择模式。

IOS 12设计规范

确定在你的 App 中拖放内容是移动还是复制:

一般来说,当原位置和⽬的地的载体是相同时(在⽂档中拖动文本),才可以移动,而当它们不同时(在⽂档之间或 App 程序之间进行拖动),则使用复制。当然,情况并非总是如此,重点是拖放应该是直观的。在 “提醒” 中,列表之间拖动操作是一种移动而不是复制, 因为这是用户想要的。而在 App 程序之间拖放内容就总是复制了。

用户是应该可以撤销拖放的

通常情况下,当用户无意中将内容放到错误的位置时,他们应该能够使用撤销来将App返回到之前的状态。也就是说,被放置的内容可以被移除,如果被放置的内容是从你的App程序里移出的,那么它应 该恢复到原来的位置。

考虑用一下弹簧加载

有了弹簧加载,用户可以通过拖动已选择的内容,并在不放置的情况下暂停,来激活某些控件,比如按钮和分栏组件。例如,在邮件中,选择的消息可以被拖动到导航栏的 Back 按钮上,以到达邮箱里的其他位置。永远不要让弹簧加载成为激活控件的唯一方法。把它当作一种可以被发现 的⼩小惊喜。在⼤多数情况下,一个弹簧加载的控件也应该可以响应一个点击手势。开发者指南,请参阅UISpringLoadedInteraction 。

提供可拖动的内容 (Providing Dragged Content)

可以自定义拖动项的预览:

通常,在用户手指下显示被拖动的预览效果应该是半透明内容,表明拖动正在进行中,并使用户能够看到被拖动内容下面的⽬的地。

尽可能的提供多个拖拽数据的显示类型,从高保真到低保真排序:

例如,当提供线条稿时,你的 App 可以按照顺序依次提供一个PDF⽮矢量显示,一个具有透明度的无损 PNG 图像,以及一个没有透明度的有损的 JPEG 图像。 这样,用户就可以选择最⾼高质量的显示来导入到⽬的地。

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

例如,一个允许人们拖拽图表的 App 应该首先显示本地的图表对象。然后,它应该为那些不支持图表对象的 App 提供可替代的图像版本。

当你 App 的内容传输会比较耗费时间或资源密集的时候,文件要提供程序 扩展功能:

文件提供程序扩展,并确保完成,即使你的 App 不再运行也能做到。请注意,只有用户放下内容后传输才会开始。

了解更多开发者指南,请参阅 NSFileProviderExtension 。

当你的 App 需要时间传输内容时请提供进度指示

如果内容需要下载或⼤文件需要时间复制时,请提供进度信息。⾄少提供内容的总⼤⼩小,这样就可以计算出剩余的时间,并显示恰当的进度指示器。

了解更多开发者指南,请参阅 NSProgress 。

接收放下的内容(Accepting Dropped Content) 

使用视觉提示来识别潜在⽬的地,并预览放置内容的效果

⾼高亮显示、插入 点光标和动画都是识别⽬的地的好方法。当内容被拖过来时,视图可以微妙地闪烁并改变颜⾊,或者段落可以分开为拖动的图像腾出空间。当屏幕上有多个可 能的⽬的地时,一次只识别一个。如果原位置和目标容器器是相同的,那么可以不需要⾼高亮显示,除非内容完全从原位置中拖出来,然后重新进⼊。 当内容被放下时或不再位于⽬的地之上时,确保不显示⾼高亮。

⾃动滚动⽬的地的内容

当内容被拖到⽬的地的边界之外时,你的 App 可能需要判断滚动显示当前视图遮挡的内容,或者允许用户继续拖动到完全不同的目的地。如果你的 App让用户进行滚动拖放,那就定义一个区域,当拖拽的项目被放置在上面时,这个区域会⾃动滚动。例如,当内容被拖到正⽂区域的顶部或底部时,邮件中的长草稿会⾃动滚动。标准文本视图和输入框会⾃动采用这种方式。

提取和展示要能展现出放置的丰富内容

例如,你的 App 可以为一个图表 提供的几种表现形式。如果你的 App 支持图表,它可以提取并显示出原始 图表对象。如果你的 App 不支持图表,它可以提取并显示图表的图像版本。

只提取放置内容的相关部分:

例如,如果用户想将某个联系人拖到邮件的收件人中,只需提取名称和电⼦子邮件即可,而不用联系人的地址信息。

当内容放置后,在表视图和精选视图中显示占位符

占位符会暂时指示当内容完成传输后,将停留留在哪里。

在放置内容需要时间进行传输时显示进度默认情况下,当 App 程序之间发⽣耗时的转移时,系统会显示一个 App 模式警报。可以使用自定义进程的显示方式,比如在表视图或集合视图中显示占位符的进度指示器,这样就不会阻止用 户使用你的 App 了。请注意,只有用户放下内容后传输才会开始。

为放置的内容启动一个进程时提供反馈

如果用户将内容放置到发起任务的 一个控件上,例如,将视频上传⾄共享站点,就会显示任务已经开始并通知用户其进度。

放置失败时通知用户

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

用适当的样式来放置文本

当原位置和⽬的地支持相同样式的文本属性时, 放置的文本应该保留其原始字体、字型、⼤⼩小和其他属性。否则,放置文本应该 采用⽬的地的样式。

提供一种直观的方式,当用户不能⽴即撤销拖放时,可以选择退出

例如,一个分享性的 App 会在放下内容之前提供一个中间的附加表。这个附加表可以用来提供其他内容,比如状态消息(译者注:如内容数量和⼤⼩小),同时还提供一个 取消按键。当照片被拖进共享的照片流时, App 就显示了这 种方式。

 

点击前往本读书笔记总目录

文章转载请注明出处,并需展示来源网址!:淘盒子 » IOS 12设计规范(3-5)用户交互:拖放(Drag and Drop)

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏