【Axure教程之高级交互原型4】实例4：如何用实现“最多只能选三个”的交互原型？

【补充：因为很多人说看不到附件，我把所有教程附件上传了百度云分享，有兴趣同学自取哈

地址：https://pan.baidu.com/s/1bqmWaE7】

【摘要·简介】

本次教程实现的交互效果是一个多选编辑页面，不同于普通的无限制多选，这个原型中，可以多选，但是一次只能最多选中三个，再选第四个的时候，上一个被选中的将默认取消选择：

关键技术点：进一步掌握灵活使用全局变量；

我们先来看一下完成后的效果：

笔者在项目过程中，做过的很多产品里，曾经遇到过这样的页面：可以多选，但是同时只能最多选择三项。当时曾经考虑了3种交互方式：

（1）选中三个项后，点击选择第四个项时候，弹出toast提示：最多只能选三项；

（2）选中三个项后，其他项目自动切换为disable状态，只有取消选中一个项，才能解锁其他项的disable状态；

（3）选中三个项后，点击选择第四个项时候，选中当前项的同时，之前选择的最后一个项自动切换为非选中状态，

综合考虑以上交互方式的优劣；第一种最为简单易懂，但弹出toast提示的方式始终有点过于粗暴，从体验上讲，弹出某个元素的方式始终是一种打断当前操作“流”的反馈方式，即使是很轻量的toast提示；而第二种，则可能引起用户的误解，误以为其它选项锁定不可编辑，某种角度讲，也是一种瞬间打断思考/操作流的方式；而第三种，则最容易为用户所理解，也是在尽量顺着用户的思考和操作，没有打断，也没有任何元素disable。所以考虑下来，当时选择了此种交互方式。

当时为了验证，用axure做了这三种交互原型来亲临体验这三种操作，来实际评估那种究竟体验更好。

这也是axure在交互设计能够发挥的重要作用。axure基于条件、逻辑和变量的原型搭建工具，潜力还是非常大的，足以支持我们制作各种交互方式的验证原型。

实现后的效果的清晰版操作录制视频，以及所用到的素材文件夹、Axure工程源文件、导出的原型html文件都在附件中提供下载。

——————————————————分割线———————————————

【Step1】简单地搭建一下场景，以及制作一个复选框

（1）第一步是用动态面板建立一个大小为750x1334的总的容器，命名为“dymp_总容器”。参数如图1中红线圈内所示：

图1：

（2）制作复选框

.2.1 双击进入动态面板内。

添加一个图片部件，并双击图片部件，倒入素材文件夹中的“复选框 未选.png”，将此图片部件命名为“checkbox1”，如图2所示：

图2:

此时点击右侧的“MouseOver” ，在打开的交互样式编辑窗口中点击“import”，导入素材文件夹中的图片“复选框 hover.png”，如下图3所示：

图3：

用同样的方法，点击“MouseDown”、“Selected”导入图片“复选框 选中.png”。这样，一个复选框的交互样式就完成了。接下来要编辑交互动作。

.2.2  选中部件checkbox，双击Onclick打开case编辑窗口，在左侧选择添加一个Set Selected/checked动作，然后，再点击上方的“Edit condition”，要先编辑触发此click事件的条件。只有判断当前状态是“非选择/Unselected状态”时，点击动作才触发“Selected”即点击切换为选中状态，反之亦然。

所以在条件编辑窗口中，编辑条件如下图4所示：

图4：

点击ok关闭条件编辑窗口后，编辑CheckBox的Select状态为ture即选中状态，如下图5所示：

图5：

.2.3  然后点击Add case，相似的步骤再添加一个条件相反的动作，如下图6所示：

图6：

ok，预览一下，一个复选框已经制作完成了。

——————————————————分割线———————————————

【Step2】制作将要被作为选择项的界面元素。

（1）添加一个圆角矩形部件，并添加文字，编辑后如下图7所示：

图7：

（2）接下来是设置交互样式，类似前面的CheckBox复选框。先编辑hover状态，点击MouseOver打开交互样式编辑窗口，编辑hover状态参数如下图8所示：

图8：

渐变色分别是#7EE1DF和#5876FB，透明度均为20%。

接下来点击切换Mousedown，切换编辑点击状态。点击状态和选择状态参数相同。如下图9所示：

图9：

字体颜色设置为白色；

勾边设置为None;

渐变色和mouseover状态的渐变色相同，只是透明度改为100%

（3）然后设置event交互事件。点击操作与之前设置CheckBox复选框完全相同。再次就不赘述了，同样是onclick事件触发Selected和unselected，如下图10所示：

图10：

（4）OK，最后我们要设置checkbox和选择项之间的关联，点击两者任其一，均可选中/取消选中。先选中CheckBox1部件，为onclick事件添加action，设置如下图11所示：

图11:

同理，选中“选择项1”部件，为onclick事件添加action，设置如下图12所示：

图12：

（5）复制多组CheckBox和选择项部件，注意要分别重新命名，如下图13所示：

图13：

——————————————————分割线———————————————

【Step3】设置全局变量

接下来是重点，要创建“最多同时只能选三个项”的交互机制。

我们先来想一下，如果选择三项后，选择第四项则自动取消选择刚第三个被选择的项，这样的话，关键是什么？因为我们无法确定用户会点击哪三项，也就是说哪一个是第三项是随机的，所以关键则是每次做选择操作，都要标记每一个被选择的项，也就是给每一次做选择操作后每一个被选的项添加一个独有的代号，这样，我们在取消之前第三个被选择项的时候，可以准确索引定位到该项。

那么如何标记呢？这里又要用到全局变量了。

调出Global Variables窗口，添加6个全局变量分别命名为V1-6，赋予初始值分别为1-6，分别对应六个选项；

再添加一个命名为Vx的全局变量，赋予初始值为0，全局变量Vx是用来记录存储当前已经选择了多少个项的；

最后添加一个命名为Vtotal的全局变量，初始值为0。而Vtotal的用途则是用来记录（Vx+V1/2/3/4/5/6）两变量相加的值，

如下图14所示：

图14：

1、我们的第一步逻辑是这样的：

选择第一项的时候，Vx=Vx+1，这是Vx记录“已经选择了1项”；

选中CheckBox1，双击Onclick事件，在弹出的窗口中为其添加一个Set Variable Value动作，编辑变量=[[Vx+1]]，如下图15所示：

图15:

2、第二步的逻辑是：

要为当前选择的项做一个独有的数字标记，这个数字标记需要包含两层含义；（1）既能标记当前是哪一个选项；（2）又能标记当前选择的项是第几项；

所以，这里就需要用到之前创建的Vtotal和V1/2/3/4/5/6这两变量了。

仍然在CheckBox1的case编辑窗口中，再添加一个Set Variable Value动作，编辑变量值；Vtotal

=[[Vx+V1]]，如下图16所示：

图16：

这样一来，以第一个选项为例，如果是第一顺序被选择，则Vtotal=1+1=2；若是第三顺序被选，则Vtotal=3+1=4；

而以此类推，第二个选项，Vtotal=[[Vx+V2]]，若是第三顺序被选，则Vtotal=3+2=5；

所以，现在我们就达到了这样一个目标：每一个选项，在作为第三顺序被选择时，都有一个能够被索引定位到的独一无二的值，我们也就知道了在选择第四个选项时候，该自动取消选择哪一个选项。

同样的方法，剩余的checkbox2、3、4、5、6和选择项1、2、3、4、5、6都添加同样的两个Set Variable Value动作；

——————————————————分割线———————————————

【Step4】准备工作完成，来实现我们要的交互效果

变量创建完成并设置好赋值的机制后，下一步，就该真正要着手来实现我们要的交互效果了。

1、因为要实时监控当前是否已经选择了三个选项了，所以首先还是要用到之前几次教程经常提到的一个自动监听当前交互事件的方法：使用OnMove事件。

还是创建一个空白的动态面板，命名为“监控选项状态”，并为OnMove事件创建一个case，如下图17所示：

图17:

然后我们为每一个Checkbox的所有事件都添加一个Move 动作，即每做一次选择或者取消选择操作，均move一次刚创建的空白动态面板“监控选项状态”，如下图18所示：

图18:

特别注意：move这个动作的顺序一定要在最上面。

2、双击打开OnMove事件的case编辑窗口，并点击Add condition按钮，打开条件编辑窗口，编辑如下图19所示：如果变量值Vx等于3（即选择了3个选项之后）

图19:

因为每一个checkbox和“选择项”部件的onclick事件的move动作都是在最前面，所以，在做新的选择操作給Vx赋新值之前，先执行move操作也就是先执行“判断当前Vx”的操作，所以设置的条件不能是Vx=4而是Vx=3；

3、但是因为要判断是取消哪一个“第三顺序选择的选项”，所以我们还需要添加一个条件，如下图20所示：如果变量值Vtotal=4（也就是说第三顺序的那个选项，是”选择项1“），则取消选择“选择项1”

图20:

点击ok关闭条件编辑弹窗，添加一个set selected动作，在右侧选择“checkbox1”和“选择项1”，如下图21所示：

图21:

我们来预览一下，操作的时候，注意第一个选择操作和第二个选择操作都不要选择“选择项1”和“checkbox1”，第三个选择操作则选择“选择项1”/“checkbox1”，然后再选择第四个选项，我们可以看到原型中，刚刚选择的第三个选择操作被取消选择了。

同理，同样的方式，我们为动态面板 “监控选项状态”，按照不同的条件，添加更多不同的取消选择动作，最终设置如下图22所示：

图22:

4、但是问题又来了：目前只是做了四次选择操作后的自动取消选择机制，如果在第五次选择的时候呢？即如果选择了第四项，自动取消选择第三项，那么我们这时又选择第五项呢？如何准确定位并自动取消选择第四项？

我们当然可以简单粗暴的方式，把所有可能的Vx和Vtotal的组合全列出来，给动态面板 “监控选项状态”添加更多case，但是这太麻烦了。有没有更简单的方式呢？有的。

我们只需要保证Vx始终小于4就可以了。也就是，每次自动取消选择的时候，设置变量Vx=Vx-1，即可。

如下图23所示：

图23:

我们最后再来预览一下，可以看到，已经实现我们要的效果了！无论我们如何做操作，始终能保证只有三个选项被选中，并且能准确地自动取消上一个第三选择项。

但是我们进一步操作还是发现一个问题：在选择第三项后，若此时再取消选择，然后接下来继续增加选择选项时发现，竟然能选四项？这是为什么？这是因为，选择三项后马上取消选择一项，Vx实际做了两次（-1）的减法，Vx=1了。

这又是为什么？这是因为我们前面为所有事件的所有case都设置了“move动态面板 ‘监控选项状态’ ”的动作，而且为所有取消选择的case都设置了（Vx=Vx-1）的动作，而选择三项后即Vx=3的时候，如果取消选择，实际上不仅取消选择的case做了一次Vx-1的减法，动态面板 “监控选项状态”的OnMove事件也做了一次Vx-1的减法，那么就相当于Vx做了两次-1的减法，这就不对了。

所以，我们要将所有取消选择的case都删除“move动态面板 ‘监控选项状态’ ”的动作，实际上，仔细想一下，取消选择的case其实是不必要动态面板 “监控选项状态”做实时监控的，因为下一次做增加选择，必然还是会有move动作，还是能处在实时监控当中。

将所有取消选择的case都删除“move动态面板 ‘监控选项状态’ ”的动作，如下图24所示：

图24:

在实际产品场景中，为了能更明白地提示用户，可以在第一次做“选择第四项同时自动取消选择上一个第三项”的操作的时候，弹出toast提示：“最多只能选三项”。然后设置3s后自动消失。