iOS-HIG 用户交互-拖拽

Drag and Drop (Beta)

With a single finger, a user can move or duplicate selected photos, text, or other content by dragging the content from one location to another, then raising the finger to drop it.

使用一个手指,一个用户可以通过把内容从一个位置拖到另一个位置区移动或者复制选中的照片、文本或其他内容,然后抬起手指放下它


Touching and holding selected content makes it appear to rise and adhere to the user's finger. As the content is dragged, animations and visual cues identify possible destinations. The system also displays a badge that indicates when dropping isn’t possible, or will result in duplicating the content rather than moving it.

按住选中的内容让它看起来升起随之用户的手指。随着内容被拖动,动画和可视化暗示表明可能的目的地。不能放下时,或者复制内容而不是移动它时,系统也会显示一个标记表明。

For developer guidance, seeDrag and DropinUIKit.

Sources and Destinations

源和目的地

Drag and drop involves moving selected content from a source location to a destination. These locations can be in the same container, like a text view, or in different containers, like text views on opposite sides of a split view. In Notes, for example, the user can drag selected text to a new location within the same note. In Reminders, the user can drag individual reminders out of one list and drop them into another.

拖拽和放下包括移动内容从源头到目的地。这些位置可以在同一个容器中,比如一个文本视图,或者在不同的容器之间,比如一个分割视图中的不同方向的文本视图。在笔记本中,比如,用户可以将选中内容拖到同一个笔记的其他位置。在提醒中,用户可以拖拽个别提醒离开一个列表放到另一个。

On iPad, source and destination locations can also exist in different apps, enabling cross-app interactions like dragging a photo from a webpage in Safari to a new message in Mail. While dragging content, the user can access another app throughmultitasking, exiting to the Home screen, or swiping up from the bottom of the screen to reveal the Dock.

在iPad中,源头和目的地可以在不同的app,支持跨应用的拖拽。在拖拽内容时,用户可以通过多任务访问另一个app,离开app来到主屏幕,或者在屏幕底部向上滑动来显示码头。

NOTEDragging and dropping content between apps always results in duplication, not movement, of content.

Supporting Drag and Drop

支持拖放

Drag and drop is an efficient, intuitive feature that users expect to be implemented pervasively throughout the system. If your app includes or produces text, photos, video, audio, or other content that people might want to move, copy, or insert, your app should support drag and drop.

拖放是一种高效、直观的特性,用户期望在系统普遍实现这种特性。如果你的app包括或者产生文本、照片、视频、音频或者其他内容,用户想移动、复制或插入他们,你的app应该支持拖放。

Make drag and drop available for all selectable and editable content.

让所有可选中和编辑的内容支持拖放。

Selectable content should be draggable, and editable content should accept dropped content. Also make sure your app supports copy and paste in these areas.

可选中的内容都应该能被拖放,而且可编辑的内容应该能接受放下的内容。同时确保你的app在这些区域支持复制与黏贴。

Allow content to be dropped on controls when applicable.In general, configure controls that enable data entry or selection, like text fields, to accept dropped content.

合适时让内容能被放下。一般情况下,配置控制使得数据支持输入或选择,例如文本字段,接受放下的内容。

Use standard text views and text fields whenever possible.These system-provided elements include built-in support for drag and drop. For related guidance, seeText FieldsandText Views. For developer guidance, seeUITextFieldandUITextView.

尽可能用标准的文本视图和文本字段。这些系统提供的元素提供了对拖放的内置支持。For related guidance, seeText FieldsandText Views.For developer guidance, seeUITextFieldandUITextView.

For greater efficiency, consider supporting multi-item drag and drop.In many apps, the user can drag a single item with one finger, and while dragging, select additional items by tapping them with another finger. The selected items move together and appear stacked beneath the finger that's dragging the original item. The user then drags the items as a group and drops them over the desired destination. For example, the Home screen allows multiple app icons to be selected and dragged into a folder all at once. Some apps, like Photos, offer a selection mode that enables the selection of multiple items prior to dragging.

为了更高的效率,考虑支持多item的拖放。在很多app,用户可以用一个手指拖拽一个item,当拖拽时,用另外的手指可以敲击选中额外的item。选中的item一起移动,在手指下看上去像叠加的文本。用户拖放一组items到想要的目的地。例如主屏幕允许多个app icon被选中一次性拖入一个文件夹中。一些app,例如照片,提供一种选中模式,使选中多个item优先于拖拽。

Determine whether dragging and dropping content within your app should result in a move or a copy.In general, a move makes sense when the source and destination containers are the same (dragging text within a document), and a copy makes sense when they’re different (dragging between documents, or between apps). This isn’t always the case, however. Above all, drag and drop should behave intuitively. In Reminders, dragging reminders between lists moves them instead of copying them because that’s what people expect. Dragging and dropping content between apps always results in a copy.

决定是否在你的app中拖放内容是导致移动还是复制。一般情况下,当源和目的地是同一个容器移动更好(在一个文档中拖放文本),不同容器间适合复制(在文档或app之间)。并不是永远这样。综上所述,拖放应该表现直观。在提醒中,在列表拖动提醒是移动而不是复制,因为这是用户期望的行为。拖放内容在app之间往往产生复制。

Whenever possible, let people undo drag and drop.Generally, when users inadvertently drop content in the wrong destination, they should be able to use Undo to return your app to its previous state. That is, the dropped content should be removed and, if it was moved from elsewhere in your app, restored to its original location.

只要有可能,让用户能回滚拖放。基本上,当用户不小心拖放内容到错误的地方时,它们应该回滚到你app之前的状态。就是说,放下的内容应该被删除,如果它是被从你的app其他地方移过来的,恢复到它原来的位置。

Consider enabling spring loading.With spring loading, users can activate certain controls, like buttons and segmented controls, by dragging selected content over them and pausing briefly without dropping the content. For example, in Mail, selected messages can be dragged onto the navigation bar’s Back button to reach other locations in the mailbox hierarchy. Never make spring loading the only way to activate a control. Use it as an embellishment that can be discovered. In most cases, a spring-loaded control should also respond to a tap gesture. For developer guidance, seeUISpringLoadedInteraction.

考虑支持弹出加载。使用弹出加载,用户可以激活特定控制,例如按钮和分段控制,通过拖动内容到它们之上然后短暂停留而不放下内容。例如,在邮箱中,选中信息可以被拖到导航栏的回退按钮上去到达邮箱层级的其他地方。永远不要让弹出加载成为激活控制的唯一方式。用它作为一种可以被发现的装饰。在大多数情况下,一个弹出加载的控制可以对一个敲击手势应答。For developer guidance, seeUISpringLoadedInteraction.

Providing Dragged Content

提供被拖动的内容

Customize the drag item preview if necessary.In general, the preview that’s displayed under the user’s finger should be a translucent representation of the content being dragged. This appearance provides context, indicates that a drag is in progress, and enables the user to see destinations beneath the dragged content.

如果必要的话定制拖拽item的预览。一般情况下,预览表现为被拖拽内容在用户手指下是半透明的。这个表现提供环境表明一次拖拽正在进行,而且让用户在被拖动的内容之下能看到目的地。

Whenever possible, offer multiple representations of dragged data, ordered from highest to lowest fidelity.For example, when providing line art, your app could offer a PDF vector representation, a lossless PNG image with transparency, and a lossy JPEG image without transparency, in that order. That way, the destination can choose the highest quality representation that it can import.

尽可能,提供被拖拽数据的多种表现形式,从最高到最低的忠诚度排序。例如,当提供简图时,你的app可以提供一个PDF矢量表现,一个透明的无损PNG图片,和一个失真不透明JPEG图片,按照这个顺序。那种方式,目的地可以选择它可以导入的最高品质表现。

When applicable, present native versions of custom objects as the richest form of data.For example, an app that lets people drag charts should present the native chart object first. Then, it should offer alternatives—like image versions of the chart—for apps that don’t support chart objects.

如果合适,呈现特定对象的原生版本作为数据的最丰富形态。例如,一款app允许用户拖动图表首先应该呈现原生图表对象。然后,它应该提供可选项-例如图表的图片版本-对于那些不支持图表对象的app。

Implement a file provider extension when the transfer of your app’s content is time consuming or resource intensive.A file provider extension manages the transfer process and ensures that it completes, even if your app is no longer running. Note that the transfer process doesn’t begin until the user drops the content. For developer guidance, seeNSFileProviderExtension.

当传递你的app内容是一个耗时的或资源集中的事情时,实现一个文件提供扩展。一个文件提供扩展管理传输过程和保证它完成,即使你的app不再运行。注意在用户放下内容之前这个传输过程不会发生。For developer guidance, seeNSFileProviderExtension.

Supply progress information when your app’s content needs time to transfer.Provide progress information if content must be downloaded or large files require time to copy. At minimum, provide the total size of the content so the destination can calculate the amount of time remaining and display an appropriate progress indicator. For developer guidance, seeNSProgress.

当你的app内容需要时间传输时提供进度信息。如果内容必须被下载或者大文件需要时间复制提供进度信息。至少,提供内容总大小这样目的地可以计算还需要多少时间,展示一个合适的进度条。For developer guidance, seeNSProgress.

Accepting Dropped Content

接收放下的内容

Use visual cues to identify potential destinations and preview the effect of dropping content.Highlighting, insertion point indicators, and animation are all good ways to identify possible destinations. A view could subtly flash and change color as content is dragged over it, or paragraphs could move apart to make room for a dragged image. When there is more than one possible destination onscreen, identify one at a time. Highlighting may be unnecessary if the source and destination containers are the same, unless the content is dragged completely out of the source and then reenters it. Make sure highlighting is removed when content is dropped or is no longer positioned above a destination.

用可见的暗示去标示潜在目的地和预览放下内容的效果。高亮、插入点指示器和动画都是标示可能目的地很好的方式。一个视图可以精细地闪光和改变颜色随着内容被拖拽到它之上,或者段落可以为拖过来的图片移出一部分空间。当不止一个可能的目的地在屏幕上,一次只标示一个。如果源和目的容器是同一个时高亮也许不必要,除非内容被完全拖出源和重新加入它。确保高亮被移除当内容被放下或者不再放在这个目的地上时。

Automatically scroll the contents of a destination when appropriate.When content is dragged outside the bounds of a destination, your app may need to determine whether to scroll the contents of the destination or to allow the user to continue dragging to an entirely different destination. If your app lets the user continue dragging, consider defining a region that causes automatic scrolling when the dragged item is positioned above it. For example, a lengthy draft message in Mail automatically scrolls when content is dragged to the top or bottom of the body area. Standard text views and text fields automatically adopt this behavior.

合适时自动滚动目的地的内容。当内容被拖出目的地的边界,你的app也许需要决定是否滚动目的地的内容或者允许用户继续拖动到另一个目的地。如果你的app允许用户继续拖动,考虑定义一个范围,当被拖动的item在这个范围之上时引起自动滚动。例如,在邮件中的一个冗长的简图信息会自动滚动当内容被拖到正文区域的顶部或底部。标准文本视图和文本框自动采取这种行为。

Extract and display the richest possible representation of dropped content.For example, your app might be offered several representations of a chart. If your app supports charts, it could extract and display the native chart object. If your app doesn’t support charts, it could extract and display an image version of the chart instead.

提取和展示被拖拽内容的最丰富表现形式。例如,你的app提供chart的多种表现形式。如果你的app支持chart,它可以提出和展示原生的chart对象。如果不支持chart,它可以提取和展示一个图片版本的chart作为替代。

When applicable, extract only the relevant portion of dropped content.For example, if a user drags a contact from Contacts to a recipient field in a Mail message, only the name and email address are used, not the contact’s address information.

合适时,只提取被拖拽内容的相关部分。例如,如果一个用户从通讯录拖拽一个联系人到一个邮件信息的收件人栏中,只有名字和有电子邮件地址被用到,而不是联系人的地址信息。

Show placeholders in table views and collection views after content is dropped.Placeholders temporarily indicate where the content will reside once it finishes transferring.

在table和集合视图中显示占位符,在内容被放下之后。占位符暂时表明内容在完成传输之后会位于哪里。

Show progress when dropped content needs time to transfer.By default, the system displays an app-modal alert when a time-consuming transfer occurs between apps. Consider customizing the way progress is displayed—such as by showing progress indicators on placeholders within a table view or collection view—so the user isn’t blocked from using your app. Note that the transfer process doesn’t begin until the user drops the content.

当放下的内容需要时间传输时显示进度。默认情况,当一个耗时的传输发生在app之间时系统显示一个app-遮罩提醒。考虑定制进度显示方式-例如在table和集合视图里面的占位符显示进度条-所以用户不会在使用你的app时被阻塞。注意在用户放下内容前传输过程不会发生。

Provide feedback when dropped content initiates a process.If the user drops content onto a control that initiates a task—for example, uploading a video to a sharing site—show that the task has begun and keep the user informed of its progress.

当放下内容初始化一个进程时提供反馈。如果用户放下内容到控制器上开始一个任务-例如,上传一个视频到一个分享站点-显示这个任务已经开始同时让用户知道任务进程。

Inform the user when dropping fails.If the dropped content can’t be inserted, perhaps because a file transfer was interrupted, inform the user that the drop was unsuccessful.

如果放下失败记得通知用户。如果放下的内容不能被插入,也许是因为一个文件传输被打断,通知用户放下操作失败了。

Apply appropriate styling to dropped text.When the source and destination support the same styled text attributes, dropped text should maintain its original font, typeface, size, and other attributes. Otherwise, dropped text should adopt the destination’s style.

对被放下的文本应用合适的样式。当源和目的地支持同样的文本样式属性,放下的文本应该保持它原来的字体,打印字型,大小和其他属性。除此之外,被放下的文本应该采用目的地的样式。

Consider providing a subtle, intuitive way to opt out when the user can't immediately undo drag and drop.A sharing app, for example, might present an intermediate share sheet before posting dropped content. This share sheet could offer a way to supply additional content like a status message, while also offering a cancellation button. Photos exhibits this behavior when a photo is dragged into a shared photo stream.

考虑提供一个精细、直观的方式来选择退出当用户不能马上回滚拖放。一个分享型app,例如,在提交放下的内容之前可能呈现一个中间分享表单。这个分享表单可以提供一种方式来提供额外内容比如一条状态信息,同时也提供取消按钮。当一张照片被拖进一个分享的照片流时照片展览这种行为。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容