Principle 教程三:拖拽添加

“拖动”是卡片式设计中一种常见的交互,属于“即时交互”。即时交互指的是在操作进行的时刻即有反馈,非即时交互则是在人的操作结束后物体才有反应,比如按钮的点击、卡片翻转等。

在实际的设计中,很多地方会用到“拖拽”的手段给用户带来更佳的效果,可以说,在拖动启动的一瞬间,用户就明白了这样操作的结果,同时,他也可以“反悔”——放回原处,这样就可以防止误解和操作失误,增加了产品的容错性👍

最终效果

1. 拖动card 1离开原位,添加处颜色变深;

2. card 1拖进添加处范围时新的添加位(加号)出现,添加处整体底色变浅;

3. 在添加处松开card 1,底色改变,card 1出现在添加位上,card 2, card 3左移补位,同时新的添加处在下方出现。




首先,在Sketch中用简单的图形画好所有出现的页面。

因为拖拽这一个动作会导致添加处出现两种状态,即未进入时的底色变深和进入时的底色变浅、添加位显现,因此两个状态都在第二帧中,只是在不同触发条件下透明度不同(后面会说明怎么处理):



下面分析每一步效果的实现。


1. 拖动card 1离开原位,添加处颜色变深


设置卡片为水平和垂直方向的drag交互,drag和page, scroll 不同,不存在父子图层的滑动关系,只是图层本身的动作,因此不需要driver实现。

拖拽卡片到未到达区域(添加处以外的地方),松开回到原处;妥当到添加处,松开则放置在添加位上。这有点像程序中的“if...else...”语句,在Principle中虽然没有这样的规则,但可以用图层之间跳转的优先级来解决:

在第二帧中用整个artboard的hover inside跳转到第一帧,而用添加区域的hover inside跳转到第三帧(添加完成状态)。这点利用了“内部区域的优先级大于整体”的方法,如果在局部松开就跳转局部,在其它区域松开就跳转整体。如果拖拽时鼠标在添加处松开,就认为是添加动作,跳转到添加状态。也不是很难吧?



2. card 1拖进添加范围时添加位出现,添加处整体底色变浅


因为是卡片的位置导致添加位的不同状态,这里用卡片的X/Y的联动(driver)实现。设置card 1的Y为因变量,添加位、添加层、原始文字、原始层为变量,进行透明度的变化。注意,在card 1刚好进入/退出区域处,透明度实际为突变(0%到100%,100%到0%),要分别设置两个状态,一共是四个状态,否则边界处只有一个状态,就会变成内部的渐变效果:



card 1 的Y变化带来的驱动效果


3. 在添加处松开card 1,底色改变,card 1出现在添加位上,card 2, card 3左移补位,同时新的添加处在下方出现


最后的动效就很简单了,“松开后出现在添加位”在上一步已经实现,card 2, card 3的移动只需要在第三帧中手动移动卡片,补上card 1位置即可。动画自动识别出它们X的变化:



整体来说,拖拽(drag)的开始、结束效果有些难度,利用到了drivers的相关知识。动效本身是值得一试的,也是交互闪光🌟的地方。


原型请见:https://pan.baidu.com/s/1i5Hvfud

密码:8xkt

推荐阅读更多精彩内容