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

五一假期的時(shí)候沉迷動(dòng)森,除了游戲機(jī)制,更是被其中細(xì)膩的交互細(xì)節(jié)打動(dòng)。


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


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

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

本文主要從以下幾個(gè)方面展開:

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

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

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


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

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

生活中最常見的就是拖拽文件,將其從源文件夾移動(dòng)到目標(biāo)文件夾。


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

1、選中操作對(duì)象,在本例子中,即選中要移動(dòng)的文件

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

3、操作對(duì)象離開原位置范圍、未接觸目標(biāo)位置,本例中,是文件離開源文件夾,但未進(jìn)入目標(biāo)文件夾

4、操作對(duì)象進(jìn)入目標(biāo)位置,本例中,是文件進(jìn)入目標(biāo)文件夾

5、拖拽結(jié)束,更新對(duì)象位置或其他屬性,本例中,是文件歸變?yōu)槟繕?biāo)文件夾目錄下


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


如滑動(dòng)滑塊時(shí),操作對(duì)象是滑塊,原位置、目標(biāo)位置性質(zhì)是相同的,都是滑軌上的點(diǎn)。


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

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

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

下面將對(duì)各個(gè)場(chǎng)景,進(jìn)行舉例分析:

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

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


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


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


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


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


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


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


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


3、延伸2.0——對(duì)**進(jìn)行**操作

說以下場(chǎng)景是延伸2.0,是因?yàn)樗麄冊(cè)谠瓉碚{(diào)整位置的語義基礎(chǔ)上,增加了功能賦予的含義,把前面說的拖拽移動(dòng)位置時(shí)的「目標(biāo)位置」定義為執(zhí)行某功能。舉個(gè)設(shè)計(jì)師再熟悉不過的例子:


將某個(gè)圖層拖拽到刪除按鈕上,是將「目標(biāo)位置」定義為刪除功能,拖拽的含義是將刪除功能賦予該圖層,即對(duì)該圖層進(jìn)行刪除操作。

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


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

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


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

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


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

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


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


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


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


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

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


三、設(shè)計(jì)關(guān)鍵點(diǎn)

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

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


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


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


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

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

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

改變背景或描邊顏色

改變大小

改變透明度

使其傾斜或偏移

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


小米中拖拽某App時(shí),icon會(huì)變大:


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


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

閃爍

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

改變?cè)卷樞?,出現(xiàn)「鬼影」——展示將對(duì)象釋放在此的預(yù)期效果,使用半透明或占位色塊的形式


如Instagram故事中添加標(biāo)簽時(shí),拖動(dòng)標(biāo)簽對(duì)齊、刪除時(shí)會(huì)有一定的震動(dòng)反饋,表示貼紙拖拽中的狀態(tài)。


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


4、注意胖手指問題

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

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


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

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


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


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


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


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

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

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

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

當(dāng)目標(biāo)區(qū)域較小時(shí),可以適當(dāng)放大區(qū)域,增加磁性,當(dāng)對(duì)象靠近目標(biāo)區(qū)域時(shí)就將其吸附進(jìn)去?;蛘呦褚曨lApp中,設(shè)置關(guān)鍵幀作為錨點(diǎn),讓用戶對(duì)目標(biāo)位置有更明確的感知,從而便于操作。


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


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


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


5、讓拖拽過程更有趣

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


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

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

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

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



劃重點(diǎn)

本文對(duì)移動(dòng)端的拖拽操作進(jìn)行了拆解:

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

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

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





參考引文

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

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

《點(diǎn)滴匠心,聲入人心》http://dwz.date/aEBy            

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

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