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.

使用一個(gè)手指榴鼎,一個(gè)用戶可以通過把內(nèi)容從一個(gè)位置拖到另一個(gè)位置區(qū)移動(dòng)或者復(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)容被拖動(dòng)亦渗,動(dòng)畫和可視化暗示表明可能的目的地。不能放下時(shí),或者復(fù)制內(nèi)容而不是移動(dòng)它時(shí)颠焦,系統(tǒng)也會(huì)顯示一個(gè)標(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.

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

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)容時(shí)汗唱,用戶可以通過多任務(wù)訪問另一個(gè)app,離開app來到主屏幕丈攒,或者在屏幕底部向上滑動(dòng)來顯示碼頭哩罪。

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)普遍實(shí)現(xiàn)這種特性识椰。如果你的app包括或者產(chǎn)生文本、照片深碱、視頻腹鹉、音頻或者其他內(nèi)容,用戶想移動(dòng)敷硅、復(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)容。同時(shí)確保你的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.

合適時(shí)讓內(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办绝,用戶可以用一個(gè)手指拖拽一個(gè)item伊约,當(dāng)拖拽時(shí),用另外的手指可以敲擊選中額外的item孕蝉。選中的item一起移動(dòng)屡律,在手指下看上去像疊加的文本。用戶拖放一組items到想要的目的地降淮。例如主屏幕允許多個(gè)app icon被選中一次性拖入一個(gè)文件夾中疹尾。一些app,例如照片骤肛,提供一種選中模式纳本,使選中多個(gè)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)致移動(dòng)還是復(fù)制腋颠。一般情況下繁成,當(dāng)源和目的地是同一個(gè)容器移動(dòng)更好(在一個(gè)文檔中拖放文本),不同容器間適合復(fù)制(在文檔或app之間)淑玫。并不是永遠(yuǎn)這樣巾腕。綜上所述,拖放應(yīng)該表現(xiàn)直觀絮蒿。在提醒中尊搬,在列表拖動(dòng)提醒是移動(dòng)而不是復(fù)制,因?yàn)檫@是用戶期望的行為土涝。拖放內(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)容到錯(cuò)誤的地方時(shí)蜡饵,它們應(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.

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

Providing Dragged Content

提供被拖動(dòng)的內(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)容在用戶手指下是半透明的。這個(gè)表現(xiàn)提供環(huán)境表明一次拖拽正在進(jìn)行趣竣,而且讓用戶在被拖動(dòng)的內(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)提供簡圖時(shí)单匣,你的app可以提供一個(gè)PDF矢量表現(xiàn)夕凝,一個(gè)透明的無損PNG圖片,和一個(gè)失真不透明JPEG圖片户秤,按照這個(gè)順序码秉。那種方式,目的地可以選擇它可以導(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允許用戶拖動(dòng)圖表首先應(yīng)該呈現(xiàn)原生圖表對象堪藐。然后,它應(yīng)該提供可選項(xià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)容是一個(gè)耗時(shí)的或資源集中的事情時(shí)礁竞,實(shí)現(xiàn)一個(gè)文件提供擴(kuò)展。一個(gè)文件提供擴(kuò)展管理傳輸過程和保證它完成杉辙,即使你的app不再運(yùn)行模捂。注意在用戶放下內(nèi)容之前這個(gè)傳輸過程不會(huì)發(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)容需要時(shí)間傳輸時(shí)提供進(jìn)度信息。如果內(nèi)容必須被下載或者大文件需要時(shí)間復(fù)制提供進(jìn)度信息狂男。至少综看,提供內(nèi)容總大小這樣目的地可以計(jì)算還需要多少時(shí)間,展示一個(gè)合適的進(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)容的效果红碑。高亮、插入點(diǎn)指示器和動(dòng)畫都是標(biāo)示可能目的地很好的方式泡垃。一個(gè)視圖可以精細(xì)地閃光和改變顏色隨著內(nèi)容被拖拽到它之上析珊,或者段落可以為拖過來的圖片移出一部分空間。當(dāng)不止一個(gè)可能的目的地在屏幕上蔑穴,一次只標(biāo)示一個(gè)忠寻。如果源和目的容器是同一個(gè)時(shí)高亮也許不必要,除非內(nèi)容被完全拖出源和重新加入它存和。確保高亮被移除當(dāng)內(nèi)容被放下或者不再放在這個(gè)目的地上時(shí)奕剃。

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.

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

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笆载,它可以提取和展示一個(gè)圖片版本的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.

合適時(shí)涯呻,只提取被拖拽內(nèi)容的相關(guān)部分凉驻。例如,如果一個(gè)用戶從通訊錄拖拽一個(gè)聯(lián)系人到一個(gè)郵件信息的收件人欄中复罐,只有名字和有電子郵件地址被用到涝登,而不是聯(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)容被放下之后胀滚。占位符暫時(shí)表明內(nèi)容在完成傳輸之后會(huì)位于哪里趟济。

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)容需要時(shí)間傳輸時(shí)顯示進(jìn)度。默認(rèn)情況咽笼,當(dāng)一個(gè)耗時(shí)的傳輸發(fā)生在app之間時(shí)系統(tǒng)顯示一個(gè)app-遮罩提醒顷编。考慮定制進(jìn)度顯示方式-例如在table和集合視圖里面的占位符顯示進(jìn)度條-所以用戶不會(huì)在使用你的app時(shí)被阻塞剑刑。注意在用戶放下內(nèi)容前傳輸過程不會(huì)發(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)容初始化一個(gè)進(jìn)程時(shí)提供反饋。如果用戶放下內(nèi)容到控制器上開始一個(gè)任務(wù)-例如施掏,上傳一個(gè)視頻到一個(gè)分享站點(diǎn)-顯示這個(gè)任務(wù)已經(jīng)開始同時(shí)讓用戶知道任務(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)容不能被插入其监,也許是因?yàn)橐粋€(gè)文件傳輸被打斷萌腿,通知用戶放下操作失敗了限匣。

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.

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末帆精,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子隧魄,更是在濱河造成了極大的恐慌卓练,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件购啄,死亡現(xiàn)場離奇詭異襟企,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)狮含,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進(jìn)店門整吆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拱撵,“玉大人,你說我怎么就攤上這事表蝙∷┎猓” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵府蛇,是天一觀的道長集索。 經(jīng)常有香客問我,道長汇跨,這世上最難降的妖魔是什么务荆? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮穷遂,結(jié)果婚禮上函匕,老公的妹妹穿的比我還像新娘。我一直安慰自己蚪黑,他們只是感情好盅惜,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著忌穿,像睡著了一般抒寂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上掠剑,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天屈芜,我揣著相機(jī)與錄音,去河邊找鬼朴译。 笑死井佑,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的眠寿。 我是一名探鬼主播躬翁,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼澜公!你這毒婦竟也來了姆另?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤坟乾,失蹤者是張志新(化名)和其女友劉穎迹辐,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體甚侣,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡明吩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了殷费。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片印荔。...
    茶點(diǎn)故事閱讀 37,997評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡低葫,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出仍律,到底是詐尸還是另有隱情嘿悬,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布水泉,位于F島的核電站善涨,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏草则。R本人自食惡果不足惜钢拧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望炕横。 院中可真熱鬧源内,春花似錦、人聲如沸份殿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伯铣。三九已至呻此,卻和暖如春轮纫,著一層夾襖步出監(jiān)牢的瞬間腔寡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工掌唾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留放前,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓糯彬,卻偏偏與公主長得像凭语,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子撩扒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容