很可惜 T 。T 您現(xiàn)在還不是作者身份，不能自主發(fā)稿哦～
如有投稿需求，請把文章發(fā)送到郵箱tougao@appcpx.com，一經(jīng)錄用會有專人和您聯(lián)系
咨詢?nèi)绾纬蔀榇河鹱髡哒埪?lián)系：鳥哥筆記小羽毛（ngbjxym）
雖然對于UX設(shè)計師來說拖放是一種常見交互方式，但在使用時仍會遇到一些問題。因此在使用拖放交互前，需要仔細考慮拖放的使用流程和使用場景。
根據(jù)官方定義，“在圖形用戶界面，拖放事件就是點擊一個虛擬對象,并將其拖動到其他位置或到另一個虛擬物體的動作?！蓖戏挪僮魈峁┝艘环N與現(xiàn)實世界一樣的方式來獲取和移動元素，這種擬態(tài)性使得具有拖放交互作用的用戶界面易于理解和使用。
自從GUI出現(xiàn)以來，拖放操作就已經(jīng)存在，并被大多數(shù)用戶熟悉；它是一種直接操作，特別適用于對象的分組、排序、移動或調(diào)整大小。
雖然對于UX設(shè)計師來說拖放是一種常見交互方式，但是仍會遇到問題，因此需要仔細考慮該交互的用戶流程和使用場景。
在介紹如何進行拖放操作之前，讓我們從鼠標(biāo)用戶的角度介紹四種常見的拖放模式。
這是最直接的拖放模式之一，面對一個有序列表時，用戶可以更改列表項順序；用戶使用鼠標(biāo)單擊并按住以獲取列表項，然后將鼠標(biāo)移至要放置該項的位置；放開鼠標(biāo)按鈕，即可放下選項。
面對幾個不同的項目列表時，用戶可以從一個列表中選擇一個項目并將其移至另一個列表；這在看板風(fēng)格的交互中很常見，用戶通過將項目從一個存儲看版移動到另一個存儲看版來更改任務(wù)的狀態(tài)。
在制圖和設(shè)計軟件中很常見，常用于圖形編輯，這種類型的拖放操作使用戶可以在二維畫布上放置和調(diào)整對象的大小。
拖放通常還用于調(diào)整對象的寬度或高度的大小，例如調(diào)整表格列的寬度或行的高度。
我們可以發(fā)現(xiàn)，拖放所使用的所有交互模式可以分為兩種主要類型：移動對象和調(diào)整對象大小。
移動對象：例如，將文件圖標(biāo)拖到垃圾箱圖標(biāo)上，從而導(dǎo)致相應(yīng)文件被刪除。
調(diào)整對象大?。豪?，將列分隔符向右移動會使該表的列變寬，或繪圖軟件中移動錨點更改所繪制圖形的外觀。
用戶如何知道何時開始拖動？狀態(tài)反饋是一個很好的指標(biāo)。以下為拖放的四個狀態(tài)：
懸停時：與所有直接操作交互一樣，需要在屏幕上顯示提示項，例如懸停時的光標(biāo)變化等。
按下時（單擊）：在啟動交互時，用戶需要使用鼠標(biāo)或觸摸手勢（單擊鼠標(biāo)或長按）來獲取對象。也有其他技術(shù)可以實現(xiàn)這一狀態(tài)，在VR環(huán)境中可以使用語音對話抓取物體，例如選擇左邊書籍。
拖動時：用戶在保持選中對象（如，通過持續(xù)按下鼠標(biāo)按鈕）的同時，繼續(xù)將指示設(shè)備（鼠標(biāo)，手指等）移動到某個所需目標(biāo)，這是 “拖動”部分。
放置時：最后，用戶通過釋放鼠標(biāo)等操作取消選擇對象。放置后操作應(yīng)立即生效并狀態(tài)可見，以此提高可用性。
1）抓柄圖標(biāo)
抓握手柄圖標(biāo)表示該元素可以進行拖放，用戶無需完全單擊抓手柄圖標(biāo)。
但是，拖拽圖標(biāo)通常比較隱喻，并不像設(shè)計師所想的那樣被大眾熟知，拖放圖標(biāo)樣式種類有很多，缺乏一致性使用戶難以識別這些圖標(biāo)的含義。
拖拽圖標(biāo)通常還有指示移動方向的作用，對于調(diào)整大小，握柄圖標(biāo)則不同：例如，列之間的一條垂直線，或右下角的一對對角線。
2）光標(biāo)變化
在鼠標(biāo)驅(qū)動的界面中，光標(biāo)更改也可以指示用戶拖放：當(dāng)用戶將鼠標(biāo)懸停在可以拖放的對象上時，光標(biāo)更改形狀以指示單擊將啟動反饋。
光標(biāo)圖標(biāo)不同系統(tǒng)的標(biāo)準(zhǔn)也不同。在Mac電腦上，標(biāo)準(zhǔn)箭頭光標(biāo)將變?yōu)榘咨灼媸謽邮剑瑧彝r，白色米奇手呈打開狀；按住并拖動時，白色米奇手呈閉合狀；Windows使用白色四角箭頭圖標(biāo)進行拖放操作，但抓取時不會更改圖標(biāo)。
請注意，在Mac或Windows上移動窗口時，不會發(fā)生這些光標(biāo)更改。它們僅適用于應(yīng)用程序或網(wǎng)站內(nèi)的對象拖拽。
在抓取之后調(diào)整大小時，可以使用稍有不同的縱橫光標(biāo)圖標(biāo)。
調(diào)整一維（寬或高）大小，將鼠標(biāo)懸停在分隔符上時，光標(biāo)將變?yōu)檠刂粋€軸方向的箭頭；調(diào)整兩個維度（寬和高）大小時，將鼠標(biāo)懸停在對象的底部邊緣時，光標(biāo)將變?yōu)閷羌^，指示可以在兩個方向上調(diào)整對象大小。
一旦用戶“抓取”了將要拖放的對象，就需要以下兩種類型的反饋：
反饋對象被“抓取”時；
反饋對象將要發(fā)生 “掉落”時。
獲取對象的反饋通常需要與屏幕上默認(rèn)的其他類似對象有區(qū)別，可以包括以下內(nèi)容：
賦予其輪廓或?qū)Ρ壬?/p>
使其樣式看起來呈現(xiàn)在其他項目“上方”（如，陰影）；
利用視覺偏移，例如使其縮進或傾斜；
使獲取對象呈半透明狀。
當(dāng)拖動文件時（例如，將其上傳或移動到其他位置），光標(biāo)通常保持不變，但是需要顯示該文件縮小的、半透明的“重影”預(yù)覽圖像；此圖像表明文件已被拖動，并且重影需要足夠清晰，這有助于防止用戶意外拖動錯誤文件。
特別是在使用拖放操作對項目列表進行重新排序時，重要的是要表現(xiàn)背景對象在用戶釋放項目之前已經(jīng)移開了；這個簡短的動畫 預(yù)覽了釋放光標(biāo)時將發(fā)生的情況，并使動作感覺自然。
與其立即在其他位置重新繪制其他對象，不如使用短暫的動畫（約100 ms）來顯示它向新位置移動，以使用戶能夠感知這些對象正在進行物理操縱。
動畫預(yù)覽的最復(fù)雜的地方在于確定何時觸發(fā)運動：當(dāng)抓取的對象的邊緣與對象重疊時，或者當(dāng)鼠標(biāo)光標(biāo)的位置與另一個對象重疊時，該對象應(yīng)該開始移動嗎？其實最自然的方法是，被拖動對象的中心與另一個對象的邊緣重疊時開始重新排列。
如果無法準(zhǔn)確判斷光標(biāo)移動到屏幕上的精確位置，那么拖放操作的效率就會降低，解決這一問題的方法是，通過模擬將對象捕捉到位的磁效應(yīng)，即使用戶尚未完全獲取目標(biāo)也是如此；例如，文件拖放至上傳區(qū)可以在其邊界之外稍微處于激活狀態(tài)，使用戶可以在鼠標(biāo)到達該位置之前釋放操作。
在用戶將文件完全拖動到文件上傳器的邊框內(nèi)之前，放置區(qū)域?qū)⒆優(yōu)榛顒訝顟B(tài)；紅色虛線是活動放置區(qū)域的可視化視圖，該區(qū)域延伸到放置區(qū)域的可見邊界之外，用戶看不到它；該解決方案有效地增加了著陸區(qū)域的面積，并提供了磁力的感覺，它還可以防止錯誤并加速拖放交互。
另外，請注意要拖動的文件的半透明圖像，它為操作提供了視覺反饋；但這不能作為有效的防錯措施，因為圖標(biāo)太小無法確定移動的是哪個文件。
使用磁效應(yīng)時，您需要通過在拖動對象位于著陸區(qū)域內(nèi)時顯示視覺樣式，來向用戶清楚地指示放置區(qū)域何時處于活動狀態(tài)。
幾種常用的磁性樣式包括放置區(qū)域周圍的虛線邊框（常見于文件上傳時），光標(biāo)移到放置區(qū)域附近時著陸區(qū)域上方出現(xiàn)的突出樣式或動畫，表示用戶釋放之前需要拖動到何處。
拖放操作可能很難在觸摸屏上實現(xiàn)，因為它們?nèi)鄙賾彝顟B(tài)。此外，由于胖手指問題，您需要確?？赏蟿訉ο缶哂兄辽?cm x 1cm的位置用于拖動，并且手指不能覆蓋任何重要的反饋，例如突出顯示的“抓起”狀態(tài)。
另一個重要的原因是，必須通過使用幾毫秒的時間延遲來區(qū)分點擊，劃動和抓起，并提供清晰的反饋說明已抓取元素。
在移動設(shè)備上提供拖放反饋的一種方法是使用觸覺。一個細微的觸覺“微妙的震動”可以表明一個對象已被抓取，或一個對象已被拖動到放置區(qū)域上。
還可以檢測觸摸持續(xù)時間判斷用戶是否要滾動或抓取元素。
激活拖動：如果用戶觸摸并按住可拖動組件上的相同位置，請激活拖動。
滑動時忽略：如果觸摸持續(xù)時間很短，我們可以猜測用戶正在滾動。
由于在觸摸屏上不存在類似更改光標(biāo)的懸停指示符，因此建議僅在以下情況下使用拖放：有明確的證據(jù)（可用性測試等研究）表明用戶希望進行拖放操作，并且沒有降低類似剪切和粘貼等其他交互成本時。
取消觸摸屏上的拖放操作可能需要增加交互步驟，但是降低了發(fā)生錯誤的可能性；設(shè)計師應(yīng)該優(yōu)先考慮應(yīng)用總體的可用性，而不是簡單地計算點擊次數(shù)。
拖放有時候并不是最好的選擇，尤其是執(zhí)行任務(wù)的距離過長時；如果空間不足，用戶可能需要重新放置鼠標(biāo)或在觸摸屏上調(diào)整手指的位置；因此，會導(dǎo)致用戶將物品放在錯誤的位置，然后重新開始操作。
拖放本質(zhì)上是物理交互，所以需要了解用戶的心理模型來判斷用戶將要執(zhí)行的操作，以確保真的需要使用拖放；例如，在可用性測試期間，觀察用戶是否嘗試拖放對象。
為了使拖放盡可能有效，請使用適當(dāng)?shù)闹甘痉?，例如手柄圖標(biāo)和懸停狀態(tài)的光標(biāo)更改，在整個交互過程中提供清晰的反饋，確保狀態(tài)可見。
參考文章：
https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
https://www.nngroup.com/articles/drag-drop/
-END-
本文為作者獨立觀點，不代表鳥哥筆記立場，未經(jīng)允許不得轉(zhuǎn)載。
《鳥哥筆記版權(quán)及免責(zé)申明》 如對文章、圖片、字體等版權(quán)有疑問，請點擊 反饋舉報
我們致力于提供一個高質(zhì)量內(nèi)容的交流平臺。為落實國家互聯(lián)網(wǎng)信息辦公室“依法管網(wǎng)、依法辦網(wǎng)、依法上網(wǎng)”的要求，為完善跟帖評論自律管理，為了保護用戶創(chuàng)造的內(nèi)容、維護開放、真實、專業(yè)的平臺氛圍，我們團隊將依據(jù)本公約中的條款對注冊用戶和發(fā)布在本平臺的內(nèi)容進行管理。平臺鼓勵用戶創(chuàng)作、發(fā)布優(yōu)質(zhì)內(nèi)容，同時也將采取必要措施管理違法、侵權(quán)或有其他不良影響的網(wǎng)絡(luò)信息。
一、根據(jù)《網(wǎng)絡(luò)信息內(nèi)容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護法》等法律法規(guī)，對以下違法、不良信息或存在危害的行為進行處理。
1. 違反法律法規(guī)的信息，主要表現(xiàn)為：
1)反對憲法所確定的基本原則；
2)危害國家安全，泄露國家秘密，顛覆國家政權(quán)，破壞國家統(tǒng)一，損害國家榮譽和利益；
3)侮辱、濫用英烈形象，歪曲、丑化、褻瀆、否定英雄烈士事跡和精神，以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽、榮譽；
4)宣揚恐怖主義、極端主義或者煽動實施恐怖活動、極端主義活動；
5)煽動民族仇恨、民族歧視，破壞民族團結(jié)；
6)破壞國家宗教政策，宣揚邪教和封建迷信；
7)散布謠言，擾亂社會秩序，破壞社會穩(wěn)定；
8)宣揚淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪；
9)煽動非法集會、結(jié)社、游行、示威、聚眾擾亂社會秩序；
10)侮辱或者誹謗他人，侵害他人名譽、隱私和其他合法權(quán)益；
11)通過網(wǎng)絡(luò)以文字、圖片、音視頻等形式，對未成年人實施侮辱、誹謗、威脅或者惡意損害未成年人形象進行網(wǎng)絡(luò)欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法規(guī)禁止的其他內(nèi)容；
2. 不友善：不尊重用戶及其所貢獻內(nèi)容的信息或行為。主要表現(xiàn)為：
1)輕蔑：貶低、輕視他人及其勞動成果；
2)誹謗：捏造、散布虛假事實，損害他人名譽；
3)嘲諷：以比喻、夸張、侮辱性的手法對他人或其行為進行揭露或描述，以此來激怒他人；
4)挑釁：以不友好的方式激怒他人，意圖使對方對自己的言論作出回應(yīng)，蓄意制造事端；
5)羞辱：貶低他人的能力、行為、生理或身份特征，讓對方難堪；
6)謾罵：以不文明的語言對他人進行負面評價；
7)歧視：煽動人群歧視、地域歧視等，針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊；
8)威脅：許諾以不良的后果來迫使他人服從自己的意志；
3. 發(fā)布垃圾廣告信息：以推廣曝光為目的，發(fā)布影響用戶體驗、擾亂本網(wǎng)站秩序的內(nèi)容，或進行相關(guān)行為。主要表現(xiàn)為：
1)多次發(fā)布包含售賣產(chǎn)品、提供服務(wù)、宣傳推廣內(nèi)容的垃圾廣告。包括但不限于以下幾種形式：
2)單個帳號多次發(fā)布包含垃圾廣告的內(nèi)容；
3)多個廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內(nèi)容；
4)多次發(fā)布包含欺騙性外鏈的內(nèi)容，如未注明的淘寶客鏈接、跳轉(zhuǎn)網(wǎng)站等，誘騙用戶點擊鏈接
5)發(fā)布大量包含推廣鏈接、產(chǎn)品、品牌等內(nèi)容獲取搜索引擎中的不正當(dāng)曝光；
6)購買或出售帳號之間虛假地互動，發(fā)布干擾網(wǎng)站秩序的推廣內(nèi)容及相關(guān)交易。
7)發(fā)布包含欺騙性的惡意營銷內(nèi)容，如通過偽造經(jīng)歷、冒充他人等方式進行惡意營銷；
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內(nèi)容審核的廣告內(nèi)容。
4. 色情低俗信息，主要表現(xiàn)為：
1)包含自己或他人性經(jīng)驗的細節(jié)描述或露骨的感受描述；
2)涉及色情段子、兩性笑話的低俗內(nèi)容；
3)配圖、頭圖中包含庸俗或挑逗性圖片的內(nèi)容；
4)帶有性暗示、性挑逗等易使人產(chǎn)生性聯(lián)想；
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適；
6)炒作緋聞、丑聞、劣跡等；
7)宣揚低俗、庸俗、媚俗內(nèi)容。
5. 不實信息，主要表現(xiàn)為：
1)可能存在事實性錯誤或者造謠等內(nèi)容；
2)存在事實夸大、偽造虛假經(jīng)歷等誤導(dǎo)他人的內(nèi)容；
3)偽造身份、冒充他人，通過頭像、用戶名等個人信息暗示自己具有特定身份，或與特定機構(gòu)或個人存在關(guān)聯(lián)。
6. 傳播封建迷信，主要表現(xiàn)為：
1)找人算命、測字、占卜、解夢、化解厄運、使用迷信方式治病；
2)求推薦算命看相大師；
3)針對具體風(fēng)水等問題進行求助或咨詢；
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失，包括通過占卜方法問婚姻、前程、運勢，東西寵物丟了能不能找回、取名改名等；
7. 文章標(biāo)題黨，主要表現(xiàn)為：
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來誘導(dǎo)用戶；
2)內(nèi)容與標(biāo)題之間存在嚴(yán)重不實或者原意扭曲；
3)使用夸張標(biāo)題，內(nèi)容與標(biāo)題嚴(yán)重不符的。
8.「飯圈」亂象行為，主要表現(xiàn)為：
1)誘導(dǎo)未成年人應(yīng)援集資、高額消費、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網(wǎng)絡(luò)水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點」、制造話題等形式干擾輿論，影響傳播秩序
9. 其他危害行為或內(nèi)容，主要表現(xiàn)為：
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導(dǎo)未成年人不良嗜好影響未成年人身心健康的；
2)不當(dāng)評述自然災(zāi)害、重大事故等災(zāi)難的；
3)美化、粉飾侵略戰(zhàn)爭行為的；
4)法律、行政法規(guī)禁止，或可能對網(wǎng)絡(luò)生態(tài)造成不良影響的其他內(nèi)容。
二、違規(guī)處罰
本網(wǎng)站通過主動發(fā)現(xiàn)和接受用戶舉報兩種方式收集違規(guī)行為信息。所有有意的降低內(nèi)容質(zhì)量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當(dāng)一個用戶發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將依據(jù)相關(guān)用戶違規(guī)情節(jié)嚴(yán)重程度，對帳號進行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當(dāng)涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號，或者濫用多個帳號發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將加重處罰。
三、申訴
隨著平臺管理經(jīng)驗的不斷豐富，本網(wǎng)站出于維護本網(wǎng)站氛圍和秩序的目的，將不斷完善本公約。
如果本網(wǎng)站用戶對本網(wǎng)站基于本公約規(guī)定做出的處理有異議，可以通過「建議反饋」功能向本網(wǎng)站進行反饋。
(規(guī)則的最終解釋權(quán)歸屬本網(wǎng)站所有)