iOS11人機交互指南-交互-05:拖拽 Drag and Drop

拖拽

使用單個手指,用戶可以通過將內容從一個位置拖動到另一個位置,來移動或復制所選擇照片、文本或其他內容,然后抬起手指將其放下。

觸摸并按住所選內容使其看起來像是用戶手指下的玩物。隨著內容被拖動,動效和視覺提示向用戶暗示可能的目的地。系統還會顯示一個不能丟棄的標記,否則會復制內容,而不是移動內容。


來源和目標

拖拽能將所選內容從源位置移動到目標位置。這些位置可以在同一個視圖中,如文本視圖;或者在不同的視圖中,如分欄視圖中的文本視圖。例如,在筆記中,用戶可以將選定的文本拖動到同一筆記中的新位置。在提醒中,用戶可以將單個提醒從一個列表中拖放到另一個列表中。

在 iPad 上,來源和目標位置也可以存在于不同的應用程序中,從而實現跨應用程序交互。例如將 Safari 中的網頁照片拖到郵件中。拖動內容時,用戶可以通過多任務訪問另一個應用程序、退回主屏幕,或者從屏幕底部向上滑動以顯示 Dock。

注:在應用程序之間拖拽內容只是復制而并非移動。


支持拖拽

拖拽是一種高效、直觀的功能,用戶期望在整個系統中都能使用。如果應用包含文本、照片、視頻、音頻或其他可能要操作的內容,諸如:復制、插入,應用應該支持拖拽。


可選擇和可編輯的內容即可拖拽

可選擇的內容應該是可拖拽的,可編輯內容應該允許刪減,確保應用支持在這些區域中能復制、粘貼。


如果適用,允許控件上刪減內容

通常允許數據輸入或選擇的控件,如文本字段,可以刪減內容。


盡可能使用標準文本視圖和文本字段

系統內置的可拖拽元素,有關相關指導,請參閱文本視圖和文本視圖。

考慮多項拖拽

在許多應用中,用戶可以用一根手指拖動單個項目。如果需要拖拽多個項目,一根手指按住,用另一個手指點擊選擇多個項目,會將所選項目一起移動,并顯示最初按壓的手指下面。然后,用戶將項目作為組拖曳并將其放在所需的目的地上。例如,主屏幕允許選擇多個應用程序圖標并將其拖動到一個文件夾中。某些應用(如照片)提供選擇模式,可在拖動之前選擇多個項目。

告知用戶在移動還是在復制

通常當源和目標視圖相同(拖動文檔中的文本)時,移動是有意義的;當它們不同(在文檔之間或在應用之間拖動)時,復制是有意義的。但事實并非如此,用戶期待有提示性信息,告知他們在列表之間拖拽會移動而不是復制,并告知他們在應用間拖拽會復制。


如可能,允許撤消拖拽

用戶時常會無意中拖拽錯誤的內容,他們應該可以撤消這次錯誤操作。也就是說,刪除的內容應該被刪掉,如果拖拽錯了會還原。


考慮啟用跳躍加載

通過跳躍加載,用戶所拖拽的內容會暫時處于待命狀態,而不是放棄本次操作。例如在郵件中,所選郵件可以拖動到導航欄的 “后退” 按鈕上,以到達郵箱層次結構中的其他位置。當然,切勿使用跳躍加載作為唯一方法激活控件,而是作為一個有趣的點綴。在大多數情況下,跳躍加載的控件也應該響應點擊手勢。


提供拖拽內容

如果必要,自定義拖拽預覽

一般來說,用戶手指下顯示的預覽應該是拖拽內容半透明表示,并允許用戶查看拖拽內容下的目標。


提供從高質量到低質量的多重表示

例如,當提供行展示時,應用可以按順序提供 PDF 矢量預覽圖,具有透明度的無損PNG圖像,和無透明度的有損JPEG圖像。這樣,目標可以選擇可以導入的最高質量的表示。


將自定義對象的本地版本作為最豐富的數據形式

例如,允許用戶拖拽圖表的應用,應首先顯示本地圖表對象,那么它應該為不支持圖表對象的應用提供類似圖表的替代圖像版本。


非即刻完成請提供進度

如果不能立即完成,如復制大型文件,請提供進度信息,包含內容大小、算剩余時間、進度指標。


接受移入內容

用視覺線索識別潛在目標并預覽效果

突出顯示插入點,用指示器和動效都是識別可能目標的好方法。當內容被拖拽時,可以巧妙??地閃爍視圖并改變顏色,或者將段落移開,為拖動的內容騰出空間。如果屏幕上有多個可能的目的地,一次識別一個。如果來源和目標視圖相同,可以突出顯示就不太必要,除非內容被完全拖出源,然后重新進入,確保在內容移入或不再位于目標上方時突出顯示。


適時自動滾動目標內容

當內容被拖拽到目標邊界之外時,應用可能需要確定是滾動目標內容,還是允許用戶繼續拖拽到完全不同的目標。如果應用允許用戶繼續拖拽,請考慮拖拽的項目位于其上方時,定義自動滾動的區域。例如,當內容被拖拽到主體區域的頂部或底部時,郵件中的草稿消息列表將自動滾動。標準文本視圖和文本字段自動采用此行為。


提取并顯示移入內容多種可能表示

如果應用程序支持圖表,可以提取并顯示本地圖表對象。如果應用不支持圖表,可以提取并顯示圖表的圖像版。


僅提取移入內容的相關信息

例如,用戶將聯系人從列表拖到郵件消息中的收件人字段,只會使用姓名和電子郵件地址,而不是聯系人地址信息。


完成后顯示占位符

占位符在完成移入后,暫時指出內容駐留在哪里。


如果移入內容需要時間,顯示進度

默認情況下,當應用之間發生耗時的傳輸時,系統會顯示應用警報模式。考慮自定顯示進度,例如在表格視圖或集合視圖中占位符的位置顯示進度指示器,在這段時間內用戶不會被阻止使用應用。請注意,在用戶移入內容之前,傳輸不會開始。


移入內容時提供反饋

如果用戶將內容移入到啟動任務的控件上,例如將視頻上傳到共享站點 - 顯示任務已經開始,并向用戶通知進度。


通知用戶移入失敗

移入內容可能由于傳輸中斷而無法完成,通知用戶移入失敗。


文本使用合適樣式

當來源和目標支持相同樣式的文本屬性時,移入的文本應保持原始字體屬性。否則移入的文本應該采用目標風格。


考慮一種巧妙直觀的方式,以便無法立即撤消時選擇退出

例如,將照片拖動到共享照片流中,共享應用可能會在發布移入內容前呈現中間分享表。這份表可以提供額外內容(如狀態消息),同時還提供取消按鈕。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,002評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,400評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,136評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,714評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,452評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,818評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,812評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,997評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,552評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,292評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,510評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,721評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,121評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,429評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,235評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,480評論 2 379

推薦閱讀更多精彩內容