【Axure9 百例 NO.46】中继器多条件判断的优雅处理

“ 多条件交互处理非常好用的方法。”

这是《Axure9 百例》系列第 46 篇

在上次的 【Axure9 百例 NO.45】中继器的不同场景下的样式处理 里留了一个话题，如何处理多个条件判断。即如果要满足多个条件，如何遍历每个场景并处理。继续看一下上次的问题：

1）有新消息，有免打扰

2）有新消息，无免打扰

3）无新消息，有免打扰

4）无新消息，无免打扰

if new_msg == "1" 并且 mute == "1"

--显示小红点，显示免打扰图标

else if new_msg == "1" 并且 mute == "0"

--显示小红点，不显示免打扰图标

else if new_msg == "0" 并且 mute == "1"

--不显示小红点，显示免打扰图标

else if new_msg == "0" 并且 mute == "0"

--不显示小红点，不显示免打扰图标

01

——

交互处理

今天说的方法，使用 Axure 的一个不起眼的动作：触发事件。

1）在任意某个元件上，添加一个事件，例如单击事件。

2）这个事件只判断一个条件，例如如果有新消息就显示小红点，否则不显示

3）在另外一个元件上，重复 1~2 的步骤，处理其它条件判断。

4）在中继器的每项加载事件里，分别触发新加的元件上的事件。

这样做的好处是：

1）顶层的事件处理逻辑简单

2）每个条件单独判断，逻辑清晰

按照上面的步骤，我们看上次的问题如何处理。

1）在任意某个元件上，添加一个事件，例如单击事件。

2）这个事件只判断一个条件，例如如果有新消息就显示小红点，否则不显示

添加单击事件，你也可以添加双击事件，后面触发这个事件即可。

事件里判断 new_msg，如果等于 1 就显示小红点，否则就隐藏。

3）在另外一个元件上，重复 1~2 的步骤，处理其它条件判断。

4）在中继器的每项加载事件里，分别触发新加的元件上的事件。

回到中继器的每项加载事件里，简化它原来的事件处理。

因为中继器的逻辑是可以实时看到的，看看预览效果。

实际的预览效果：

第二个都不显示(new_msg=0,mute=0)。

第三个只显示免打扰(new_msg=0,mute=1)。

第四个只显示新消息(new_msg=1,mute=0)。

是不是处理的方式更优雅了呢？

02

——

小结

事件触发操作就像函数调用一样（不理解函数概念的，请看这里 【Axure9百例】15.关于函数），在另外一个元件上添加好逻辑，然后去触发它。这种方式处理的好处是逻辑简单，思路清晰。

你一定要动手试一下哦~

关于作者

——

公众号「axurestore」，产品交互原型设计/Axure

往期回顾

【Axure9百例】45.中继器的不同样式

【Axure9百例】44.百度网盘拖动按钮样式

【Axure9百例】43.百度网盘验证

【Axure9百例】42.支付宝首页样式

【Axure9百例】41.调色板