Axure案例教程：钓鱼游戏的设计

2018-06-2713:37:11原型设计Comments3,099 views字数 1678阅读模式

就产品经理而言，Axure是最有代表性的软件。大多数人都可以做到使用Axure画一些简单的原型图，但是到了交互方面则捉襟见肘，中继器和函数是不少产品经理面前的两座大山。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

有趣的内容能够减少人在学习中的抵触心理，Axure的函数无疑是十分枯燥的，且一般用不到的特点容易让人没有动力进行学习。这种情况下，自己制作一些有意思的东西对于技能的锻炼以及娱乐身心都有很大的益处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

一、制作结果

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

主要交互：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

小鱼会来回循环的游泳且会转身；
小鱼的速度实际上是随机的，即不是匀速运动；
可以设置难度完成小鱼速度的切换；
点击鱼钩可以进行捕鱼，捕捉成功后得分且小鱼将会回到原来的位置。

体验地址：点击此处文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

二、制作方法

1.用Axure画背景元件

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

这一步很简单，图片就是由几个矩形，一个椭圆，一个小鱼组成的。其中值得注意的是小鱼的图片需要png不带背景的图片，否则会有一个背景框的存在。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

png的制作方式很简单，可以在网络上下载一个背景比较纯净的小鱼图片，然后使用PS进行抠图，最后去掉背景页然后保存为png格式即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

因为小鱼是需要转身的，所以可以将方向相反的小鱼分别储存为动态面板的两种状态。当然，图片的水平翻转需要PS的帮助。这样，只要改变动态面板的状态就可以实现小鱼的转身。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

2.鱼钩动作

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

鱼钩动作的设置如上图所示，鱼钩是由鱼钩以及鱼线两部分组成的，鱼钩的动画为移动，而鱼线的动画则为尺寸的改变。因为还需要收回，所以移动后再设置反向的移动即可。这一步的触发方式设置为鼠标点击鱼钩。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

3.钓鱼动作

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

通过上述两步可以实现钓鱼的动作。这里主要的知识点是接触操作，可以在条件中进行设置，被掉的鱼运动是垂直的，故而其移动的坐标中x值为0。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

此处设置的难点是：注意移动设置中的相对位置和绝对位置，如果不慎弄反可能导致交互出错。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

到这里看起来已经实现很多功能了，但实际上还差很多，比如现在的鱼是不动的，且将鱼掉走之后就没有可以掉的鱼了，游戏无法继续进行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

4.全局变量的定义

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

接着为了实现鱼的往复运动，得分的计算，以及难度调节功能，需要设置三个全局变量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

dx：应用于方向的改变；
score：用于记录游戏得分；
level：用于游戏等级的调节。

此处可以先将其默认值设定一下，dx为1即不反向，score为0即初试分数是0，level为1即初始难度为1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

5.鱼的移动

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

鱼的移动是水平不匀速移动，不匀速为了增加钓鱼预判的难度。其设置方式如上图所示，其中用了随机函数math.random。dx是为了改变其方向，默认值为1，level则是为了改变其难度，默认值同样也是1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

6.鱼的转身

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

鱼不可能朝向一个方向一直运动下去，这样无法完成游戏，所以可以设置其边界条件，让其超出边界的时候dx的数值变为-1实现反向移动。此外还需要在边界的时候修改鱼的状态，否则就会出现鱼是倒着游泳的样子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html

反向由dx数值的改变来完成，而鱼的状态则是由state的改变来完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3816.html