如何设计体验感非常好的app拖拽操作?

五一假期的时候沉迷动森,除了游戏机制,更是被其中细腻的交互细节打动。


比如钓鱼时根据鱼的大小不同,手柄会有不同程度的震动反馈;几乎跟所有家具、装饰互动,如打开鱼缸的灯、使用马桶等等;


还有就是布置自己的家时,可以进入编辑模式,通过操作按钮+摇杆,拖拽家具到心仪的位置……等等细节操作起来简直不要太爽!

这一波爽爽的拖拽体验,让我想来分析看看,在没有实体摇杆和按钮的手机屏幕上,如何设计让拖拽操作的体验更优。

本文主要从以下几个方面展开:

1、拖拽操作的几个关键状态

2、拖拽操作的常见应用场景及案例分析

3、拖拽操作的设计关键点


一、关键状态

拖拽是自 GUI 出现以来就存在的操作方式,也是一种常见的直接操作(direct manipulation),也就是用户对对象进行操作时可以直接地、可视化地看到效果。

生活中最常见的就是拖拽文件,将其从源文件夹移动到目标文件夹。


这个过程中有几个关键的状态节点:

1、选中操作对象,在本例子中,即选中要移动的文件

2、拖动操作对象、但未离开原位置范围,本例中,是拖动了要移动的文件、但并未离开源文件夹

3、操作对象离开原位置范围、未接触目标位置,本例中,是文件离开源文件夹,但未进入目标文件夹

4、操作对象进入目标位置,本例中,是文件进入目标文件夹

5、拖拽结束,更新对象位置或其他属性,本例中,是文件归变为目标文件夹目录下


上面这种拖拽,原位置、目标位置是分开的、是不同的对象;还有一种拖拽,原位置、目标位置本质上是同一对象,见下图:


如滑动滑块时,操作对象是滑块,原位置、目标位置性质是相同的,都是滑轨上的点。


二、常见应用场景

关于拖拽,用户的心智模型其实很清晰,就是把某个对象从原位置拖动到目标位置。由基础的含义引申出来,就产生了许多拓展应用场景:

如调整一组对象中,每个对象的位置,就完成了对该组对象的排序;调整对象边界的位置,其实就是调整对象的大小……

下面将对各个场景,进行举例分析:

1、基础场景——调整位置

拖拽调整位置,在移动端也是最常见的拖拽场景。比如iOS的辅助触控和微信、QQ的悬浮窗,用户都可以拖拽它们来调整它们吸附在屏幕边缘的具体位置:


有所不同的是,设计者会根据具体的产品场景、悬浮窗形态等,来决定可以放置悬浮窗的范围。例如,iOS的悬浮窗在未启用时,呈现半透明状态,用户进行一定适应后,它对操作、浏览信息的干扰较少,所以对它的位置限制也就较少,可以放置在上下左右任一方位的屏幕边缘。


而微信、QQ的悬浮窗样式,是不透明的、带有一定内容信息的,对信息浏览有一定的遮挡和干扰,对它位置的限制相对就较多。


2、延伸1.0——选择内容、排序、调整大小、调整方向


1.0是对调整位置的基础延伸,拖拽的基本含义不变,还是改变对象的位置,如选择内容范围,其实就是调整选择内容的边界的位置:


再比如排序,是对调整一组对象中某个或某些对象的位置:


调整大小,是调整边界节点的位置:


调整方向,是调整控制点的位置:


3、延伸2.0——对**进行**操作

说以下场景是延伸2.0,是因为他们在原来调整位置的语义基础上,增加了功能赋予的含义,把前面说的拖拽移动位置时的「目标位置」定义为执行某功能。举个设计师再熟悉不过的例子:


将某个图层拖拽到删除按钮上,是将「目标位置」定义为删除功能,拖拽的含义是将删除功能赋予该图层,即对该图层进行删除操作。

移动端应用此心智模型的场景也很多,如:


在微信朋友圈删除图片、在小米手机主屏幕上删除App,都是将可删除对象拖拽到删除按钮上,意为删除/卸载该内容。

在游戏场景中,为了配合复杂的规则逻辑,产生了一系列交互手势,拖拽的应用也被赋予了许多新含义。如在炉石传说移动端:


简单来说,将卡片拖拽到某个对象上,可以用该卡牌对该随从进行攻击,是将「目标位置」定义为执行卡片的攻击。

iPad OS、Smartisan OS中对多任务操作的支持,也是用拖拽来实现的:


它根据应用场景,在移动位置的基础语义上增加了复制/附加的语义,即把一段内容由原App1拖拽到目标App2,就将该内容复制/附加到目标App2中。

还有一些拓展操作,对目标位置要求不那么精确,只要是脱离了原位置范围即可。如下图:


QQ中拖拽消息气泡至一定距离,松手后就可以清除该气泡,(并有烟花消失的动效);


聊天界面拖拽图片至聊天区域,就可以发送图片。


炉石传说中,玩家将手中的卡片拖拽到战场区域,表示将随从牌置入战场。


在AR应用中,从模型库中拖拽模型到平面上,就意味着放置模型。

以上都是将原位置范围以外的区域作为目标位置,并将「对象进入目标位置」定义为某种操作。


三、设计关键点

1、用视觉符号明确地告诉用户:可以拖拽「我」呀

支持拖拽交互的界面中,可以适当增加「抓柄」、「拖放」相关语义的图标,如下图:


目前有这几种常见的图标,但市面上的App并没有十分统一的图标样式,设计师可根据语义理解来绘制,并且避免与自家App中的其他图标过于接近(如上图中第三个图标与汉堡导航的图标就有些接近)。


如果拖拽操作有明确的方向要求,也可以利用图标体现出来。


2、拖拽中,被拖拽对象有明确的状态变化——你拽的是「我」呀

一旦用户抓取了要拖放的对象,就需要明确地反馈给用户——你拖拽的是「我」,我正在跟随着你的手指移动。这需要让拖拽中的对象与其他对象看起来有明显差异,可以用改变以下属性来做到:

让它在视觉上处于其他对象的上层,如加大投影

改变背景或描边颜色

改变大小

改变透明度

使其倾斜或偏移

如Trello中,通过让卡片倾斜、加大它的投影,来体现拖拽中的状态:


小米中拖拽某App时,icon会变大:


3、拖拽中,相关对象要有对应反馈——可以把「我」拖拽到这儿


用户拖拽对象移到目标位置的过程中,可能与不同的目标位置产生碰撞,这过程中,要预示用户这个对象可以落在这儿。除了上述的5点表现方式,还可以用下面的方式表现:

闪烁

出现参考线、震动提示

改变原本顺序,出现「鬼影」——展示将对象释放在此的预期效果,使用半透明或占位色块的形式


如Instagram故事中添加标签时,拖动标签对齐、删除时会有一定的震动反馈,表示贴纸拖拽中的状态。


在视频App中,可以对应展示用户拖拽到的时间点、关键帧的画面预览,让用户决定是否要拖拽到此位置。


4、注意胖手指问题

在移动端进行精细操作时,胖手指问题无论如何都是无法回避的。在进行拖拽交互的设计时,要注意:

保证对象中可拖拽的热区尽量大


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

QQ拖拽语音进度条就是一个很好的例子。QQ中的语音消息条高度很窄、短语音的消息条宽度也很窄,如果只允许在气泡范围内拖拽,用户拖拽的时候手极有可能遮挡住消息条,根本看不到拖拽到什么位置,要小心翼翼地试探着操作。


为此,设计师将拖拽的热区扩大,由气泡本身扩大到边缘区域。


另外,在最初的气泡长度规则下,时长较短的语音气泡宽度很窄,十分不易于拖拽,而数据上又显示10s以下的短语音占比非常高。对此,设计者改变了气泡宽度原有的线性变换规律,让短语音气泡的宽度适当变宽,以方便拖拽操作。


  • 如果不好做大,那至少让它看起来大!


安卓版微信中,用户选择文字时,会增加放大镜效果,让用户可以更清楚地看到拖拽选择的内容。

拖拽的过程中,尽量让手指不会遮挡到用户寻找目标区域的视线

这点可以结合来看,把整体的操作热区做大,或者让用户可以放大查看,又或者像前面举例的视频App中,将目标区域从原来的位置迁移到用户的视野中、脱离可能遮挡的位置,都是不错的方式。

保证手指可以将对象精确地拖拽到目标区域

当目标区域较小时,可以适当放大区域,增加磁性,当对象靠近目标区域时就将其吸附进去。或者像视频App中,设置关键帧作为锚点,让用户对目标位置有更明确的感知,从而便于操作。


减少一切可能对拖拽操作产生干扰的因素


还是QQ中,一旦触发拖拽,聊天页面内的其他操作都会被屏蔽,从而减少操作「噪音」,让用户可以在全屏范围内自由拖拽,同时也便于看清拖拽的位置。


美图秀秀中拖拽调整贴纸时,也有类似的设计:拖拽贴纸中,即便手指超出了图片范围,也是在拖拽调整贴纸大小,不会触发其他操作。


5、让拖拽过程更有趣

这点就考量设计师们的脑洞与小细节了,像bilibili中,向不同方向滑动进度时,小电视上眼睛看向的方向是不同的,灵动而有趣:


6、不是所有拖拽操作都适合应用在移动端的

说了这么多拖拽的设计思路,最后要提醒一点,以为在PC端广泛应用的拖拽操作,并不一定都适合应用在移动端,比如Gmai的移动邮件:

PC端支持拖拽移动邮件,而移动端是通过菜单来交互。

也就是说,交互方式的选择不是一招鲜吃遍天的,是要设计师根据平台特性、应用场景、用户习惯等等,寻找操作效率高、体验佳的方式。



划重点

本文对移动端的拖拽操作进行了拆解:

操作状态有选中、拖拽中(未离开原位置、刚离开原位置、接触目标位置)、拖拽完成5种;

常见应用场景:从基础的调整位置,到基于位置调整语义的选择内容、排序、调整大小、调整方向,到拓展语义后的对**进行**操作;

设计时应注意利用视觉符号告知用户可拖拽、拖拽中被拖拽对象状态明确变化、拖拽中相关对象要有对应反馈、用扩大热区和剥离目标位置等方式规避胖手指问题、注意拖拽操作的效率与适应性等问题。





参考引文

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

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

《点滴匠心,声入人心》http://dwz.date/aEBy            

《放置类AR体验框架和设计建议 (上篇)》http://dwz.date/aEB3

每天更新,
全站高品质素材免费下载!