恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
你设计的拖拽操作,有让用户爽到吗?
0.0°
2020-06-01 原创文章 经验/观点 举报 1410 4 3 0

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


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


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


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


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


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 中对多任务操作的支持,也是用拖拽来实现的:

图源自引文5

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


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

图源自引文2

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


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


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


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

图源自引文4


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



三、设计关键点


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


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

图源自引文1

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


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


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


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


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

② 改变背景或描边颜色

③ 改变大小

④ 改变透明度

⑤ 使其倾斜或偏移


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


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


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


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


① 闪烁

② 出现参考线、震动提示

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


如 Instagram 故事中添加标签时:

图源自引文1

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


在视频 App 中:

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


4、注意胖手指问题


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


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


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


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

图源自引文3

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

图源自引文3


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

图源自引文3


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

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


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


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


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


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


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

图源自引文3


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


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


5、让拖拽过程更有趣


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

图源自引文2


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


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

图源自引文1

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


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



划重点


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


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


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


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



参考引文

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

《“小元素”有大用处!》 http://dwz.date/aRr6

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

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

Human Interface Guidelines, Drag and Drop http://dwz.date/aRqE

Drag and Drop for Design Systems http://dwz.date/aRrG

Building a Responsive Drag and Drop UI http://8rr.co/3D95

《可视化拖拽交互详解》 http://8rr.co/3DAg

Powered by Froala Editor

更新:2020-06-01

收藏

4人已收藏

鹤一_

我所说的,都是错的

  • 5

    作品

  • 4

    粉丝

  • 25

    关注

  • 工作许久了,你是不是还有些没甩掉的「学生思维」?
  • 考虑好这三个关键因素,你的用户研究才不会白忙活
  • 如何设计敏捷简短的访谈,走近你的用户?
  • 浅析交互设计师能力模型构建

    猜你喜欢

      2020-06-01 原创文章 经验/观点 举报 1410 4 3 0

      你设计的拖拽操作,有让用户爽到吗?

      0.0°

      你确定要举报你设计的拖拽操作,有让用户爽到吗?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年05月31日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录