还在为复杂的交互逻辑头疼吗？Axure中的'选项组'功能可能是你从未发现的设计神器。从Tab页签到底部导航，从表单选项到筛选按钮，这个被低估的功能能一键解决所有'互斥选择'难题。本文将带你深入探索选项组的核心原理，并通过实际案例展示如何用最少步骤实现最优雅的交互效果。

还在用一堆动态面板和复杂的Case逻辑做切换？该试试更优雅的方法了。

在产品原型设计中，“互斥选择”是最常见的交互之一，比如底部导航、侧边菜单、筛选按钮组……当然，还有最经典的Tab页签。

很多同学的做法是：为每个元件单独设置点击事件，手动控制选中和取消选中状态。元件少时还好，一旦数量多起来，不仅工作量翻倍，而且容易遗漏和出错。

今天，我就分享一个Axure中被严重低估的神器——“选项组”，只需简单几步，就能优雅地解决所有同类问题。

首先，什么是“选项组”？

简单来说，它就像一个无形的“组织者”，将一组元件归拢到一起，并立下规矩：“在我们组里，同一时间，只能有一个成员处于选中状态。”

当你在组里选中一个新成员时，之前被选中的成员会自动被取消选中。这个互斥逻辑，由Axure在后台自动帮你执行，完全不需要编写任何复杂的判断条件。

如何应用？从一个Tab页签说起

假设我们要做一个有4个标签的Tab切换。

1. 常规设置

画出4个矩形标签，设置好默认样式（如灰底黑字）。

为每个标签设置“选中”样式（如蓝底下划线）。

2. 关键一步：创建选项组

全选这4个标签。

在右侧的【交互】面板中，找到“选项组”设置（点击【显示全部】即可看到）。

输入一个组名称，比如 “MainTab”。

就这么简单！现在，这4个标签已经是一家人了。

3. 添加交互

为每个标签添加交互：【单击时】 → 【设置选中】 → 【当前元件】，值设为【真】。

页面`载入时`，设置你想默认选中的那个标签为选中状态。

预览一下，完美的Tab切换效果已经实现了！

“选项组”的高级玩法：不止于Tab

掌握了这个逻辑，你会发现它的应用场景非常广泛，本质上都是“多选一”的需求。

场景一：表单中的选项切换

比如性别选择（男/女）、会员等级（白银/黄金/铂金）。

同样用几个矩形或圆形（模拟单选按钮）制作选项，放入一个选项组。

可以给选中的选项加上对勾图标、改变边框颜色等，交互反馈非常清晰。

场景二：复杂的筛选按钮组

在列表页，常常有多个筛选标签（如“综合排序”、“销量最高”、“价格最低”）。

把它们放进一个选项组，就能轻松实现点击一个，其他自动释放的效果。

更进阶一点：如果你想要“多选”效果（比如筛选商品属性），那就不要把它们放在同一个选项组里，而是为每个属性类别（如“品牌”、“尺寸”）单独创建选项组。

场景三：左侧导航菜单

和Tab原理完全一致，将一级菜单项放入选项组，选中时高亮显示当前所在页面。

总结与技巧

“选项组”的精髓，就是将“互斥”的逻辑抽离出来，由工具代为管理，让我们能专注于样式和内容的切换。

最后给你两个小贴士：

1. 规范：给选项组起一个有意义的名字（如 `Tab_Main`、`Menu_Left`），当页面元件很多时，方便自己识别和管理。
2. 配合动态面板：实现内容切换时，只需要在`单击时`的交互中，增加一个“设置面板状态”的动作，让动态面板切换到对应的状态页即可。这是实现Tab内容区切换的标准搭配。

学会了这个，下次再遇到任何“多选一”的交互需求，你都能从容应对，快速实现。赶紧打开Axure试一试吧！