Axure教程｜常用的九宫格抽奖器原型制作

相信大家都看到过用积分抽奖的这种抽奖器—九宫格，有固定的奖品，点击抽奖会按一定规律选择奖品品。点击停止或者时间到之后，选出某个奖品。比如像某购物商城的积分抽奖。

咱们今天就来看看怎么样制作这个抽奖器。点击下面的地址可以查看预览效果：https://oi1174.axshare.com

当然要准备要部件了。九宫格的样式，中间一个是抽奖按钮，周围八个是奖品。

这里我准备了其中一个奖品是“再来一次”，这个是很常见的一种，在设置方面跟全部都是奖品的设置方法有一点不同，我们稍后在看。

这个抽奖器有一种简单的方式是用户不能随机停止的，需要等到自动停止。这种方式做起来比较简单，可以这样做：

设置奖品的选中样式，在点击抽奖的时候按顺序设置奖品的选中动作即可。这里的“顺序”，可以使用等待动作给它们强制加上等待时间，这样设置之后就可以了。当然这种方法是笨方法，但是思路和设置是最简单的。

这种方式就不花笔墨去写了，很简单，大家可以试试。下面要给大家看的是九宫格抽奖的另一种方式：可以自己点击停止抽奖。

在部件的准备上，比刚才的这种方式复杂一点点。增加一个停止按钮，把奖品用动态面制作，8个奖品就需要8个状态。状态中“奖品”不用设置选中样式，而是直接将样式表现出来。比如状态1中奖品1样式直接设置，状态2中奖品2样式直接设置，这样一次类推。

在点击抽奖的时候，抽奖次数减少，点击按钮切换成“停止”按钮。这两个都很容易实现，设置文本和显示动作就可以简单做到。

让奖品进行依次选择，这就是我们刚才设置动态面板的目的。点击抽奖之后，可以让动态面板在进行面板状态的切换。在点击“停止”按钮时，停止循环即可。这样面板就实现了点击抽奖和点击停止抽奖。

如果，奖品中没有“再来一次”的话，这次抽奖到这里就完成了。因为多了“再来一次”所以复杂了一些。

如果抽中了“再来一次”，也就是动态面板停止在状态2的时候，抽奖次数还会增加一次，那抽奖按钮还能再进行点击，再次抽奖。所以不可避免的，我们要设置它的用例条件。

那在开始抽奖的按钮上，一样也是得设置用例条件，次数为1的时候可以点击，为0时不可点击。（抽奖次数根据实际情况去设置，大于0的时候都能设置为可点击）。这样我们就把这个案例做好了，看看最终效果吧。

选择奖品的速度，还有其他的细节，比如抽中奖品的提示等，大家都是可以根据自己的实际情况去做调整。

最后，思考一下，这个抽奖器能不能做成随机商品的，而不是根据规律选择呢？