av在线免费观看网址,欧美性大战XXXXX久久久√

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

Drag & Drop在PC端的綜述

Y.h

2021-09-08

0 評論 7224 瀏覽 16 收藏

36 分鐘

編輯導讀：拖放交互是PC端較為流行的交互形式，有直觀、學習成本較低的特點，也有低效率、不精準、甚至容易造成身體上的疲勞。本文作者圍繞拖放交互進行了分析，與你分享。

對于拖放交互的研究，之前一直是較為模糊的。我一直認為其是較為基本的交互形式，雖然明白有很多的微交互，但是也沒有系統的去研究過。所以我希望從底層的拖放交互入手進行一個完整的總結。而后，便有這篇文章，希望能為后面的工作打下基礎。若有錯誤，歡迎糾錯謝謝。

一、拖放交互的概述

1. 優缺點

拖放交互是PC端較為流行的交互形式，因為符合真實世界的情況，所以非常符合用戶的心理模型，有直觀、學習成本較低的特點，但是反之也有低效率、不精準、甚至容易造成身體上的疲勞，例如進行長距離的拖放，用戶需要一直點擊著鼠標長距離移動，若失敗了還需要重新開始。所以，針對于拖放的交互，需要保證其有代替的交互形式，例如刪除的“delete”、或者是使用空格+鍵盤方向鍵的形式移動。

刪除-mac

可以使用鍵盤移動的控件-salesforce

2. 拖放的類型

拖放的類型大致分為兩種，第一種針對于物體的大小的改變，即窗口的大小的拉伸或者表格的寬度等；第二種是針對物體的移動，移動也分為應用內移動以及跨應用移動。應用內移動即在單一的應用內，例如修改菜單排序，改變物體分組等，反之，跨應用移動，就是多個應用之間的交互，例如將聊天軟件的文本直接移動帶文本編輯軟件中。針對于被拖放的物體，也分為復制還是單純移動。

Ai的物體大小移動改變

應用內的菜單移動

跨應用的拖放

3. 拖放的過程

針對于整一個拖放的交互流程我自己分為了6個節點：

拖放前的識別
觸發拖放的行為
開始拖放
遇到接受區域
取消拖放的方式
放下拖放

后續對于拖放的交互介紹，我也會按照這六個節點進行闡釋。

二、拖放前的識別

1. icon與文本提示

拖放交互在各個系統中都較為常見，我們在系統軟件中較為常見就是一些文本和圖片等的形式，但是對于其他物件的拖動交互，我們需要讓用戶感知到此物件是可以拖動的。最明顯方式是使用icon的進行提示，但是這些圖標并沒有想象中的那么統一和明確，以下是Norman Group找到的常用的icon。

其中左一的icon與更多的省略號相似，而右一的與漢堡菜單類似（hamburger menu）。最重要的是保證icon在平臺內的統一性以及與其他icon的差異性。與icon較為類似的就是文本提示，直接在物體上進行提示，其中Trello的看板中，需要用戶拖動鏈接去操作欄，用戶點擊send to Trello的鏈接時，其提示會變大以及變色。

Norman Grounp展示的三種icon

Trello的拖放提示

2. Hover展示

Hover在日常交互中作為一個重要的反饋。hover的反饋也分為兩種：

（1）第一種物體自身的反饋，例如增加陰影：material design中若產生卡片的拖放交互，其卡片一定會增加Z軸的高度，視覺上的反饋是就是增加陰影，使卡片在活動高度進行移動、tooltip：有時為了讓用戶快速了解到該區域可以拖動，用戶首次hover到該物體時也會進行提示。

（2）第二種為光標pointer的提示，例如當光標hover到物體時，光標會改變從而作為一個視覺反饋，以代表其可以被拖放，MAC 常常會用到米奇手的形式，而window是會使用一個雙向箭頭代表其可以拖動。針對于pointer的反饋，切記保持統一，盡量使用系統自帶的形式。

卡片的hover，提升Z軸高度到4dp

mac：米奇手；win：雙向箭頭

3. 動效引導

該類交互常用于引導新手用戶或展示新功能中使用。一般在游戲交互上使用較多，當用戶進入游戲界面，可拖動的物體會有偏移并回彈的小動效；或用于移動端的橫向滾動中，在同花順新改版后，用戶進入自選股頁面會有一個向右滑動并回彈的小動效，示意可以拖動。

同花順自選股

4. 切勿濫用pointer反饋

現應用中有很多的對象可以被拖放，所以如果亂用pointer反饋，會造成每當hover到能夠拖動的物體時就出現反饋，會造成頁面的快速變化從而導致用戶的混亂，并且有時在應用中拖放是輔助功能。例如window桌面的文件其可以拖動，但用戶主要還是雙擊打開。如果當光標hover到文件上就是拖動的pointer會讓人造成誤解。所以，這里建議還是不要濫用過pointer反饋，除非對于物體的主要操作就是拖放。

三、觸發拖放行為

1. 鼠標點擊和3像素閾值

我們光標hover在了希望觸發拖放交互的物體上時（源物體），會產生上述的反饋。通常，我們使用鼠標點擊并移動，來觸發拖放的交互行為（鍵盤中常用空格），在有些情況下pointer反饋（mac）的米奇手會從展開變為抓緊。但有些時候一個對象既可以點擊又可以拖放移動，若用戶只有點擊行為，依然容易造成物體在應用內超短距離的移動，這樣會造成界面物體的顫動。所以，我們需要解決這個問題就應該建立拖動的閾值，當鼠標移動超過此閾值才開始觸發拖放行為。在MAC HIG和About face中都設定了3像素的閾值，當移動超過3像素，才開始觸發拖放。

米奇手展開（左一）、抓緊（右一）

《About Face》：3像素元素

2. 觸發時，保持窗口不變

在跨應用的情況下，會存在前后窗口的關系。例如你已經在微信的聊天區域選中了你想要的文字，你回到了word進行了一些文字的編輯，這個時候你想將微信選中的文字拖放進來。這個時候word是你選中的活動窗口，而微信則變成了你的背景窗口。MAC HIG中建議，在背景窗口的選中物體同樣能夠觸發拖放交互，并且觸發以及拖放過程中不會改變窗口狀態（即word 還是活動窗口，微信依舊是背景窗口）。這樣的好處是在跨應用的拖放時，可以保證整體桌面各個窗口的位置、重合關系都不會發生改變，保證前后目標的完整，不會造成拖動的時候因為窗口改動而遮蓋掉你預想接受的區域。較大層面上增加了跨應用拖放過程中的交互體驗。

從背景窗口觸發拖放，不改變窗口狀態

四、開始拖放

1. 實時與非實時

在拖放過程中也會分為兩種類型，實時與非實時的。實時是指：用戶在拖放過程中源物體直接跟著鼠標進行了移動，常用于在某一個特定區域內，物體可以在這個區域內自由移動的情況，例如sketch畫布中物體都是實時移動的。非事實移動是指：用戶在拖放源物體時，源物體自身保持位置不變，會增加一個跟隨鼠標移動的目標物體，例如：在桌面上移動文件夾到回收站中，源物體的自身位置是保持不變的，跟隨鼠標的是一個具有透明度的目標物體。

實時拖放常用于像sketch這樣的操作畫布中，在某一個特定區域的使用，因為這樣會將移動與復制區分的更加明顯；非事實的情況，則常用于更多的跨區域以及跨應用中使用。因為實時的拖放有一種過程中不可撤回的感覺，所以在其他情況下盡可能少用。

非實時移動

2. 非實時：源物體、目標物體、接受區域

對于非實時的拖放，會有三個模塊：源物體、目標物體以及接受區域。正如上文所述，源物體是被選中，被拖動的物體；而拖動過程中跟隨鼠標的是目標物體；接受區域就是目標物體需要拖動到的具體位置，可能是一個區域也可能是一個功能按鈕等，在后續我們會詳細講述。

在拖動過程中，源物體還是會保持點擊后的狀態，而針對于目標物體，Norman Group 提供了四種較為常見的形式：提供一個輪廓或對比色、增加投影、視覺偏移：縮小或者傾斜、半透明。這四種樣式并不是互斥的，可以同時使用。其中半透明的形式較為重要，半透明可以保證目標物體的尺寸大于接受區域的時候不會進行遮蓋。

而以上情況都是常用于單物體的移動，對于多個物體移動時，MAC 中會使用物體的堆疊圖來展示，并且在堆疊圖的左上角增加了紅色badge的數字統計；Window也會有使用同樣方式形成一個正方形的堆疊區域，并且在中心顯示數字統計。

Clarity的設計師，對于目標物體增加紫色

卡片的移動，提升Z軸高度到8dp

Trello：目標物體有物理性質的傾斜

window：半透明的目標物體

MAC：堆疊圖和badge的計數

Window：堆疊圖和badge的計數

3. pointer盡可能保持箭頭

在拖動過程中，鼠標的pointer盡可能保持箭頭。有些場景下，物體在移動過程會保持米奇手的狀態或者其他，但是，我們建議在拖動過程中，保持pointer為箭頭的狀態。

理由如下：

箭頭（arrow）作為系統默認提供的，其具有很好的擴展性，mac和window中會支持其他的相關于箭頭的擴展類型，如Drag coyp的形式就是箭頭增加“?”號，代表復制的意思；
箭頭作為鼠標這個精準操作儀器的默認狀態，其箭頭的含義非常明確，即箭頭左上角的尖端位置便是應該觸發的區域，其包含了精準的屬性，而當使用其他pointer時，例如米奇手就很難界定其精準的區域。所以，針對拖放交互來說，其接受區域是需要被精準點擊的，所以我們建議盡量保持箭頭的狀態。

MAC：pointers類型

Win：復制移動的pointers類型

五、遇到接受區域

1. 提供接受區域的視覺反饋

拖放的最終目標就是將目標物體移動到接受區域，對于接受區域也必須有明確的視覺反饋來提示用戶移動的是否正確，此區域是否能夠接受目標物體等。有時候接受區域是一個容器范圍，例如一個文檔；有時候接受區域可能是一個功能按鈕（導出、打印等等）或者是一個文件夾等等，所以每一個接受區域都應該有自己的視覺反饋。如果頁面內的模塊、交互較為單一、明確，例如Visio的畫布，用戶非常明確可以將形狀拖放到畫布中，可不增加視覺反饋，以免過多反饋造成頁面的快速閃動。

針對于接受區域的接受情況，我也分為三種：接受、不接受、部分接受。后續我也會按照這三個部分進行詳細的闡述。

2. 接受

接受：即接受區域能夠放下目標物體。同理最為重要的就是明確的視覺反饋。以下我羅列了6種反饋的形式：高亮、直觀預覽、橫向插入指示器、縱向插入指示器、增加圖片清晰度、增加pointer。

1）高亮

高亮的形式較為常見。常用于拖放到文件夾或者某按鈕功能時使用，對于小范圍的容器也可以嘗試使用，例如chrome中將文本信息拖放到地址欄。當接受區域具有較大范圍時，請注意謹慎使用，以免過多反饋造成頁面快速閃動。

MAC：應用成組時的高亮

Chrome：小容器的高亮

2）直接預覽

直接預覽也是一個較為常見的反饋形式，常用于對于當前物體排序的一種反饋。mac中launch的軟件排列就是一個做明顯的例子。直接預覽是一把雙刃劍，其優點就是反饋直接、明確；其缺點就是直接的反饋會導致在拖放過程中頁面結構產生快速的調整，造成用戶分心混亂，所以，適時的添加delay以及觸發反饋的方式是很重要的。

MAC：launch軟件排序

3）橫向插入指示器

橫向插入指示器，算是直接預覽的變體，其也適用于重新排序，更多用于插入的使用場景。在移動過程中，其不直接對于頁面進行直接的重新排版，而是在已有的內容之間插入一條橫向的指示器，以反饋其拖放后的位置。其既有較好的視覺反饋，又不會在拖放過程中影響當前的布局，是一個較好的反饋形式。

MAC：側導航插入

Window：桌面移動

4）縱向插入指示器

縱向的插入指示器，與橫向類似，但其主要用于文本編輯器的場景，但是其本質還是在于容器默認排序的方式，文本編輯是從左至右排序，應該使用縱向的插入指示器，而window的桌面是從上至下的排布則默認應該是橫向的指示器。

文本編輯：字段移動

3. 不接受

當接受區域，不接受所拖放的物體時，也必須要體現出適當的視覺反饋，而不是僅僅在可以接受的時候展示視覺提示。mac和windows的系統都會使用一個禁止符號來表示不可放置。在About face中提出，“光標（pointer）的反饋必須在視覺上表明源對象（物體）”，其希望將兩者的視覺反饋分開，光標的視覺反饋都代表源物體、目標物體，而接受區域自身來展示是否接受的視覺反饋。

禁止拖放：mac（左）、Windows（右）

4. 部分接受

部分接受針對于多物件拖放。上文也提到了目標物體上會存在一個計數的badge，當接受區域僅能夠接收部分的目標物體時，請實時更新計數以表示多少物體能夠接受。

5. 觸發條件

針對上述的各種接受區域的視覺反饋，其觸發條件基本有三種情況，分別是：（1）光標觸發、（2）目標物體觸發、（3）增加觸發區域

1）光標觸發

光標觸發，很好理解就是以光標為依據觸發反饋。這個觸發方式是最為常見的，光標是一個很好判定的標準，具有精確操作的屬性（這也是為什么要保持箭頭的原因），用戶可以很好的利用光標箭頭左上角的區域來判定現在所處于的位置，對接受區域較小的時候是很好的標準。在一些樹狀控件的拖放層級、文件拖放到文件夾等場景下都是較好的選擇。

光標觸發：未觸發（左一、中間），觸發（右一）

2）目標物體觸發

目標物體觸發，一般使用于直接預覽的反饋場景，常用的觸發基準為物體的中線，Norman Group提到如果使用目標物體的邊線來觸發的話會導致反饋的過度敏感；如果使用光標來衡量，會導致響應過慢，特別針對長距離以及大物體移動的時候，會導致鼠標移動距離過大造成疲憊；使用物體的中線作為衡量標準，較為符合整體的自然交互形式。其中mac的launch移動就是按照應用的logo中線為衡量標準的。

邊線觸發

光標觸發

中線觸發

3）增加觸發區域

增加觸發區域：針對于小范圍的接受區域，根據菲茲定律（Fitts law）我知道移動時間與接受區域的大小有關系，針對于小范圍的接受區域，我們應該增加觸發區域，一種方案是可以依靠增加觸發區域從而觸發接受區域的視覺反饋；另一種方案是利用增加的觸發區域快速將鼠標移動到接受區域已提供一種自動吸附的功能。

增加觸發區域以提供視覺反饋

6. pointer的變化

當目標物體懸浮在接受區域的時候，pointer會顯示出默認狀態下此接受區域對于目標物體是移動還是復制，若是移動的情況下，可以利用鍵盤的快捷鍵快速的切換成復制，常用是ctrl、option等不同軟件、系統都有一定的區別。mac中都是以箭頭擴展的形式，而window中的桌面文件拖放時，使用更加明確的文本提示。

Windows：移動文件

Windows：復制文件

7. 目標物體的變化

目標物體應該展現出在接受區域拖放結束后的樣子。當源物體在源區域的展現形式與接受區域的展現形式不同時候，應該更隨著hover的區域而變化（需要有delay）。在HIG中講到，圖片被拖放到文本編輯中，目標物體應該在hover到編輯器時，展示出其在文本編輯器中的樣子。mac在拖放文件時，目標物體在hover側導航以及具體文件夾時，會根據當前的接受區域展示的樣式而改變自身樣式。

圖片移動到文本編輯器

文件移動到側導航（上）、移動到具體文件夾（下）

8. 接受區域的移動

接受區域的移動：其適用于當前窗口僅顯示了部分區域的情況，例如：滾動顯示的文件夾、一個巨大的畫布等，用戶在移動目標物體的時候，如果當前接受區域的顯示內容與用戶的預期不符，我們應該提供在hover狀態下能夠同時移動接受區域的功能。常用的觸發方式就是hover到接受區域的邊緣，接受區域應該提供自動移動的功能。其中優化的方式還有，利用靠近邊緣的距離來調整移動速度（越近越快）、利用停留在觸發區域的時間（越久越快）等等。

《About Face》：指出windows的文件夾區域的滾動

9. 改變窗口次序與喚醒窗口

改變窗口次序，用于跨應用拖放。上文提到在觸發拖放的時候不應該調整窗口次序，但是一旦已經拖放到接受區域的時候，為了展示更加完整的接受區域以免被其他窗口遮擋，我們應該調整窗口次序，將接受區域所在窗口調整為活動窗口。但需要注意的是為了避免在拖放路徑中改變非接受區域的窗口，所以觸發窗口次序改變需要提供較長時間hover的delay。喚醒窗口，用于拖放的接受區域未顯示的場景下，例如接受區域隱藏在程序塢中，或開一個文件等，同樣的喚醒窗口的觸發也需要提供較長時間hover的delay。

10. 目標物體的精準移動

目標物體的精準移動，用于需要精準對齊的應用。常用于圖像編輯的應用中，《About Face》中提出鼠標的精確滾動，可以利用快捷鍵加鼠標的形式，讓鼠標在移動過程中保持精準移動，例如：鼠標移動10個像素的位置，光標僅移動1像素，但是這樣形式的精準滾動也會造成容易在釋放過程中，造成少量像素的偏移，這里同樣可以設置合理移動閾值所解決。精準移動的模式較為復雜，智能吸附、像素吸附、網格吸附、根據鼠標移動速度調整光標移動的像素等，本文不做展開，同時精準移動也可以利用方向鍵以及方向鍵+shift等形式替代。

六、取消拖放

1. 取消拖放的2種方式

對于在拖放過程，當用戶在沒有抬起左鍵的時候，都有權利結束此次拖放行為（即使結束了也可以撤銷），常用的有兩種形式（1）鍵盤的Esc（2）合擊（chord-clicking）

1）鍵盤的Esc

Esc是常規的退出按鍵，也比較符合用戶的心理模型。按下Esc，應該能夠保證本次拖放行為的結束，并恢復到原來的樣子。

2）合擊（chord-clicking）

即鼠標的左鍵右鍵同時按下，在拖放過程中，因為左鍵的按鈕一直保持按下的狀態，這時按下右鍵產生合擊，從而結束拖放行為，這樣的交互形式較為晦澀難懂。

七、放下目標物體

1. 更新選中態

當拖放結束后，目標物體被放置在接受區域，應該保持目標物體的選中以表示此次交互結束，之前的源物體（若是復制即還存在）的選中狀態應該保持消失。

在HIG中提及到，多容器拖放的事件：“When selected content is dragged to another container, it should become selected in the new location and any previous selection should be deselected.” 在多容器拖放后，應該保持接受區域的目標物體保持選中狀態，并刪除之前任何源物體的選中狀態。但在實際的mac中的兩個文件夾中的復制拖放，并沒有遵循此規定。個人認為還是應該還是遵循此規定，應該把持目標物體的選中示意著拖放結束這一個完美的線形流程的完結，若想要進行下一次拖放則需要重新選擇源對象進行拖放。

Mac：文件夾復制拖放結束后，并未選中目標對象

2. 當拖放后啟動流程，需提供額外反饋

當拖放結束后，目標物體啟動了新的流程，例如打印、上傳、下載等，這時需要提供額外的反饋來表示其啟動的進程。例如：百度識圖，其在拖放圖片結束后會產生識別的額外反饋。

百度識圖：接受區域

百度識圖：拖放后的額外反饋

3. 提取可接收信息

HIG提出：如果拖放的目標物體包含了多重信息，但是接受區域的僅能夠接受部分信息，可以提取可接收信息放入到接受區域。例如將通訊錄的個人信息拖放到郵件地址中，郵件僅能接受姓名以及郵件地址，其他的真實地址等信息就會被剔除。

4. 拖放失敗，提供動畫反饋

當目標對象移動到不可接受的區域并釋放，其產生的結果應該與上述提到的取消拖放的結果相同，同時需要一個動畫效果來反饋給用戶拖放失敗的信息：目標物體應該會移動回源目標。HIG中將這種動畫成為“zoom back”。

5. 確保操作可逆，若不可逆提供反饋

當拖放操作完成后，確保整個流程是可逆的。提供撤回以及重做的功能，幫助用戶解決錯誤。若因為業務原因無法進行撤銷，在拖放結束后應該進行合理的提示。

MAC：不可撤回的提示

八、總結：優化設計

本次對拖放進行了一個詳細的信息梳理形成一份類似于研究報告的綜述文檔。正如前言所說，本次拖放的總結一個是彌補了我對拖放整體的交互細節的空缺，另一個部分就是我希望能夠基于這個總結，去針對業務的畫布進行一個交互上的整體優化以及形成一個簡單的規范。

而對于其他拖放場景的優化也可以參考本次的綜述文檔，例如在收集參考資料的時候也看到了saleforce提供的五種拖放控件（https://salesforce-ux.github.io/dnd-a11y-patterns/#/canvas?_k=nlllw7），其使用過程中會發現很明顯的微交互上的缺陷，例如示意拖放的icon不統一性、移動過程中接受區域沒有視覺反饋等等的問題，都可以進行優化。

感謝大家能夠觀看到這里，謝謝。