编者按:对于大多数用户来说,他们可能不关心日常生活中的拖拉交互,但它是设计中不可或缺的一部分。真正的拖拉体验将为客户提供更好的使用体验。本文比较了国内外大型工厂的拖拉设计,并从七个方面介绍了如何更好地设计拖拉设计。让我们看看!

真实的拖拽体验会给客户提供更好的使用感受

最近,我们正在设计交互,参考了很多线上产品的案例,发现不简单。

为了让拖拽的体验更真实,需要给用户提供很多反馈效果。

大多数产品只有部分反馈效果,使用就足够了,但更充分的反馈可以带来更多「有感」的体验。

例如,在调整问题顺序时,腾讯文档的收集表使用拖动交互:

一个拖拽,就暴露了国内外大厂的差距

上图来源:细节控制是什么?Google设计问卷

从上图可以看出,拖动交互包括拖动隐喻、悬停状态、拖动状态和吸附功能,与国内许多其他产品相比也很好。

  • 拖动隐喻:卡片左上角的6点
  • 悬挂状态:卡片阴影
  • 拖动状态:拖动开始后,卡片变短,便于观察和放置
  • 吸附功能:放下后自动停放在附近位置

然而,如果你比较 Google Form 拖动交互会发现腾讯收集表还有优化空间:

一个拖拽,就暴露了国内外大厂的差距

Google Form 拖动明显更顺畅,这是腾讯收集表有点 Bug,暂时不看技术层面。

腾讯收集表有反馈效果,Google Form 有很多,而且更到位。

主要区别体现在拖拉状态:

  • 腾讯收藏表:只是变短了
  • Google Form:不仅变短,而且变透明,增加阴影

阴影倒不是那么重要,主要是多一层强调而已。

Google Form 这种增加透明度的效果是关键,因为它可以让你在拖动时看到以下内容!

经过仔细研究,我发现拖拉交互中有很多细节,Google Form 也不一定是最好的。

于是我整理了一些拖拽交互设计心得,看看做到最好可以是怎样的效果。

先看两个案例对比:

一个拖拽,就暴露了国内外大厂的差距

反例

一个拖拽,就暴露了国内外大厂的差距

正例

第二种情况感觉更流畅、更真实,主要是因为反馈效果更好。

接下来,我来谈谈拖拉过程中的设计要点。

一、拖隐喻

悬停态最重要的是让用户感知它可以通过隐喻拖动。

否则,如果像下图一样,只是给拖拉对象增加了一个悬停态,几乎看不到拖拉。

一个拖拽,就暴露了国内外大厂的差距

反例

为了简化视觉效果,默认状态不能显示拖动隐喻,但必须有拖动隐喻。

点阵图标是目前最主流的方式,在移动和桌面上都很常见。

建议在桌面上换指针,最好换成下图中的十字箭头,比起抓手更容易理解。

一个拖拽,就暴露了国内外大厂的差距

正例

还可以暗示拖动的方向,通过图标和指针降低学习成本。

一个拖拽,就暴露了国内外大厂的差距

正例

二、拖动状态

在拖拉过程中,有两个主要问题需要解决:拖拉对象不突出,拖拉对象遮挡背景,可反映在以下反例中。

一个拖拽,就暴露了国内外大厂的差距

反例

例如,下图中的小卡片阴影可以给拖拉对象增加亮度或阴影。

当背景信息密集时,建议降低拖动对象的透明度,以免在拖动过程中完全阻挡视线。

一个拖拽,就暴露了国内外大厂的差距

正例

三、目标暗示

有些拖动交互,目标不明确,第一次使用难以理解。

比如下图,你不确定能不能拖到灰色背景。

一个拖拽,就暴露了国内外大厂的差距

反例

此时建议在拖拉开始后,高亮目标位置的范围,从而降低了很多试错成本。

例如,在下图中,拖动开始后,水果和蔬菜卡立即添加阴影,暗示可以拖到哪里。

一个拖拽,就暴露了国内外大厂的差距

正例

四、位置确认

一些拖动互动,拖走物体,原来的位置消失了,很容易给用户带来不安全感,不知道如果在空白处放手会发生什么。

接近新位置时,不建议像下图那样画杠,而不是预留新位置,这样看起来不是很直观。

一个拖拽,就暴露了国内外大厂的差距

反例

最好在拖动过程中保留原位置,接近新位置时保留放置空间。

,暴露了国内外大厂的差距” width=”388″ height=”222″>

正例

五、吸附确认

在以下反例中,拖动对象卡在两个目标位置之间,如果此时放手,不确定会吸附到哪里。

如果目标位置密集,用户拖错地方的概率很高,操作时要小心。

一个拖拽,就暴露了国内外大厂的差距

反例

例如,目标位置是突出的,表明如果鼠标在这个时候被释放,拖把对象就会被吸到这个地方。

最好在整个拖拉过程中,总有一个明亮的目标位置,即使拖拉对象位于空白处,也可以突出原来的位置。

这样,用户就可以随时知道如果此时放手,拖动对象会跑到哪里。

一个拖拽,就暴露了国内外大厂的差距

正例

六、选择状态

不知道大家有没有这样的经历,把一件事拖到另一个地方,拖完就忘了刚拖的是什么。

尤其是在这个过程中,页面还在跳动,根本找不到北。

比如下面的反例,如果没有记忆,你根本看不出刚拖了什么。

一个拖拽,就暴露了国内外大厂的差距

反例

许多成熟的拖动交互,如 Mac/Win 系统的文件管理除了悬挂和拖动两种状态外,还有一种选择状态。

一个拖拽,就暴露了国内外大厂的差距

Mac文件管理

即使拖动完成,指针也不会悬挂在拖动对象上,用户仍然可以通过选择状态找到刚刚拖动的对象。

若要取消此选择状态,请单击空白处。

如果拖动操作比较复杂,涉及的对象比较多,建议增加选中态,方便搜索。

一个拖拽,就暴露了国内外大厂的差距

正例

选中状态不太适合用在移动端,但移动端本身也不适合复杂的拖拽操作。

如果是简单的拖拉操作,也可以不选择状态。

七、总结一下

你可以考虑的反馈效果是:

拖动隐喻、拖动状态、目标暗示、位置确认、吸附确认和选择状态。

考虑到开发成本和实际场景的复杂性,不可能完成所有的拖拉交互。

但最好知道,根据情况选择所需的反馈效果。

最后,比较差异:

一个拖拽,就暴露了国内外大厂的差距

反例

一个拖拽,就暴露了国内外大厂的差距

正例

相关新闻

联系我们

联系我们

888-888-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部