在设计任何产品时，最重要的不是“能”做，而是“应该做”。标签页（Tabs）看似简单，却承载着用户关于“内容分隔”与“互斥性”的强烈预期。

先说一句话：从我观察的产品里，最常见的错误是把“标签”当成了“折叠”或“筛选”。当用户点击某个标签，往往期待页面只展示对应的内容，其他标签的内容则被完全屏蔽。

心理学家卡尼曼在《思考，快与慢》中指出，直觉系统会把界面拆分为若干个独立的“房间”。每个房间只容纳一类信息。若把两个房间的墙壁拆掉，用户就会失去“房间”感，进而产生认知负荷。

案例支撑：在 2018 年 Nielsen Norman Group 的一项研究中，约 92 % 的受访者表示，当标签页被点击时，页面内容会“刷新”成单一视图。相比之下，仅有 7 % 的受访者愿意在同一标签页里同时看到多类信息。

为什么标签页适合“互斥”？因为它们天然提供了：1) 可视化的选项卡；2) 明确的状态切换；3) 对页面层级的“跳转”功能。设计时，只要保证每个标签代表一种“状态”，并且每种状态下的内容互相排斥，就能贴合用户的心智模型。

然而，当标签页被滥用时，往往会出现三大问题：① 过滤与分页混用——如某电商首页把“新品”“促销”“品牌”放在同一行标签里，用户点击“新品”后，页面既要过滤又要分页，导致信息碎片化。② 关联内容并排——在社交应用里把“帖子”“评论”“点赞”放在同一标签行，用户在“评论”标签里仍能看到原帖内容，破坏了“互斥”的预期。③ 隐蔽导航——把“个人中心”“订单记录”“客服支持”等功能放在标签里，却不在主导航栏显示，用户不得不先进入标签再寻找，造成搜索成本升高。

如何判断标签页是否符合“互斥”原则？我建议采用三步法：① 列举所有可切换状态，评估它们是否真正“互斥”。如果存在共享信息，考虑拆分为子导航或隐藏面板。② 观察用户在切换时的心理预期。可通过眼动仪或热图验证用户是否在预期位置停留。③ 对比业务 KPI：如果标签切换后页面停留时间显著下降，往往是标签导致信息过载。

设计实践建议：• 保持标签数在 5 个以内，过多会让用户一眼看不清“房间”边界。• 用明显的视觉层次（颜色、粗细、阴影）区分选中与未选中状态，让“房间”壁垒一目了然。• 在标签内部加上“返回”或“清除”按钮，让用户随时可以重置到默认状态，防止“房间”被不经意打开。• 若需要在标签内展示多层内容，考虑嵌套导航或弹窗，而不是把它们塞进同一标签里。

在实践中，我常遇到的两种痛点：① 用户在“设置”标签里，看到“账户信息”“隐私设置”“通知设置”这三类互斥信息，却因布局混乱而一次性加载所有内容，导致页面卡顿。② 在 SaaS 产品里，把“报表”“仪表盘”“设置”放在同一标签行，用户想看报表时，却误点到仪表盘，导致任务流中断。两者的共通点是：标签背后的“互斥”逻辑被破坏。

总结：标签页是把“房间”划分清晰的好帮手，前提是你对房间边界的定义要严谨。别把它当成万能工具；当你怀疑用户是否会把标签当成“筛选器”或“折叠面板”时，就需要重新评估它的“互斥性”。

你在产品里，用过哪些“标签+多类信息”的组合？它们成功还是失败？欢迎在评论区分享，让我们一起把“互斥”做到位。