互斥选择
同一组选择项中，同一时间只允许一个选项处于选中状态的交互模式；它常见于 Tab 页签、单选按钮、导航菜单、排序筛选等产品界面中。
简介
互斥选择是一种基础但极其高频的交互模式。它描述的是这样一类产品状态：多个选项属于同一维度，用户只能选择其中一个；当用户选择新选项时，旧选项必须自动取消。最典型的例子是 Tab 页签、单选按钮、底部导航、左侧菜单和排序按钮组。它看起来只是一个简单的视觉高亮问题，但实际影响的是用户对“当前系统状态”的理解。
在产品原型和真实产品中，互斥选择承担两个任务。第一，它告诉用户当前处于哪一个视图、分类或状态，例如当前停留在“订单管理”还是“客户管理”页面。第二，它约束用户行为，避免同一维度出现多个互相冲突的选择，例如排序方式不能同时是“销量最高”和“价格最低”。如果互斥关系没有被正确处理，界面就会出现多个高亮项、状态冲突、内容区与导航高亮不一致等问题，用户会很难判断系统到底执行了哪个选择。
互斥选择的关键不是“按钮不能多选”这么简单，而是要先判断选项之间是否属于同一语义维度。Tab 页签通常属于同一维度，因为它们控制同一块内容区；排序按钮也属于同一维度，因为当前列表只能按一种主规则排序；但商品筛选中的“品牌”和“尺寸”不是同一维度，品牌内部可能互斥，尺寸内部可能互斥，品牌与尺寸之间却可以同时存在。好的交互设计必须先定义维度，再设计互斥规则。
关键信息
- 类型：交互模式 / 状态管理概念
- 领域：产品设计、交互设计、原型设计、界面状态管理
- 核心规则：同组内唯一选中，选中新项时旧项自动取消
- 典型控件：Tab 页签、单选按钮、底部导航、侧边菜单、排序按钮、分段控制器
- 关键风险：分组错误、默认态缺失、视觉状态与内容状态不一致
- 工具实现：Axure 可通过 Axure 选项组 实现；前端可通过单一状态变量、路由状态或表单 radio group 实现
核心特性
1. 同一维度内唯一选中
互斥选择的前提是“同一维度”。如果多个选项都在回答同一个问题，就应该互斥。例如 Tab 页签回答“当前看哪个内容区”，排序按钮回答“当前列表按什么规则排序”，左侧导航回答“当前处于哪个一级页面”。这些场景中，多选会制造语义冲突，因此必须保证唯一选中。
这个规则对原型设计很重要。设计者在画界面时不能只看按钮形态相似就放进一组，而要问：这些选项是不是在控制同一个状态变量？如果答案是肯定的，互斥选择成立；如果答案是否定的，就应该拆分或允许多选。
2. 选中状态必须可见且稳定
互斥选择不只是数据状态，也必须通过视觉反馈让用户看见。常见方式包括背景色变化、文字加粗、下划线、边框高亮、对勾图标、图标填充等。视觉反馈越明确，用户越容易理解当前选择。
稳定性同样关键。如果点击后内容切换了，但导航项没有高亮，用户会失去方位感；如果导航高亮了，但内容区没有切换，用户会怀疑系统卡住或交互失败。因此互斥选择通常需要同时维护两个层面：选择项的视觉状态，以及它控制的内容或数据状态。
3. 默认选中项是体验起点
很多互斥选择场景需要默认态。Tab 页签通常默认选中第一个标签；底部导航默认选中当前页面；排序按钮默认选中“综合排序”。没有默认选中项时，用户进入页面后会不知道系统当前采用哪种视图或规则。
默认态不是小细节，而是产品状态模型的一部分。它回答“用户还没操作时，系统处于什么状态”。在原型里，默认态可以通过页面载入事件设置；在真实产品里，默认态通常来自路由、后端配置、用户上次选择或业务默认规则。
4. 互斥逻辑应尽量由系统规则管理
如果每个选项都手写“选中自己、取消其他所有项”，当选项数量增加或顺序变化时，就很容易漏改。更好的方式是把互斥逻辑抽象为组级规则，例如 Axure 的选项组、HTML 的 radio group、前端状态中的 selectedTab 或 activeMenuKey。这样每个选项只负责把全局状态改成自己，系统根据规则自动渲染其他选项为未选中。
这种抽象体现了产品与工程的共同原则：把重复且易错的逻辑从单个事件中抽离出来，变成可复用、可验证、可维护的状态规则。原型阶段这样做，后续交给设计和研发时也更容易理解。
不同素材中的观点
- 2026-07-07-woshipm-axure-option-group-mutual-exclusion：这篇素材从 Axure 原型制作角度解释互斥选择。文章认为，“选项组”的精髓就是将“互斥”的逻辑抽离出来，由工具代为管理，让设计者专注于样式和内容切换。作者用 4 个 Tab 页签演示了完整流程，并指出它同样适用于表单选项、筛选按钮和左侧导航。文章还特别强调：如果需要多选效果，就不要把所有选项放在同一个选项组，而应为每个属性类别单独创建选项组。这其实是在提醒设计者先判断“互斥维度”，再决定分组方式。
实用信息
设计互斥选择的检查清单
- 明确维度：这些选项是否在回答同一个问题？例如“当前页面是什么”“当前排序规则是什么”“当前会员等级是什么”。
- 确定默认态：用户进入页面时默认选中哪一项？这个默认来自业务规则、历史记忆还是系统推荐？
- 定义选中样式：选中项和未选中项是否一眼可区分？不要只依赖很细微的颜色差异。
- 同步内容状态：选中态变化后，内容区、列表数据、表单值或路由是否同步变化？
- 处理取消逻辑：用户是否允许“一个都不选”？多数 Tab 和导航不允许，某些筛选项可能允许清空。
- 避免跨维度误互斥：品牌、尺寸、颜色、价格等筛选维度不要因为样式相同就放进同一组选项。
常见场景
- Tab 页签：同一内容区的多个视图切换，通常只能选一个。
- 单选按钮：表单中性别、等级、类型等唯一值字段。
- 导航菜单：当前页面或模块高亮。
- 排序按钮：列表当前排序规则。
- 分段控制器：移动端常见的“全部 / 待处理 / 已完成”等状态切换。
常见错误
- 多个选项同时高亮：说明互斥状态没有被统一管理。
- 高亮项与内容区不一致：说明视觉状态和业务状态脱节。
- 没有默认项：用户进入页面后不知道系统当前状态。
- 误把多选筛选做成互斥：用户选择品牌后尺寸被清空，说明维度划分错误。
- 手写取消逻辑导致漏项：新增一个选项后忘记在其他选项事件里取消它，导致状态冲突。
与其他方法论的关系
- 与 Axure 选项组 的关系：Axure 选项组是互斥选择在 Axure 原型中的具体工具实现。
- 与 AI交互设计五领域 的关系：互斥选择主要属于 Output UX 和 Refinement UX 的基础状态反馈问题，帮助用户看清当前结果和微调方向。
- 与 AI前端生成 的关系：AI 生成界面时常见问题是“页面好看但业务不可用”，其中一个典型表现就是缺少清晰的选中态、空态、异常态和状态同步。互斥选择是最基础的一类可验收状态。
- 与 产品思维 的关系：互斥选择体现的是把用户心智中的分类、状态和决策边界翻译成界面规则的能力。