本文转载自 Supertop 的官方博客，原文 Design Details: Drag and Drop，原作者 @Oisin 为 Castro 播客应用 的开发者之一，少数派经授权翻译转载。

Apple UIKit 提供了 Drag and Drop 功能的技术基础，但是这个功能在应用里看起来、用起来怎么样，主要还是由开发者来决定。

理想的情况是，用户从某一个应用切换到另一个应用时，一些优秀的用户体验应该得以延续。作为开发者和设计师团体，我们应该达成一致：分享一些优秀的设计实例来实现连贯的用户体验。现在就有这样一个机会来帮助用户了解并接受在触控设备上使用 Drag and Drop 进行高效交互，正如多年来它在桌面设备实现的那样。

两星期前，我们发布了集成 Drag and Drop 功能的 Castro 2.5。Federico Viticci 在他的 iOS 11 测评 中提到了我们这次的功能实现非常棒：

(它) 让我相信这个功能在小屏设备上并不是噱头；它可以给任何一个 iPhone 应用带来切实的好处。当我习惯了在 Castro 2.5 中使用 Drag and Drop 功能后，我希望它无处不在。

在这篇文章中，我将深入 Castro 中 Drag and Drop 功能的一些具体细节，来作为这一讨论的开端，我希望这项讨论也能够在其他场合继续。

尽管在 iPhone 上，Drag and Drop 功能只能在一个单独的应用中进行，我们发现它的多点触控支持以及对它的直接操作，能够为批量行为和之前繁琐的其他特性带来高效操作的新契机。我们从 iPhone 上学到的内容，同样也适用于 iPad。

悬浮

当一个用户对可以拖动的界面元素进行长按时，这一元素会悬浮起来，表明它是可以被拖动的。默认情况下，该元素的整个矩形区域会悬浮起来。但是你可以为它指定一个在预览时实现的裁剪路径，这会产生一个将元素从界面实体中借出的感觉。

✅为多个元素从界面中借出的效果，🚫为整个矩形区域悬浮的效果。

拖动预览

当用户拖动他们的手指时，该项目的预览，或者以元素代表的项目预览会显示出来，并且贴在他们的手指上。默认情况下，屏幕显示的是预览的快照悬浮起来。在一些场景下，使用默认预览的快照已经足够了，但是设计一个定制的预览来更有效地代表内容，是更好的做法。

在 Castro 中，我们有播客的单集 Cell，它包含播客单集概览和不同的状态指示。将它集成在拖动预览中，会使预览杂乱无章。当拖动一个单集时，它的预览会在屏幕上占据太多区域，而当拖动多个单集时，iOS 会自动将预览的尺寸变小，重要的内容会变得太小以至于无法有效传达它所展示的内容。

✅为设计一个定制预览的效果，为显示默认预览快照的效果。

我们也有可拖动的、展示多个单集的元素。在这些情况下，使用拖动起始处的快照作为预览，是不行的。我们希望不论对单集的拖动是从哪里开始的，它都能够连贯展示。

✅为连贯的预览展示效果，🚫为不连贯的预览展示效果。

放置位置

没有默认的方式来指示放置位置。在 Castro 2.5 早期的测试版本中，测试人员疑惑单集能被放置到哪里，因此我们先来解释一下这个。

因为在 iOS 中没有一个标准的方式来取消拖放操作，（为用户指示放置位置）显得尤为重要。我们需要去尝试并让用户知道他们在某个位置放置一些内容时会实现某个动作，这样有时候他们可以安心地取消拖放操作。

我们面临的另一个挑战是，有些放置位置区域很小。当在 Tab 栏进行放置动作时，Tab 栏上的图标会被用户的手指挡住而很容易被误点击，因此我们需要设计高亮显示并扩大按钮的显示边界，来使它被手指遮挡时也能被用户看见。

✅为高亮显示并扩大按钮边界的效果，🚫为不高亮且不放大显示的效果

对于在整个 view 中进行放置操作时，我们从 macOS 的 Finder 上寻求灵感。（放置时整个边框会显示蓝色的框线） 

✅为放置时显示蓝色框线的效果，🚫为不显示框线的效果

放置动画

iOS 提供了一个默认的放置动画，你所拖动的项目会缩小并逐渐消失在放置区域。在 Castro 的 Tab 栏图标上，这种模式难以察觉，尤其是你的手指在放置时仍可能挡住图标。

✅为放置到 Tab 栏时加入动画的效果，🚫为默认放置的效果

根据用户的放置行为，当将内容插入到 Table 或 Collection View 中去时，一项重要的点是，使用这些类的方法来实现它们平滑进入的动画效果。这能给用户清晰地传达界面发生了什么、（拖动时）哪些内容从实体界面借出，以及传递出一种可以直接操作的感觉。

✅为放置时平滑进入的动画效果，🚫为默认放置的效果

多个项目的重新排序

iOS 11 目前还不支持在 Table 或 Collection View 中一次执行多个项目的重新排序（rdar://33413316）。

有一个妥协的方案，显示出你可以将项目一个个收集起来插入到待拖放队列中，而不是只能执行一个拖放（当放置时它们也会散落到各处）。但是这会导致一个令人困惑的放置动画，当你想要放置时，View 中的区域空间并不会开放，而且你想要重新排序的项目仍然占据着它们原来的位置。

从事于 Springboard 的团队可以优雅地实现多个应用的重新排序。当你拖动多个应用时，它们会离开主屏幕，然后你可以干脆利落地将它们在新位置放下。这是我们在 Castro 中采用的对多个单集进行重新排序采用的模型，它也指明了未来我们应该在 Table 和 Collection View 中如何实现这一操作。

✅为多个项目拖放的效果，🚫为默认不支持多项目的拖放

与我们联系

对于我们在开发 Castro 时所发现的 Drag and Drop 的设计方案，我们感到很高兴。然而，作为一个团体来交流这些细节并对一些优秀的实例达成一致，是非常重要的。如果我们能做到，那么用户能在他们的所有应用中更加有效地驾驭 Drag and Drop 功能。

如果你对我们所做的感兴趣，或者你有不同的意见，欢迎在 Twitter 中与我们讨论。