辉灿新闻网 原型设计 Axure 教程:兴趣选择

Axure 教程:兴趣选择

在新浪微博注册的时候,通常会让注册用户选择兴趣爱好,这样就方便爱好给用户推荐朋友和资讯,今天我们来看看如何通过axure实现兴趣选择功能。通过本练习,主要让大家掌握全局变量和选中\\取消选中的事件。

效果图如下:

需求分析

1、兴趣节点在选中之后,圆圈变大,背景变色,字体变大变色;

2、兴趣节点在取消选中之后,圆圈大小、背景颜色、字体恢复;

3、当有兴趣节点选中之后,“下一步”按钮可用(变蓝);

4、如果没有兴趣节点选中,“下一步”按钮禁用(灰色)。

原型设计

1、拖入一个矩形框,作为手机背景,当然你有其他的手机背景,也可以拖入,这里不做赘述;

2、拖入一个圆形框,设置尺寸为60*60 , 写上抽烟,其他的兴趣框先不拖入;

3、拖入一个按钮,作为下一步按钮,设置为禁用;

4、到了这里,原型就算设计完成了。

交互设计

1、设置全局变量select_amount,用于记录当前选中的兴趣数量,初始值=0;

2、设置兴趣选择的交互样式,即选择中的时候,字号变成16,字色变成白色,背景变成绿色;

3、设置兴趣选择的鼠标单击事件,当鼠标单击的时候,兴趣选择器在选中和取消选中之间切换;

4、当兴趣被选中时候,被选中的数量select_amount+1,设置被选中元件尺寸为80*80;当取消取消选中的时候,被选中数量select_amount-1,设置被选中元件尺寸为60*60;

5、设置“下一步”按钮的交互样式,当禁用的时候,设置背景颜色为灰色,字色为黑色;

6、设置兴趣框的尺寸改变事件,当尺寸改变时候,判断如果select_amount>0,设置“下一步”按钮为启用;当select_amount<=0 , 设置“下一步”按钮禁用;

7、复制“抽烟”兴趣框,修改为其他兴趣爱好,至此,兴趣选择的原型就制作好了。

本文由 @马白龙 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/782.html

作者: 马龙

建议收藏:可能是最全的Axure输入框

Axure 教程:内容展示——图片墙

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部