Tabs
标签页
WebMobileDesktop上手难度: 容易
同一层级的几组内容并排放着，切换标签就切换整块内容——而且每组都有自己的 URL。
Live Demo
真的可以点- 今天去了海边，捡到一块很特别的海玻璃
- 拍了一下午，其实就为了这一张
- 阴天也很好，光很柔
你刚才看到的这个：小红书点进一个用户主页，顶部有「主页 / 视频 / 赞过 / 收藏」四个标签，点哪个下面就换成哪块内容——这就是 Tabs。
它到底是什么
Tabs 的关键是「平级 + 有 URL + 保持上下文」。用户点了「资料」，URL 会变成 /profile，而不是弹出一个新页面。它承载的是「同层的不同视角」。
选项卡标签栏tab bartabbed interface页签
Anatomy · 它由什么组成
Tab List标签栏
横向排布，底部有指示线
Active Indicator选中指示
下划线或色块标记当前项
Tab标签
短标签，1–4 字最佳
Panel内容面板
与标签一一对应的内容区
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 2–5 个平级内容分区 | 用 |
| 切换后仍停留在同一页面上下文 | 用 |
| 每个分区内容都不为空 | 用 |
| 内容有先后顺序（Stepper） | 不用 |
| 两个选项需要「二选一」而不是「都看看」 | 视情况 |
超过 5 个标签就该考虑用侧边导航或下拉菜单了。
切换会导致用户丢失当前页面的编辑状态时，不要用 Tabs——用户会以为内容还在。
Similar Patterns
别搞混一句话区分：同一层级的几组内容并排放着，切换标签就切换整块内容——而且每组都有自己的 URL。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在用户资料页加 Tabs：主页 / 作品 / 喜欢。点标签切换下方内容，选中项有下划线指示。
不要只对 AI 说
Bad → Better不要这样对 AI 说
上面加几个按钮可以切换下面。
改成这样说
在资料页加 Tabs（标签页），标签为 主页 / 作品 / 喜欢，选中项有底部指示线，切换时 URL query 同步。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。