抖音短视频中一个简单却能吸引用户眼球的交互效果——让你的元件燥起

如何通过产品设计引导用户行为从而提升转化率？今天就让我们一起来学习抖音短视频中一个简单却能吸引用户眼球的交互效果——让你的元件燥起来。

第二章：部件抖动交互效果

2.1.设计思考

整个过程只有元件在垂直方向的位移，所以难度并不大，我们只需要利用到元件的移动，并设置它的位移动作即可完成，剩下的就是不断的重复这个动作。

2.2 素材准备

（1）拖入一个矩形143*78，填充为黄色，在样式中设置圆角半径为11

（2）拖入一个三角形19*8，填充为暗黄色

（3）拖入一个图片元件（自制），填充为白色

最终组合成以下形态：

（4）设置它们为一个组合——“提示拍摄”

2.3 交互设置

（1）为提示拍摄（组合）添加用例：载入时

（2）选择动作：移动

（3）勾选元件：提示拍摄（组合）

（4）设置参数

移动：相对移动 y：10（即为向下移动10个像素）

动画：摇摆（移速会变化，有一个向下冲的过程）

时间：500

（5）再次添加以上用例，除了y填写 -10（即为向上移动10个像素），其他都一样。

经过以上5个步骤以后，提示拍摄（组合）回到了原位，接下来就是不断重复这个动作了。

（6）利用shift键选择两个用例，右键复制

（7）在用例下方，右键粘贴4-5次

大功告成，预览一下。

思考：预览的时候发现了什么？是不是抖了几下就停了？从上图可以看出我们要让原件抖动几次就需要复制几次，如果现在想让它抖动100次1000次怎么办？我们就要复制1000次？NONONO，这个时候我们可以借助一个神器来实现，我称它为Axure里的永动机，如果你感兴趣可以关注我的公众号（皮先生PM）回复“永动机”3个字，就可以获得教程啦~

本文原型（网页版）下载地址：http://pan.baidu.com/s/1qYG64qg 密码：nk06

抖音系列预告：