如何設(shè)計體驗感非常好的app拖拽操作?

五一假期的時候沉迷動森,除了游戲機制,更是被其中細膩的交互細節(jié)打動。


比如釣魚時根據(jù)魚的大小不同,手柄會有不同程度的震動反饋;幾乎跟所有家具、裝飾互動,如打開魚缸的燈、使用馬桶等等;


還有就是布置自己的家時,可以進入編輯模式,通過操作按鈕+搖桿,拖拽家具到心儀的位置……等等細節(jié)操作起來簡直不要太爽!

這一波爽爽的拖拽體驗,讓我想來分析看看,在沒有實體搖桿和按鈕的手機屏幕上,如何設(shè)計讓拖拽操作的體驗更優(yōu)。

本文主要從以下幾個方面展開:

1、拖拽操作的幾個關(guān)鍵狀態(tài)

2、拖拽操作的常見應(yīng)用場景及案例分析

3、拖拽操作的設(shè)計關(guān)鍵點


一、關(guān)鍵狀態(tài)

拖拽是自 GUI 出現(xiàn)以來就存在的操作方式,也是一種常見的直接操作(direct manipulation),也就是用戶對對象進行操作時可以直接地、可視化地看到效果。

生活中最常見的就是拖拽文件,將其從源文件夾移動到目標文件夾。


這個過程中有幾個關(guān)鍵的狀態(tài)節(jié)點:

1、選中操作對象,在本例子中,即選中要移動的文件

2、拖動操作對象、但未離開原位置范圍,本例中,是拖動了要移動的文件、但并未離開源文件夾

3、操作對象離開原位置范圍、未接觸目標位置,本例中,是文件離開源文件夾,但未進入目標文件夾

4、操作對象進入目標位置,本例中,是文件進入目標文件夾

5、拖拽結(jié)束,更新對象位置或其他屬性,本例中,是文件歸變?yōu)槟繕宋募A目錄下


上面這種拖拽,原位置、目標位置是分開的、是不同的對象;還有一種拖拽,原位置、目標位置本質(zhì)上是同一對象,見下圖:


如滑動滑塊時,操作對象是滑塊,原位置、目標位置性質(zhì)是相同的,都是滑軌上的點。


二、常見應(yīng)用場景

關(guān)于拖拽,用戶的心智模型其實很清晰,就是把某個對象從原位置拖動到目標位置。由基礎(chǔ)的含義引申出來,就產(chǎn)生了許多拓展應(yīng)用場景:

如調(diào)整一組對象中,每個對象的位置,就完成了對該組對象的排序;調(diào)整對象邊界的位置,其實就是調(diào)整對象的大小……

下面將對各個場景,進行舉例分析:

1、基礎(chǔ)場景——調(diào)整位置

拖拽調(diào)整位置,在移動端也是最常見的拖拽場景。比如iOS的輔助觸控和微信、QQ的懸浮窗,用戶都可以拖拽它們來調(diào)整它們吸附在屏幕邊緣的具體位置:


有所不同的是,設(shè)計者會根據(jù)具體的產(chǎn)品場景、懸浮窗形態(tài)等,來決定可以放置懸浮窗的范圍。例如,iOS的懸浮窗在未啟用時,呈現(xiàn)半透明狀態(tài),用戶進行一定適應(yīng)后,它對操作、瀏覽信息的干擾較少,所以對它的位置限制也就較少,可以放置在上下左右任一方位的屏幕邊緣。


而微信、QQ的懸浮窗樣式,是不透明的、帶有一定內(nèi)容信息的,對信息瀏覽有一定的遮擋和干擾,對它位置的限制相對就較多。


2、延伸1.0——選擇內(nèi)容、排序、調(diào)整大小、調(diào)整方向


1.0是對調(diào)整位置的基礎(chǔ)延伸,拖拽的基本含義不變,還是改變對象的位置,如選擇內(nèi)容范圍,其實就是調(diào)整選擇內(nèi)容的邊界的位置:


再比如排序,是對調(diào)整一組對象中某個或某些對象的位置:


調(diào)整大小,是調(diào)整邊界節(jié)點的位置:


調(diào)整方向,是調(diào)整控制點的位置:


3、延伸2.0——對**進行**操作

說以下場景是延伸2.0,是因為他們在原來調(diào)整位置的語義基礎(chǔ)上,增加了功能賦予的含義,把前面說的拖拽移動位置時的「目標位置」定義為執(zhí)行某功能。舉個設(shè)計師再熟悉不過的例子:


將某個圖層拖拽到刪除按鈕上,是將「目標位置」定義為刪除功能,拖拽的含義是將刪除功能賦予該圖層,即對該圖層進行刪除操作。

移動端應(yīng)用此心智模型的場景也很多,如:


在微信朋友圈刪除圖片、在小米手機主屏幕上刪除App,都是將可刪除對象拖拽到刪除按鈕上,意為刪除/卸載該內(nèi)容。

在游戲場景中,為了配合復(fù)雜的規(guī)則邏輯,產(chǎn)生了一系列交互手勢,拖拽的應(yīng)用也被賦予了許多新含義。如在爐石傳說移動端:


簡單來說,將卡片拖拽到某個對象上,可以用該卡牌對該隨從進行攻擊,是將「目標位置」定義為執(zhí)行卡片的攻擊。

iPad OS、Smartisan OS中對多任務(wù)操作的支持,也是用拖拽來實現(xiàn)的:


它根據(jù)應(yīng)用場景,在移動位置的基礎(chǔ)語義上增加了復(fù)制/附加的語義,即把一段內(nèi)容由原App1拖拽到目標App2,就將該內(nèi)容復(fù)制/附加到目標App2中。

還有一些拓展操作,對目標位置要求不那么精確,只要是脫離了原位置范圍即可。如下圖:


QQ中拖拽消息氣泡至一定距離,松手后就可以清除該氣泡,(并有煙花消失的動效);


聊天界面拖拽圖片至聊天區(qū)域,就可以發(fā)送圖片。


爐石傳說中,玩家將手中的卡片拖拽到戰(zhàn)場區(qū)域,表示將隨從牌置入戰(zhàn)場。


在AR應(yīng)用中,從模型庫中拖拽模型到平面上,就意味著放置模型。

以上都是將原位置范圍以外的區(qū)域作為目標位置,并將「對象進入目標位置」定義為某種操作。


三、設(shè)計關(guān)鍵點

1、用視覺符號明確地告訴用戶:可以拖拽「我」呀

支持拖拽交互的界面中,可以適當(dāng)增加「抓柄」、「拖放」相關(guān)語義的圖標,如下圖:


目前有這幾種常見的圖標,但市面上的App并沒有十分統(tǒng)一的圖標樣式,設(shè)計師可根據(jù)語義理解來繪制,并且避免與自家App中的其他圖標過于接近(如上圖中第三個圖標與漢堡導(dǎo)航的圖標就有些接近)。


如果拖拽操作有明確的方向要求,也可以利用圖標體現(xiàn)出來。


2、拖拽中,被拖拽對象有明確的狀態(tài)變化——你拽的是「我」呀

一旦用戶抓取了要拖放的對象,就需要明確地反饋給用戶——你拖拽的是「我」,我正在跟隨著你的手指移動。這需要讓拖拽中的對象與其他對象看起來有明顯差異,可以用改變以下屬性來做到:

讓它在視覺上處于其他對象的上層,如加大投影

改變背景或描邊顏色

改變大小

改變透明度

使其傾斜或偏移

如Trello中,通過讓卡片傾斜、加大它的投影,來體現(xiàn)拖拽中的狀態(tài):


小米中拖拽某App時,icon會變大:


3、拖拽中,相關(guān)對象要有對應(yīng)反饋——可以把「我」拖拽到這兒


用戶拖拽對象移到目標位置的過程中,可能與不同的目標位置產(chǎn)生碰撞,這過程中,要預(yù)示用戶這個對象可以落在這兒。除了上述的5點表現(xiàn)方式,還可以用下面的方式表現(xiàn):

閃爍

出現(xiàn)參考線、震動提示

改變原本順序,出現(xiàn)「鬼影」——展示將對象釋放在此的預(yù)期效果,使用半透明或占位色塊的形式


如Instagram故事中添加標簽時,拖動標簽對齊、刪除時會有一定的震動反饋,表示貼紙拖拽中的狀態(tài)。


在視頻App中,可以對應(yīng)展示用戶拖拽到的時間點、關(guān)鍵幀的畫面預(yù)覽,讓用戶決定是否要拖拽到此位置。


4、注意胖手指問題

在移動端進行精細操作時,胖手指問題無論如何都是無法回避的。在進行拖拽交互的設(shè)計時,要注意:

保證對象中可拖拽的熱區(qū)盡量大


  • 如果它真的不大,那就把它做大!

QQ拖拽語音進度條就是一個很好的例子。QQ中的語音消息條高度很窄、短語音的消息條寬度也很窄,如果只允許在氣泡范圍內(nèi)拖拽,用戶拖拽的時候手極有可能遮擋住消息條,根本看不到拖拽到什么位置,要小心翼翼地試探著操作。


為此,設(shè)計師將拖拽的熱區(qū)擴大,由氣泡本身擴大到邊緣區(qū)域。


另外,在最初的氣泡長度規(guī)則下,時長較短的語音氣泡寬度很窄,十分不易于拖拽,而數(shù)據(jù)上又顯示10s以下的短語音占比非常高。對此,設(shè)計者改變了氣泡寬度原有的線性變換規(guī)律,讓短語音氣泡的寬度適當(dāng)變寬,以方便拖拽操作。


  • 如果不好做大,那至少讓它看起來大!


安卓版微信中,用戶選擇文字時,會增加放大鏡效果,讓用戶可以更清楚地看到拖拽選擇的內(nèi)容。

拖拽的過程中,盡量讓手指不會遮擋到用戶尋找目標區(qū)域的視線

這點可以結(jié)合來看,把整體的操作熱區(qū)做大,或者讓用戶可以放大查看,又或者像前面舉例的視頻App中,將目標區(qū)域從原來的位置遷移到用戶的視野中、脫離可能遮擋的位置,都是不錯的方式。

保證手指可以將對象精確地拖拽到目標區(qū)域

當(dāng)目標區(qū)域較小時,可以適當(dāng)放大區(qū)域,增加磁性,當(dāng)對象靠近目標區(qū)域時就將其吸附進去。或者像視頻App中,設(shè)置關(guān)鍵幀作為錨點,讓用戶對目標位置有更明確的感知,從而便于操作。


減少一切可能對拖拽操作產(chǎn)生干擾的因素


還是QQ中,一旦觸發(fā)拖拽,聊天頁面內(nèi)的其他操作都會被屏蔽,從而減少操作「噪音」,讓用戶可以在全屏范圍內(nèi)自由拖拽,同時也便于看清拖拽的位置。


美圖秀秀中拖拽調(diào)整貼紙時,也有類似的設(shè)計:拖拽貼紙中,即便手指超出了圖片范圍,也是在拖拽調(diào)整貼紙大小,不會觸發(fā)其他操作。


5、讓拖拽過程更有趣

這點就考量設(shè)計師們的腦洞與小細節(jié)了,像bilibili中,向不同方向滑動進度時,小電視上眼睛看向的方向是不同的,靈動而有趣:


6、不是所有拖拽操作都適合應(yīng)用在移動端的

說了這么多拖拽的設(shè)計思路,最后要提醒一點,以為在PC端廣泛應(yīng)用的拖拽操作,并不一定都適合應(yīng)用在移動端,比如Gmai的移動郵件:

PC端支持拖拽移動郵件,而移動端是通過菜單來交互。

也就是說,交互方式的選擇不是一招鮮吃遍天的,是要設(shè)計師根據(jù)平臺特性、應(yīng)用場景、用戶習(xí)慣等等,尋找操作效率高、體驗佳的方式。



劃重點

本文對移動端的拖拽操作進行了拆解:

操作狀態(tài)有選中、拖拽中(未離開原位置、剛離開原位置、接觸目標位置)、拖拽完成5種;

常見應(yīng)用場景:從基礎(chǔ)的調(diào)整位置,到基于位置調(diào)整語義的選擇內(nèi)容、排序、調(diào)整大小、調(diào)整方向,到拓展語義后的對**進行**操作;

設(shè)計時應(yīng)注意利用視覺符號告知用戶可拖拽、拖拽中被拖拽對象狀態(tài)明確變化、拖拽中相關(guān)對象要有對應(yīng)反饋、用擴大熱區(qū)和剝離目標位置等方式規(guī)避胖手指問題、注意拖拽操作的效率與適應(yīng)性等問題。





參考引文

Drag–and–: How to Design for Ease of Use  http://dwz.date/aEBu 

《你不知道的“小元素”,有大用處!》http://dwz.date/aEBv 

《點滴匠心,聲入人心》http://dwz.date/aEBy            

《放置類AR體驗框架和設(shè)計建議 (上篇)》http://dwz.date/aEB3

每天更新,
全站高品質(zhì)素材免費下載!