axure实现兴趣选择功能：掌握全局变量和选中\取消选中的事件

新浪微博注册的时候，通常会让注册用户选择兴趣爱好，这样就方便爱好给用户推荐朋友和资讯，今天我们来看看如何通过axure实现兴趣选择功能。通过本练习，主要让大家掌握全局变量和选中\取消选中的事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

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

效果图如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

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

需求分析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

1、兴趣节点在选中之后，圆圈变大，背景变色，字体变大变色；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

2、兴趣节点在取消选中之后，圆圈大小、背景颜色、字体恢复；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

3、当有兴趣节点选中之后，“下一步”按钮可用（变蓝）；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

4、如果没有兴趣节点选中，“下一步”按钮禁用（灰色）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

原型设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

1、拖入一个矩形框，作为手机背景，当然你有其他的手机背景，也可以拖入，这里不做赘述；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

2、拖入一个圆形框，设置尺寸为60*60 ， 写上抽烟，其他的兴趣框先不拖入；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

3、拖入一个按钮，作为下一步按钮，设置为禁用；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

4、到了这里，原型就算设计完成了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

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

交互设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

1、设置全局变量select_amount，用于记录当前选中的兴趣数量，初始值=0；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

2、设置兴趣选择的交互样式，即选择中的时候，字号变成16，字色变成白色，背景变成绿色；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

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

3、设置兴趣选择的鼠标单击事件，当鼠标单击的时候，兴趣选择器在选中和取消选中之间切换；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

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

4、当兴趣被选中时候，被选中的数量select_amount+1，设置被选中元件尺寸为80*80；当取消取消选中的时候，被选中数量select_amount-1，设置被选中元件尺寸为60*60；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

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

5、设置“下一步”按钮的交互样式，当禁用的时候，设置背景颜色为灰色，字色为黑色；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

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

6、设置兴趣框的尺寸改变事件，当尺寸改变时候，判断如果select_amount>0,设置“下一步”按钮为启用；当select_amount<=0 , 设置“下一步”按钮禁用；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

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

7、复制“抽烟”兴趣框，修改为其他兴趣爱好，至此，兴趣选择的原型就制作好了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html

本文由 @马白龙 原创发布于人人都是产品经理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18167.html