移动卡片、滑块、侧边菜单或者悬浮按钮的时候，拖拽效果如果仅仅停留在“能拖动”这个层面，往往还够不着产品原型的真实手感，所以很多人会问Principle里到底怎么去制作拖拽交互，以及拖拽过程中那些丰富的反馈效果又该如何一点一点地调整；在处理这种交互之前，需要先把图层允许移动的方向给确定下来，是只能横向滑动，还是上下左右都能自由拖拽，接着再逐步去补充拖拽时伴随的缩放变化、透明度的渐变、轻微的旋转以及手指松开后的那种回弹或者吸附效果，Principle工具本身已经内置了Dragging、Scrolling和Paged Scrolling这三类连续的交互方式，横向和纵向的启用也可以独立控制，互不干扰。

　　一、Principle怎么做拖拽交互

　　平常那种针对单个图层的移动，用普通的Dragging就很合适；而像内容列表、长页面或者地图这种需要滚动查看的场景，更适合套用Scrolling，两种交互不要硬搅和在一块儿，根据实际需要来选择就行。

　　1、把需要拖动的图层先选出来

　　当我们在画布里或者左侧的图层列表当中找到了那张卡片、那个按钮或者滑块之后，就可以把目光转向右侧的属性面板，里头会有横向和纵向两行交互设置的选项，把想要拖拽的方向从默认的状态切换成【Drag】；假如只想让控件左右移动，那就单独把横向拖拽开启，纵向保持原样不动，反过来，如果需要图层在画布上自由移动，那就把两个方向都设成拖拽模式，这样一来，手指或者光标按住图层并开始滑动的时候，它的位置就会跟着实时变化，Dragging这步就算设置完成了。

　　2、让可以触摸的区域再大一些

　　有时候图标的实际面积比较小，手指操作起来不够方便，我们可以先点选那个图层，再点击【Group】或者用快捷键【Command】加【G】给它包上一层组，然后把外层组的尺寸人为地放大一些；Principle里面的组能够拥有自己独立的尺寸，这样就可以在保留内部图形原本大小的同时，扩大外围的热区范围，触控的响应区域变大了，操作体验自然也会好一些。

　　3、把拖拽开始和结束的事件补上

　　要是想在手指刚开始拖动的瞬间，或者松手以后让界面切换到另一个状态，那就需要点击图层右侧的那个闪电形状的小图标，在弹出的菜单里添加【Drag Begin】或者【Drag End】，接着把连线直接拽向目标画板；当手指开始移动的时候，Drag Begin就会被触发，等到移动结束并且手指离开屏幕的刹那，Drag End就会被激活，如果目标画板里面保留着名称相同的图层，那么两个状态之间的衔接就会显得更加平稳，不会出现那种突兀的跳动。

　　二、Principle拖拽反馈效果怎么调整

　　拖拽时的各种细腻反馈，可以用内置的Drivers功能来实现；Drivers并不是按照固定的时间去播放动画，而是根据拖拽位置的变化，实时地去控制其他图层的属性，特别适合制作像卡片被拖拽时慢慢缩小、图标轻轻旋转、背景颜色渐变，或者指示小圆点跟着滑动这些效果。

　　1、把Drivers面板调出来

　　先选中当前正在编辑的画板，接着在顶部区域找到并点击【Drivers】，那些此前已经打开拖拽功能的图层，会被自动识别成Driver Source；然后再去点选那个需要产生联动效果的图层，在Drivers区域里头会看到一个蓝色的小加号，点一下它，再从下拉列表中挑出想要绑定的属性，比如缩放比例、透明度或者角度，这样就和拖拽动作建立起了实时的关联。

　　2、在不同位置上设置好关键变化

　　我们会看到Drivers面板上有一条灰色的游标，可以用手拖动它，让它停在某个拖拽距离的节点上，然后在这个节点去修改联动图层的缩放大小、不透明度、旋转角度或者它在屏幕上的位置，Principle会自动帮我们在这些地方打上关键帧；举个例子，卡片随着手指向右拖拽的过程中，可以逐渐缩小一点，同时让删除按钮渐渐地亮起来，当拖到接近最右端的时候，再让确认图标显现出来，整个过程就变得很自然。

　　3、调整手指松开以后的动画

　　如果需要让图层在手指离开以后自动弹回原位，或者轻轻地吸到某个边界上，可以先在两个目标画板之间建立好过渡连接，再点击过渡箭头，打开【Animate】面板；在这个面板里，时间轴上可以拖拽修改延迟时间和持续时长，曲线选择器则用来调整缓入缓出的节奏，如果希望带一点轻微的弹跳感，可以把动画类型选成【Spring】，再去微调一下Tension和Friction这两个参数，让回弹的效果软硬适宜。

　　三、Principle拖拽效果怎么检查

　　整个拖拽的效果做好之后，一定要在Preview预览模式里反反复复地测试；如果感觉拖起来手感不太对劲，很多时候并不是图层放错了地方，而是拖拽的方向、触摸响应的区域大小，以及反馈变化的幅度这几样东西没有被调到刚好。

　　1、查一查拖拽的移动范围

　　像滑块、开关和卡片这类控件，不应该被拖到没有边际的地方，在官方的教程区里给出了Limit drag range的示范，可以参考着去设置拖拽的边界；测试的时候，重点要盯着图层有没有跑出它应该待着的容器、有没有压住其他的按钮，或者松手以后会不会停在一个明显不合理的位置上，这些细节都会影响最终的体验。

　　2、检查触摸事件有没有冲突

　　在Principle里面，触摸事件会先交给位置处于最上方、或者那些内部可以交互的图层，然后再一层一层地向父级传递；如果发现拖拽怎么都不起作用，那就要看一看是不是上面还盖着一层看不见的透明图形，或者是其他图层抢先把这个触摸事件给截住了，另外要留意，用作热区的透明图层不要直接把透明度设成百分之零，因为文档里说明了零透明度的图层是不会参与交互的，触摸指令根本送不过去。

　　3、控制好反馈的变化幅度

　　缩放的比例、旋转的角度还有回弹的力道，尽量不要一次就加得太猛，可以先把一种最主要的反馈效果保留下来，比如让卡片在拖动时轻微缩小，松手后再弹回原来的尺寸，等这一步的手感调顺了，再给确认状态少量地补充一些透明度或者颜色的变化；加上的特效越多，就越需要待在预览模式里耐心地来回试，一边试一边调整，直到拖拽体验比较接近真实设备的反应为止。

　　总结

　　综合起来看，想要在Principle中顺利地完成拖拽交互，并且把反馈效果调到理想的状态，大致可以按照“先把Drag打开、定好拖拽的方向、扩大触摸响应的热区、挂上Drag Begin和Drag End的事件、借助Drivers补上拖拽过程中的联动变化、最后在Animate里把松手动画磨细”这样的顺序去一步步处理；当拖拽的移动范围被限制妥当了，触摸的冲突也已经排除了，各种反馈的幅度又控制得恰到好处，那么这个原型被操作起来就会更加贴近一款真实的软件产品。