界面图鉴
标签页Tabs
你可能会问
标签页到底是什么？它和顶部的导航栏有什么区别？
简单来说
同一块区域里的几个平级视图，点标签切换，一次只看一个。
01 · 拆开看看
这一块由什么组成
它解决的是「地方小、内容多」：几组平级内容共享同一块屏幕，标签负责切换，当前那个高亮。它通常由这几部分组成：
标签列Tab List
横排的几个选项，最好不超过五个。
当前标签Active Tab
下划线或底色高亮，标记你在哪个视图。
内容面板Panel
标签对应的内容区，一次只显示一个。
02 · 常见变体
同一个零件，几种摆法
激活标签下一条横线，最常见。
激活项一块底色，像分组开关。
标签竖在左侧，设置页常用。
03 · 火眼金睛
这个页面里，哪一块是标签页？
三个都在帮你「定位」，但只有一个能切换视图。
点一块试试，看看它叫什么
标签页Tabs
就是它！同一块区域里的平级视图，点一下换一个，当前项高亮。
导航栏Navbar
不是它。顶部那条管的是全站跳转，换的是整个页面。
面包屑Breadcrumb
不是它。这行带分隔符的路径是面包屑——标记你在第几层，不切换视图。
04 · 用与不用
什么时候该上它
适合
- 平级内容共享同一块空间
- 设置页的分组
- 详情页的多维度信息（介绍、评价、参数）
先别用
- 内容有先后顺序——用分步向导
- 用户需要同时对比两块内容时
- 标签超过五个——考虑下拉或侧边栏
05 · 想一想
一道题，检查眼力
产品页要放「功能介绍、用户评价、价格」三块内容在同一个位置。用标签页合适吗？
对。三块内容平级、用户各取所需，标签页让每个人直达想看的那块。
铺开也是常见做法，但每块内容都很长时页面会失控——空间紧张时标签页更聚焦。
弹窗是打断工具，不是浏览工具。让用户连关三个弹窗是行为艺术。
06 · 说给 AI 听
让 AI 改它时，这样说
记得说默认选中哪个标签——这是最容易被 AI 猜错的细节。
把介绍、评价、参数做成标签页，默认显示介绍
标签页换成胶囊样式，激活项用品牌橙色
标签状态同步到网址，刷新后还停在原来的标签
手机上标签放不下就允许横向滑动
最容易踩的坑
标签页会藏内容：用户不点，第二个标签就永远没被看见。放进去的内容，默认只有一半人会看到。