术语图鉴/UI/UX 设计/标签页
←→切换Esc返回

标签页 Tabs

你可能会说

这个区域用标签页切换:全部、已发布、草稿。

同一区域内切换不同内容的组件。

同一区域内切换不同内容的组件。如「全部 | 已发布 | 草稿」,点击不同标签显示不同列表。

也常被叫作Tabs

生活类比

像文件夹的分隔标签——同一个柜子里,拉不同标签看不同的文件。

🎮 动手试试

概览 的内容
选择题选择一个你认为最合适的答案

关于「标签页」,以下哪个描述最准确?

你可以这样告诉 AI

帮我在内容区加标签页切换:三个标签'全部、已发布、草稿',点击切换下方列表,当前标签高亮加下划线。

容易混淆?这样区分

标签页 Tabs≠
折叠面板 Accordion

标签页所有标签始终可见、点击切换内容;折叠面板只看到标题行、点击展开后才显示内容。

什么时候用

同一区域切换视图

需要在同一区域内切换不同内容视角(如「全部/已读/未读」),用标签页让用户点击标签即可切换,不需要跳转页面。

和 AI 协作时

想让 AI 做标签页时,说「帮做三个标签:全部、已发布、草稿,点击切换下方列表,当前标签高亮加下划线」,AI 会生成 Tabs。

什么时候不用

标签数量超过5个

标签太多会挤满一行甚至换行,用户体验变差——考虑改用下拉选择或侧边导航替代,避免标签溢出。

与需要对比查看的场景无关

需要同时对照 AB 两份内容时(如旧版 vs 新版),标签页一次只显示一个反而妨碍对比,用并排视图更佳。

组成结构 · Anatomy

1
核心概念Core

同一区域内切换不同内容的组件。如「全部 | 已发布 | 草稿」,点击不同标签显示不同列表。

2
实际表现In Practice

像文件夹的分隔标签——同一个柜子里,拉不同标签看不同的文件。

3
与 AI 的关联AI Context

和 AI 沟通时提到「用 Tab 切换内容」,就是做标签页组件。

典型使用场景

切换内容视图
告诉 AI「做三个标签页:全部、已发布、草稿,点哪个切哪个列表,当前标签高亮蓝色下划线 2px」
想弄懂概念时
告诉 AI「用大白话给我解释什么是标签页,举个生活中的例子」

延伸阅读