用戶交互(6)-拖放

拖放

用戶可以通過一根手指將照片示惊,文本急迂,或者其它內(nèi)容從一個地方拖拽到另一個地方匿值,然后松掉手指將其放下,從而移動或者復制這些內(nèi)容边酒。

點擊或者長按選擇的內(nèi)容使其逐漸浮起并黏住用戶的手指经柴。當拖拽內(nèi)容時,動畫和視覺路徑會定義可能的目的地墩朦。系統(tǒng)也會顯示一個徽章來說明無法拖拽的情況坯认,或者復制內(nèi)容而不是移動它。

源位置和目標位置

拖放涉及到將選中的內(nèi)容從源位置移動到另一個目標位置氓涣。這兩個位置可以在同一個容器內(nèi)牛哺,比如像文本視圖,或者在不同的容器內(nèi)劳吠,拆分視窗兩側(cè)的文本視窗引润。在筆記中,用戶可以拖拽選中的文本到同一個筆記中的新位置痒玩。在提醒中淳附,用戶可以將列表中的個人提醒拖拽到另外一個列表中。

在iPad中凰荚,源位置和目標位置可能存在于不同的應用程序中燃观,需要支持跨程序交互,例如從Safari瀏覽器的網(wǎng)頁中拖拽一張圖片到郵箱中的新信息中便瑟。拖拽內(nèi)容時缆毁,用戶可以通過多任務,退出主界面或者從屏幕底部向上滑動以顯示偷酵浚靠點來訪問另外一個程序脊框。

在應用程序之間拖拽內(nèi)容往往會導致內(nèi)容的復制而非移動。

支持拖放

拖拽是一種高效直觀的功能践啄,用戶希望在系統(tǒng)中能夠普遍執(zhí)行浇雹。如果你的應用程序當中包含或者生成文本,照片屿讽,視屏昭灵,音頻或者其他用戶可能想要移動,復制或者插入的內(nèi)容伐谈,那么就需要支持拖放烂完。

為所有可選擇和可編輯的內(nèi)容提供拖放。可選擇的內(nèi)容應該是可拖拽的诵棵,可編輯的內(nèi)容應該是可添加的抠蚣。同時,要保證這些區(qū)域支持復制和粘貼履澳。

需要時允許內(nèi)容被拖拽到控件上嘶窄。通常來說怀跛,配置控件允許數(shù)據(jù)輸入或選擇的控件(比如像文本域)來接受拖拽釋放的內(nèi)容。

任何時候盡量使用標準的文本視圖和文本域柄冲。這些系統(tǒng)提供元素包括了內(nèi)置拖放功能吻谋。

支持多項拖拽提高效率。在很多應用程序中羊初,用戶可以通過一根手指拖拽單個項目滨溉,同時,使用另外一根手指點擊選中另外的項目长赞。這些選中的內(nèi)容會一起移動晦攒,并且看似黏在最初拖拽的那根手指上。用戶可以成組的拖拽內(nèi)容并且把它們釋放在理想的目標位置得哆。比如說脯颜,主界面上支持多個應用程序圖標同時選中并且一次性被拖拽到同個文件夾中。有些應用程序中提供允許多項優(yōu)先拖拽的選項贩据。

確定應用程序中的拖拽是否應該導致移動或者復制栋操。通常來說,源位置和目標位置在同個容器中時(在同個文件中拖拽文字)饱亮,移動是有意義的矾芙,當不在同一個容器中時(在兩個文件或應用程序當中拖拽),復制是有意義的近上。然而剔宪,事實并非總是如此。畢竟拖拽應該直觀地表現(xiàn)壹无。在提醒的列表之間拖拽單個提醒是移動而非復制葱绒,因為用戶就是這樣希望的。在應用程序之間拖放內(nèi)容往往導致復制斗锭。

任何時候都盡可能的允許用戶撤銷拖放操作地淀。通常地,當用戶不小心將內(nèi)容釋放到錯誤的目標位置時岖是,他們應該能夠撤銷操作使程序回到之前的狀態(tài)帮毁。也就是說,釋放的內(nèi)容能夠移動豺撑,并且如果它是從應用程序中的其他位置移過來的作箍,就移回原來的位置。

考慮啟用彈性加載前硫。使用彈性加載,用戶可以激活某些控件荧止,如按鈕或分段控制器屹电,通過將選中的內(nèi)容拖拽到控件上并短暫暫停且不釋放內(nèi)容阶剑。例如,在郵箱中危号,選擇的信息能被拖拽到導航欄上的“返回”按鈕以到達郵箱層級中的其他位置牧愁。不要彈性加載當做激活控件的唯一方法。請把它當做一個可被發(fā)現(xiàn)的裝飾外莲。通常情況下猪半,彈性加載的空間也應該響應敲擊手勢。

提供拖拽內(nèi)容

必要時自定義拖拽項目預覽偷线。通常來說磨确,用戶手指下展示的預覽應該是被拖拽內(nèi)容的半透明樣式。樣式中提供上下文声邦,指示拖拽正在進行乏奥,并且允許用戶查看拖拽內(nèi)下的目的地。

盡可能提供拖拽數(shù)據(jù)的多種顯示形式亥曹,按照保真度的最高到最低順序排列邓了。例如,當提供線段藝術(shù)時媳瞪,應用程序可以按照這種順序提供PDF的矢量顯示骗炉,透明的無損的PNG圖像和不透明的有損JEPG圖像。這樣的話蛇受,目的地就可以選擇導入的最高質(zhì)量的顯示效果句葵。

合適的時候,請將定制對象的本地版本顯示為最豐富的數(shù)據(jù)形式龙巨。例如笼呆,一款支持用戶拖拽圖表的應用程序應該首先顯示本地圖表對象。然而旨别,也應該為不支持圖表對象的應用程序提供如圖片版本圖表這樣的選擇诗赌。

當應用程序內(nèi)容的傳輸費時或資源密集時,實行文件提供擴展秸弛。即使您的應用程序不再運行铭若,文件提供擴展能夠管理傳輸進度并且保證傳輸完成。需要注意的是递览,用戶釋放內(nèi)容之后傳輸進度才開始叼屠。

當應用程序的內(nèi)容傳輸需要時間時,請?zhí)峁┻M度信息绞铃。如果需要下載內(nèi)容或者大型文件的復制需要時間的話镜雨,請?zhí)峁┻M度信息。至少需要提供內(nèi)容的總?cè)萘慷酰@樣目標可以計算出剩余時間并且顯示合適的進度指示器荚坞。

接受被釋放的內(nèi)容

使用視覺顯示來定義潛在目標并且預覽釋放內(nèi)容的效果挑宠。顯示強調(diào),插入點指示器和動畫都是定義可能目標的好方法颓影。當內(nèi)容拖拽到上方時各淀,視窗能夠輕微地閃爍并且改變顏色,或者段落會分開為拖拽的圖片留出空間诡挂。當屏幕上有不止一個可能的目標時碎浇,一次只定義一個。當源容器和目標容器相同時璃俗,可能就不需要顯示強調(diào)奴璃,除非內(nèi)容被完全拖拽出源容器并再重新拽入時。當內(nèi)容被釋放或不再定位在目標上時旧找,請確保取消顯示強調(diào)溺健。

合適的時候,自動滑動目的地中的內(nèi)容钮蛛。但內(nèi)容被拖拽出目的地的邊界時鞭缭,你的應用程序也許需要確定是否滾動目的地中的內(nèi)容或者允許用戶將內(nèi)容繼續(xù)拖拽至另一個完全不同的目的地。如果你的應用程序允許用戶繼續(xù)拖拽魏颓,需要定義一個區(qū)域岭辣,當拖拽項目定位到該區(qū)域上方時會引發(fā)自動滾動。例如甸饱,當內(nèi)容被拖拽到正文的頂部或者底部時沦童,郵箱中的冗長草稿信息會自動滾動。標準的文本視窗和文本域會自動采用這種行為叹话。

提取并顯示釋放內(nèi)容最豐富的可能的呈現(xiàn)方式偷遗。例如,你的應用程序可能提供幾種圖表的呈現(xiàn)形式驼壶。如果你的應用程序支持圖表氏豌,他可以提取或顯示本地圖表對象。如果你的應用程序不支持圖表热凹,作為替代泵喘,它可以提取或者顯示圖像版本的圖表。

合適的時候般妙,只提取釋放內(nèi)容的相關部分纪铺。例如,在郵件信息中碟渺,如果用戶從聯(lián)系人當中拖拽一個聯(lián)系人到收件人區(qū)域鲜锚,這時就只會使用姓名和郵箱地址,聯(lián)系人的地址信息是不會使用的。

內(nèi)容釋放后芜繁,在表視窗和集中視窗中顯示占位符攒霹。一旦內(nèi)容完成傳輸,占位符能短暫地指示內(nèi)容顯示的位置浆洗。

當釋放內(nèi)容的傳輸需要時間時,請顯示進度集峦。當應用程序之間發(fā)生耗時的傳輸時伏社,系統(tǒng)會默認顯示應用程序模態(tài)警示∷伲考慮自定義進度的顯示方式摘昌,比如說在表視窗和集合視窗的占位符中顯示進度指示器,那么用戶在使用你的應用程序時就不會收到阻礙高蜂。請注意聪黎,用戶釋放內(nèi)容后,傳輸進度才開始备恤。

當釋放的信息啟動進度時稿饰,請?zhí)峁┓答仭?/b>如果用戶在觸發(fā)任務的控件上釋放拖拽的內(nèi)容,如在分享網(wǎng)站上傳視屏露泊,請顯示任務已經(jīng)開始并且告知用戶進度喉镰。

當拖拽內(nèi)容釋放失敗時,請告知用戶惭笑。如果釋放內(nèi)容不能被插入侣姆,可能是因為文件傳輸被打斷了,如果失敗了請告知用戶沉噩。

為釋放文本采用適當?shù)臉邮健?/b>當源內(nèi)容和目標內(nèi)容支持相同的文本屬性時捺宗,釋放內(nèi)容應該保持原來的字體,尺寸以及其他屬性川蒙。否則蚜厉,釋放內(nèi)容要采用目標的樣式。

當用戶不能立即撤銷拖放操作時派歌,考慮提供巧妙的弯囊,直觀的退出方式。例如胶果,在一款分享應用程序中匾嘱,在放入釋放信息之前可能會顯示中間分享表單。這種分享表單能提供一種補充附加內(nèi)容的方法(如狀態(tài)信息)早抠,同時還提供取消按鈕霎烙。當照片被拖拽到分享照片流中時,會顯示這種行為。

原文地址:https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末悬垃,一起剝皮案震驚了整個濱河市游昼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌尝蠕,老刑警劉巖烘豌,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異看彼,居然都是意外死亡廊佩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門靖榕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來标锄,“玉大人,你說我怎么就攤上這事茁计×匣剩” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵星压,是天一觀的道長践剂。 經(jīng)常有香客問我,道長租幕,這世上最難降的妖魔是什么舷手? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮劲绪,結(jié)果婚禮上男窟,老公的妹妹穿的比我還像新娘。我一直安慰自己贾富,他們只是感情好歉眷,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著颤枪,像睡著了一般汗捡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上畏纲,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天扇住,我揣著相機與錄音,去河邊找鬼盗胀。 笑死艘蹋,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的票灰。 我是一名探鬼主播女阀,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼宅荤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了浸策?” 一聲冷哼從身側(cè)響起冯键,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎庸汗,沒想到半個月后惫确,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡蚯舱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年雕薪,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片晓淀。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖盏档,靈堂內(nèi)的尸體忽然破棺而出凶掰,到底是詐尸還是另有隱情,我是刑警寧澤蜈亩,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布懦窘,位于F島的核電站,受9級特大地震影響稚配,放射性物質(zhì)發(fā)生泄漏畅涂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一道川、第九天 我趴在偏房一處隱蔽的房頂上張望午衰。 院中可真熱鬧,春花似錦冒萄、人聲如沸臊岸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽帅戒。三九已至,卻和暖如春崖技,著一層夾襖步出監(jiān)牢的瞬間逻住,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工迎献, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瞎访,地道東北人。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓忿晕,卻偏偏與公主長得像装诡,于是被迫代替她去往敵國和親银受。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345