原型设计:[3]利用Axure实现复选框全选效果
在利用AXURE原型工具进行产品设计时,经常用到复选框的全选和取消全选的交互操作,一般选择复选框来着抹较氰控制选项全选中和全取消的效果,也可以用按钮或文字等其他作为开关来控制这种效果,下面主要介绍利用一个复选框控制选项全选中和全取消选中的效果
工具/原料
AXURE RP Pro 6.5 原型设计工具
基本设置
1、输入需要复选效果的文字,比如选择最适宜居住的城市,拖拽一个矩形,若干个复选按钮,其中一个复选框作为全选选项,然后给每一个复选框进行命名(为后面的设置变量值提供方便),如下:
![原型设计:[3]利用Axure实现复选框全选效果](https://exp-picture.cdn.bcebos.com/6bbfdd14f1c595eeac06ba9427530688902c9a1e.jpg)
2、然后在这个条件下添加动作,如果选中了“全选”,那么同时选中其他所有城市选项,选择设置变量/部件值>>打开设置编辑器>>依次设置其它所有城市复选框的值为真,点击确定,如下图
![原型设计:[3]利用Axure实现复选框全选效果](https://exp-picture.cdn.bcebos.com/07c98f2ca5cadce8648f0d4ffcf7980e5e20951e.jpg)
2、然后在上一步骤的条件下添加动作,如果取消选中“全选”,那么同时取消选中其他所有镰矽缠镖城市选项,选择设置变量/部件值>>打梯瓣氨割开设置编辑器>>依次设置其它所有城市复选框的值为假,点击确定,如下图:
![原型设计:[3]利用Axure实现复选框全选效果](https://exp-picture.cdn.bcebos.com/2947750192dd3340ae3b9c34881c99c0aefcf11e.jpg)
4、如果利用其他组件,例如按钮组件,图形,文字等作为开关控制全选效果,设置步骤同上,只需要在添加用例时,替换本节中用于做控制开关的复选框“城市全选”即可