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.

使用一個手指,一個用戶可以通過把內(nèi)容從一個位置拖到另一個位置區(qū)移動或者復(fù)制選中的照片、文本或其他內(nèi)容,然后抬起手指放下它


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.

按住選中的內(nèi)容讓它看起來升起隨之用戶的手指。隨著內(nèi)容被拖動,動畫和可視化暗示表明可能的目的地。不能放下時,或者復(fù)制內(nèi)容而不是移動它時,系統(tǒng)也會顯示一個標(biāo)記表明。

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.

拖拽和放下包括移動內(nèi)容從源頭到目的地。這些位置可以在同一個容器中,比如一個文本視圖,或者在不同的容器之間,比如一個分割視圖中的不同方向的文本視圖。在筆記本中,比如,用戶可以將選中內(nèi)容拖到同一個筆記的其他位置。在提醒中,用戶可以拖拽個別提醒離開一個列表放到另一個。

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,支持跨應(yīng)用的拖拽。在拖拽內(nèi)容時,用戶可以通過多任務(wù)訪問另一個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.

拖放是一種高效、直觀的特性,用戶期望在系統(tǒng)普遍實現(xiàn)這種特性。如果你的app包括或者產(chǎn)生文本、照片、視頻、音頻或者其他內(nèi)容,用戶想移動、復(fù)制或插入他們,你的app應(yīng)該支持拖放。

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

讓所有可選中和編輯的內(nèi)容支持拖放。

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

可選中的內(nèi)容都應(yīng)該能被拖放,而且可編輯的內(nèi)容應(yīng)該能接受放下的內(nèi)容。同時確保你的app在這些區(qū)域支持復(fù)制與黏貼。

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.

合適時讓內(nèi)容能被放下。一般情況下,配置控制使得數(shù)據(jù)支持輸入或選擇,例如文本字段,接受放下的內(nèi)容。

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.

盡可能用標(biāo)準(zhǔn)的文本視圖和文本字段。這些系統(tǒng)提供的元素提供了對拖放的內(nèi)置支持。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,當(dāng)拖拽時,用另外的手指可以敲擊選中額外的item。選中的item一起移動,在手指下看上去像疊加的文本。用戶拖放一組items到想要的目的地。例如主屏幕允許多個app icon被選中一次性拖入一個文件夾中。一些app,例如照片,提供一種選中模式,使選中多個item優(yōu)先于拖拽。

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中拖放內(nèi)容是導(dǎo)致移動還是復(fù)制。一般情況下,當(dāng)源和目的地是同一個容器移動更好(在一個文檔中拖放文本),不同容器間適合復(fù)制(在文檔或app之間)。并不是永遠(yuǎn)這樣。綜上所述,拖放應(yīng)該表現(xiàn)直觀。在提醒中,在列表拖動提醒是移動而不是復(fù)制,因為這是用戶期望的行為。拖放內(nèi)容在app之間往往產(chǎn)生復(fù)制。

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.

只要有可能,讓用戶能回滾拖放?;旧?,當(dāng)用戶不小心拖放內(nèi)容到錯誤的地方時,它們應(yīng)該回滾到你app之前的狀態(tài)。就是說,放下的內(nèi)容應(yīng)該被刪除,如果它是被從你的app其他地方移過來的,恢復(fù)到它原來的位置。

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.

考慮支持彈出加載。使用彈出加載,用戶可以激活特定控制,例如按鈕和分段控制,通過拖動內(nèi)容到它們之上然后短暫停留而不放下內(nèi)容。例如,在郵箱中,選中信息可以被拖到導(dǎo)航欄的回退按鈕上去到達(dá)郵箱層級的其他地方。永遠(yuǎn)不要讓彈出加載成為激活控制的唯一方式。用它作為一種可以被發(fā)現(xiàn)的裝飾。在大多數(shù)情況下,一個彈出加載的控制可以對一個敲擊手勢應(yīng)答。For developer guidance, seeUISpringLoadedInteraction.

Providing Dragged Content

提供被拖動的內(nèi)容

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的預(yù)覽。一般情況下,預(yù)覽表現(xiàn)為被拖拽內(nèi)容在用戶手指下是半透明的。這個表現(xiàn)提供環(huán)境表明一次拖拽正在進(jìn)行,而且讓用戶在被拖動的內(nèi)容之下能看到目的地。

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.

盡可能,提供被拖拽數(shù)據(jù)的多種表現(xiàn)形式,從最高到最低的忠誠度排序。例如,當(dāng)提供簡圖時,你的app可以提供一個PDF矢量表現(xiàn),一個透明的無損PNG圖片,和一個失真不透明JPEG圖片,按照這個順序。那種方式,目的地可以選擇它可以導(dǎo)入的最高品質(zhì)表現(xiàn)。

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.

如果合適,呈現(xiàn)特定對象的原生版本作為數(shù)據(jù)的最豐富形態(tài)。例如,一款app允許用戶拖動圖表首先應(yīng)該呈現(xiàn)原生圖表對象。然后,它應(yīng)該提供可選項-例如圖表的圖片版本-對于那些不支持圖表對象的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.

當(dāng)傳遞你的app內(nèi)容是一個耗時的或資源集中的事情時,實現(xiàn)一個文件提供擴(kuò)展。一個文件提供擴(kuò)展管理傳輸過程和保證它完成,即使你的app不再運(yùn)行。注意在用戶放下內(nèi)容之前這個傳輸過程不會發(fā)生。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.

當(dāng)你的app內(nèi)容需要時間傳輸時提供進(jìn)度信息。如果內(nèi)容必須被下載或者大文件需要時間復(fù)制提供進(jìn)度信息。至少,提供內(nèi)容總大小這樣目的地可以計算還需要多少時間,展示一個合適的進(jìn)度條。For developer guidance, seeNSProgress.

Accepting Dropped Content

接收放下的內(nèi)容

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.

用可見的暗示去標(biāo)示潛在目的地和預(yù)覽放下內(nèi)容的效果。高亮、插入點指示器和動畫都是標(biāo)示可能目的地很好的方式。一個視圖可以精細(xì)地閃光和改變顏色隨著內(nèi)容被拖拽到它之上,或者段落可以為拖過來的圖片移出一部分空間。當(dāng)不止一個可能的目的地在屏幕上,一次只標(biāo)示一個。如果源和目的容器是同一個時高亮也許不必要,除非內(nèi)容被完全拖出源和重新加入它。確保高亮被移除當(dāng)內(nèi)容被放下或者不再放在這個目的地上時。

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.

合適時自動滾動目的地的內(nèi)容。當(dāng)內(nèi)容被拖出目的地的邊界,你的app也許需要決定是否滾動目的地的內(nèi)容或者允許用戶繼續(xù)拖動到另一個目的地。如果你的app允許用戶繼續(xù)拖動,考慮定義一個范圍,當(dāng)被拖動的item在這個范圍之上時引起自動滾動。例如,在郵件中的一個冗長的簡圖信息會自動滾動當(dāng)內(nèi)容被拖到正文區(qū)域的頂部或底部。標(biāo)準(zhǔn)文本視圖和文本框自動采取這種行為。

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.

提取和展示被拖拽內(nèi)容的最豐富表現(xiàn)形式。例如,你的app提供chart的多種表現(xiàn)形式。如果你的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.

合適時,只提取被拖拽內(nèi)容的相關(guān)部分。例如,如果一個用戶從通訊錄拖拽一個聯(lián)系人到一個郵件信息的收件人欄中,只有名字和有電子郵件地址被用到,而不是聯(lián)系人的地址信息。

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和集合視圖中顯示占位符,在內(nèi)容被放下之后。占位符暫時表明內(nèi)容在完成傳輸之后會位于哪里。

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.

當(dāng)放下的內(nèi)容需要時間傳輸時顯示進(jìn)度。默認(rèn)情況,當(dāng)一個耗時的傳輸發(fā)生在app之間時系統(tǒng)顯示一個app-遮罩提醒。考慮定制進(jìn)度顯示方式-例如在table和集合視圖里面的占位符顯示進(jìn)度條-所以用戶不會在使用你的app時被阻塞。注意在用戶放下內(nèi)容前傳輸過程不會發(fā)生。

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.

當(dāng)放下內(nèi)容初始化一個進(jìn)程時提供反饋。如果用戶放下內(nèi)容到控制器上開始一個任務(wù)-例如,上傳一個視頻到一個分享站點-顯示這個任務(wù)已經(jīng)開始同時讓用戶知道任務(wù)進(jìn)程。

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.

如果放下失敗記得通知用戶。如果放下的內(nèi)容不能被插入,也許是因為一個文件傳輸被打斷,通知用戶放下操作失敗了。

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.

對被放下的文本應(yīng)用合適的樣式。當(dāng)源和目的地支持同樣的文本樣式屬性,放下的文本應(yīng)該保持它原來的字體,打印字型,大小和其他屬性。除此之外,被放下的文本應(yīng)該采用目的地的樣式。

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.

考慮提供一個精細(xì)、直觀的方式來選擇退出當(dāng)用戶不能馬上回滾拖放。一個分享型app,例如,在提交放下的內(nèi)容之前可能呈現(xiàn)一個中間分享表單。這個分享表單可以提供一種方式來提供額外內(nèi)容比如一條狀態(tài)信息,同時也提供取消按鈕。當(dāng)一張照片被拖進(jìn)一個分享的照片流時照片展覽這種行為。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容