编辑导语：对于大多数用户来说，可能大家在日常生活中并没有在意到拖拽交互，但是它却是设计中必不可少的一部分。真实的拖拽体验会给客户提供更好的使用感受。本文作者对比了国内外大厂的拖拽设计并从七个方面介绍了如何更好的设计拖拽。让我们一起来看看吧！
最近正在设计一个拖拽交互，参考了很多线上产品的案例，发现这里面不简单。
为了让拖拽的体验更真实，需要给用户提供很多反馈效果。
大部分产品都只做了一部分反馈效果，用起来也够了，但更充足的反馈能够带来更「有感」的体验。
例如腾讯文档的收集表，在调整问题顺序时，就用到了拖拽交互：
上图可以看到，这个拖拽交互包含有拖动隐喻、悬停状态、拖动状态和吸附功能，和国内很多其它产品比较起来，也算是不错了。
GOOGLE FORM 拖动起来明显更顺畅，这是腾讯收集表有点小 BUG，我们暂时不看技术层面的事情。
腾讯收集表有的反馈效果，GOOGLE FORM 一个不少，而且还更到位。
GOOGLE FORM 这个增加透明度的效果才是重点，因为可以让你拖动的时候看清下面的内容！
仔细研究后，我发现拖拽交互里面还有很多可以细节，GOOGLE FORM 也这个也不一定是最好的。
于是我整理了一些拖拽交互设计心得，看看做到最好可以是怎样的效果。
接下来，我把拖拽过程中的设计要点展开说一说。
悬停态最重要的就是通过隐喻，让用户感知这里是可以拖拽的。
为了视觉效果的简洁，可以默认状态可以不展示拖拽隐喻，但悬停时一定要有拖拽隐喻。
桌面端建议把指针也换一下，最好是换成下图这种十字箭头，比抓手更好理解。
通过图标和指针，也能暗示拖动的方向，减少学习成本。
拖拽过程中，主要有两方面问题需要解决：拖拽对象不突出和拖拽对象遮挡背景，以下反例中都能体现。
可以给拖拽对象加高亮或阴影，例如下图中的小卡片阴影。
有的拖拽交互，目标不明确，第一次使用很难理解。
这时建议在拖拽开始后，高亮出目标位置的范围，这样就少了很多试错成本。
例如下图，开始拖拽后，水果和蔬菜卡片立即加上阴影，暗示了可以往哪里拖。
有些拖拽交互，把对象一拖走，原位置就消失了，这样很容易给用户造成不安全感，不知道如果在空白处松手会怎样。
接近新位置时，也不建议像下图这样，只是画一道杠示意，而不把新位置预留出来，这样看起来不是很直观。
下面的反例中，拖拽对象卡在两个目标位置之间，如果此时松手，不确定会吸附到哪里。
如果目标位置很密集，用户拖错地方的几率就很高，操作起来不得不小心翼翼。
最好是整个拖拽过程中，一直有一个被高亮的目标位置，即便拖拽对象位于空白处，也可以把原位置高亮出来。
这样用户在任何时刻都很清楚，如果自己此时松手，拖拽对象会跑去哪里。
不知道大家有没有过这样的经历，把一个东西拖拽到另一个地方，拖完后就忘记刚刚拖的是什么了。
尤其是在这过程中页面还跳动一下，就完全找不着北了。
即便拖动完成了，指针也不在拖动对象上悬停，用户也依旧可以通过选中状态来找到刚刚拖完的对象。
选中状态不太适合用在移动端，但移动端本身也不适合复杂的拖拽操作。
要设计一个有感拖拽交互，你可以考虑的反馈效果有：
考虑到开发成本，和实际场景的复杂性，也不可能所有的拖拽交互都把这些做齐全了。
但最好是心里有数，根据情况选择需要的反馈效果。
本文由@体验进阶的ZOEYZ 原创发布于人人都是产品经理，未经作者许可，禁止转载。