编辑导语:很多时候我们都会用到拖放的功能,但是我们很少会注意到拖放交互,但是每个拖放的设计规范都是不一样的,我们通过不同的场景来设计不同的拖放功能;本文作者分享了关于拖放功能的分析与设计,我们一起来了解一下。一、什么是拖放
根据官方定义,“在图形用户界面,拖放事件就是点击一个虚拟对象,并将其拖动到其他位置或到另一个虚拟物体的动作。”拖放操作提供了一种与现实世界一样的方式来获取和移动元素,这种拟态性使得具有拖放交互作用的用户界面易于理解和使用。
自从GUI出现以来,拖放操作就已经存在,并被大多数用户熟悉;它是一种直接操作,特别适用于对象的分组、排序、移动或调整大小。
虽然对于UX设计师来说拖放是一种常见交互方式,但是仍会遇到问题,因此需要仔细考虑该交互的用户流程和使用场景。
二、四种常见的拖放模式
在介绍如何进行拖放操作之前,让我们从鼠标用户的角度介绍四种常见的拖放模式。
1. 列表排序
这是最直接的拖放模式之一,面对一个有序列表时,用户可以更改列表项顺序;用户使用鼠标单击并按住以获取列表项,然后将鼠标移至要放置该项的位置;放开鼠标按钮,即可放下选项。
2. 不同列表间的移动
面对几个不同的项目列表时,用户可以从一个列表中选择一个项目并将其移至另一个列表;这在看板风格的交互中很常见,用户通过将项目从一个存储看版移动到另一个存储看版来更改任务的状态。
3. 编辑对象的二维大小
在制图和设计软件中很常见,常用于图形编辑,这种类型的拖放操作使用户可以在二维画布上放置和调整对象的大小。
4. 调整对象的一维大小
拖放通常还用于调整对象的宽度或高度的大小,例如调整表格列的宽度或行的高度。
我们可以发现,拖放所使用的所有交互模式可以分为两种主要类型:移动对象和调整对象大小。
移动对象:例如,将文件图标拖到垃圾箱图标上,从而导致相应文件被删除。调整对象大小:例如,将列分隔符向右移动会使该表的列变宽,或绘图软件中移动锚点更改所绘制图形的外观。
三、如何设计有效的拖放
1. 四种拖放状态
用户如何知道何时开始拖动?状态反馈是一个很好的指标。以下为拖放的四个状态:
悬停时:与所有直接操作交互一样,需要在屏幕上显示提示项,例如悬停时的光标变化等。
按下时(单击):在启动交