Axure 选项组
Axure 中用于管理同组元件“同一时间只能选中一个”的交互功能，适合 Tab 页签、导航菜单、筛选按钮组、表单单选项等所有互斥选择场景。
简介
Axure 选项组是 Axure 原型工具中一个常被低估的交互功能。它的核心作用不是生成某种视觉样式，而是把一组元件纳入同一个互斥状态规则：同一组里只能有一个元件处于“选中”状态。当用户点击并选中一个新元件时，组内此前被选中的元件会自动取消选中。对产品经理和交互设计师来说，这相当于把“取消其他项选中”这类重复逻辑交给工具层自动处理。
在传统做法里，如果要实现 4 个 Tab 页签，常见方式是给每个标签分别写点击事件：点 A 时选中 A、取消 B/C/D；点 B 时选中 B、取消 A/C/D；如果还要同步内容区，还要再写动态面板切换。随着标签数量增加，事件数量和维护成本会成倍上升。选项组把其中“选中态互斥”这一部分抽离出来，只保留“当前元件设为选中”这一句动作，其他取消选中的动作由 Axure 自动完成。
这类功能的价值在于让原型更接近“状态机”而不是“事件堆叠”。设计者不需要为每一个选项写完整的 if/else 或 Case 逻辑，只需要先定义好哪些元件共享同一组选中态，再把用户点击映射到“设置当前元件为选中”。这既降低出错概率，也让后续改样式、加选项、调整默认态时更容易维护。
关键信息
- 类型：原型工具功能 / 交互状态管理机制
- 领域：产品原型设计、交互设计、Axure 原型制作
- 核心规则：同一选项组内，同一时间只能有一个元件处于选中状态
- 典型场景：Tab 页签、底部导航、侧边菜单、表单单选项、排序筛选按钮组
- 关键搭配：元件“选中”样式 + “设置选中”交互 + 动态面板内容切换
- 相关概念：互斥选择、原型状态管理、动态面板、单选交互
核心特性
1. 把互斥逻辑从点击事件中抽离出来
选项组最重要的能力是让互斥关系从“每个按钮的点击事件”升级为“组级规则”。只要几个元件属于同一个选项组，Axure 就能自动处理“选中新项时取消旧项”的状态更新。设计者只需要在点击时设置当前元件为选中，不需要逐个指定其他元件取消选中。
这种抽离非常适合高频出现的“多选一”场景。比如 4 个 Tab 页签中只有一个能高亮，列表排序按钮中只有一个排序方式生效，左侧导航中只有一个当前页面入口高亮。只要场景符合“同一维度、同一时刻、唯一选中”的模式，就可以考虑使用选项组。
2. 视觉状态和交互逻辑解耦
选项组本身不规定选中态长什么样。设计者需要先给元件配置“选中”样式，例如蓝底、下划线、边框高亮、对勾图标或文字颜色变化。选项组负责保证组内只有一个元件处于这个状态，具体视觉反馈由元件样式定义。
这种分工让原型更容易维护：如果只是想把 Tab 的高亮从蓝底改为下划线，不需要改每个点击事件，只需要改元件选中样式。如果只是想增加一个 Tab，也只需要把新标签放入同一个选项组并设置点击时选中当前元件，而不是重写全部互斥逻辑。
3. 可与动态面板形成标准 Tab 组合
选项组只解决“哪个标签被选中”的问题，不负责下方内容区切换。因此在完整 Tab 原型中，标准做法是：标签元件加入同一个选项组，点击时设置当前标签为选中，同时追加“设置面板状态”动作，让动态面板切到对应页面。
这是一种很清晰的职责划分：选项组管理导航状态，动态面板管理内容状态。相比把所有状态都写在 Case 里，这种组合更接近真实产品里的“导航选中态 + 内容路由”结构，也更适合后续交给设计、研发或 AI 前端生成工具理解。
4. 分组边界决定交互语义
选项组的使用关键不是“看到几个按钮就全放一组”，而是判断这些按钮是否属于同一个互斥维度。文章特别提醒，如果想做多选筛选，不要把所有属性都放进同一个选项组；更合理的做法是为每个属性类别单独创建选项组，例如“品牌”一组、“尺寸”一组。这样每个维度内部互斥，不同维度之间可以并存。
这个原则对复杂筛选原型尤其重要。错误分组会让用户点击一个品牌时取消尺寸选择，或点击一个排序项时清掉另一个独立筛选项，导致原型行为不符合业务逻辑。选项组不是越大越好，而是要与业务语义一致。
不同素材中的观点
- 2026-07-07-woshipm-axure-option-group-mutual-exclusion：这篇素材明确把 Axure 选项组定义为被低估的“互斥选择”神器。作者认为它的精髓是把互斥逻辑交给工具管理，让设计者专注于样式和内容切换。文章给出 4 个 Tab 页签的完整操作流程：画出标签、设置默认与选中样式、全选后创建选项组、点击时设置当前元件选中、页面载入时设置默认选中项，并在需要内容切换时配合动态面板。素材还扩展到表单单选项、筛选按钮组和左侧导航菜单，说明这个功能的适用边界不是 Tab，而是一切“多选一”交互。
实用信息
快速上手步骤
- 先判断是否互斥：确认这组元件是否属于同一维度，并且同一时间只能选中一个。如果可以同时选多个，就不要放进同一个选项组。
- 设置默认样式和选中样式：先让每个元件有清楚的未选中状态，再配置“选中”样式，例如高亮背景、下划线、边框或对勾。
- 全选同组元件并命名选项组：在右侧交互面板的选项组区域输入有意义的组名，例如
Tab_Main、Menu_Left、Filter_Sort。 - 给每个元件添加点击交互：动作统一为“单击时 → 设置选中 → 当前元件 → 真”。不要再逐个写取消其他元件的动作。
- 设置默认选中项：在页面载入时设置默认项为选中，避免原型初始状态没有焦点。
- 需要内容切换时再加动态面板动作：在同一个点击事件中追加“设置面板状态”，把内容区切到对应状态。
命名建议
Tab_Main：主内容区 Tab 页签。Menu_Left：左侧导航菜单。Nav_Bottom：移动端底部导航。Filter_Sort：排序筛选按钮组。Form_Gender、Form_Level：表单里的单选维度。
命名的目标不是好看，而是让后续维护者一眼看出这组元件控制的是哪个互斥维度。当页面元件很多时，清晰命名能显著降低误改风险。
注意事项 / 避坑指南
- 不要把多选项误放同组：同组选项会自动互斥，如果业务需要多选，应拆成多个维度或不用选项组。
- 不要忘记设置默认选中：Tab 或导航类交互通常需要页面载入时有一个默认高亮项，否则用户不知道当前页面对应哪个入口。
- 不要把选项组选中态和内容切换混为一谈：选项组只负责高亮互斥，内容仍需用动态面板或其他交互动作切换。
- 不要为每个选项继续手写取消其他项逻辑：这样会让选项组的价值被抵消，也更容易出现重复或冲突事件。
- 选项组边界要跟业务语义一致：排序维度、品牌维度、尺寸维度、导航维度应分别建组，不能为了省事混成一组。
与其他方法论的关系
- 与 互斥选择 的关系：Axure 选项组是互斥选择在原型工具中的具体实现。
- 与 AI前端生成 的关系：AI 前端生成强调交互状态必须可验收；选项组提供了在原型阶段表达选中态、默认态、状态切换边界的清晰方式。
- 与 产品思维 的关系：选项组体现了把重复逻辑规则化、工具化的产品执行思维。好的原型不是事件越多越完整，而是状态边界越清晰越可靠。