使用Axure工具创建“兴趣选择”

在新浪微博注册时，注册用户通常会被要求选择自己的兴趣，这样他们就可以轻松地向用户推荐朋友和信息。今天，我们来看看如何通过axure实现兴趣选择功能。通过本练习，您可以掌握全局变量和取消选中的事件。

效果图如下：

需求分析

1.选择兴趣节点后，圆圈变大，背景改变颜色，字体变大，颜色改变；

2.取消选择兴趣节点后，将恢复圆圈大小、背景颜色和字体；

3.选择感兴趣的节点时，“下一步”按钮可用（变为蓝色）；

4.如果未选择任何兴趣节点，则禁用“下一步”按钮（灰显）。

原型设计

1.拖动一个矩形框作为手机背景。当然，如果你有其他手机背景，你也可以把它们拖进来。这里我不详细介绍；

2.在大小为60*60的圆形框中拖动，并写上“吸烟”。不要先在其他兴趣框中拖动；

3.拖动一个按钮作为下一个按钮，并将其设置为禁用；

4.一旦到了这里，原型设计就完成了。

交互设计

1.设置全局变量select_ amount，用于记录当前所选兴趣的数量，初始值=0；

2.设置兴趣选择的交互样式，即当选择进行时，字体大小变为16，字体颜色变为白色，背景变为绿色；

3.设置感兴趣选择的鼠标单击事件。当鼠标单击时，兴趣选择器在选择和取消选择之间切换；

4.当选择兴趣时，所选项目的数量_数量+1，将所选组件的大小设置为80*80；取消选择所选数量_数量-1时，将所选组件大小设置为60*60；

5.设置“下一步”按钮的交互样式。禁用时，将背景颜色设置为灰色，字体颜色设置为黑色；

6.设置兴趣框的大小更改事件。当尺寸改变时，判断是否选择_ amount>0。将Next（下一步）按钮设置为启用；当选择_ amount<=0时，将“Next”（下一步）按钮设置为禁用；

7.复制“吸烟”兴趣框并将其修改为其他兴趣。此时，兴趣选择的原型已经准备就绪。

本文由@马白龙原创发布给每一位产品经理。