「教程」「前端」「入门」三个互不重叠的短词,其中一个设为主分类。可扫描、可筛选,到上限就停。
界面与交互 · 内容与数据展示
标签Tag
由用户输入、可增删可选中、用可见文字表达的短文本标注;到上限要提示,与系统只读的徽标相对。
亲手编辑一组文章标签
一篇新文章要打标签:输入回车添加,点叉移除,点标签设主分类,到 5 个触上限。右侧的徽标始终只读,作为 tag 与 badge 的对照。
文章《用标签管理内容分类》3/5
已载入 3/5 个标签,其中「教程」是主分类。在输入框打字并回车添加新标签,点标签切换主分类,点叉移除;右侧「未读 12」是系统徽标,只读,作为对照——它不会随这里的编辑变化。
面板教会的知识点
把刚才操作里看到的现象命名清楚。
- 文字承担含义:标签就是那几个字,颜色和描边只加强,丢失仍可区分。
- 可输入新建:用户给什么文字,标签就长什么;内容来自用户,不是预定义枚举。
- 可移除:叉按钮带「移除标签X」的可访问名称,动作对象明确,结果立即更新。
- 可选中(主分类):点标签切换激活态,用描边和填充表达,不靠颜色独撑。
- 有上限:达到 5/5 禁用输入并提示下一步先移除,而不是悄悄吞掉输入。
- tag ≠ badge:左侧标签可编辑,右侧徽标只读;一个是用户给的状态,一个是系统给的计数。
什么时候用标签
从用户要解决的问题出发,而不是从组件名出发。
适合:需要让用户给对象自由打「短文本分类或状态」,且数量可变——文章主题、技能标签、商品特征、当前筛选条件。
不适合:系统计数或状态提示(用 badge);固定枚举里单选一个(用 radio 或 segmented);需要长文本描述的分类(用标题或 select);可折叠的分组导航(用 tabs 或 collapse)。
怎么用:从输入到判断的最短路径
四步把标签用对。
- 给字:输入框打字、回车(或从建议池点选),标签物件立即长出来。
- 给含义:每个标签是稳定短词;主分类或当前筛选用选中态表达,不另起颜色。
- 给出口:可关闭标签配独立叉按钮,移除后结果或计数立即更新。
- 给上限:超过 5–7 个先收纳(+N)或提示,避免把分类做成噪声墙。
同一目标的正反例
给同一篇文章打分类,只改一个关键选择。
「测试1」「啊啊」「TODO」「前端」「前端2」……超过上限仍继续添加,重复、无意义、扫描失效,主分类也分不清。
快速自测
文章已有「教程、前端、入门、案例、更新」5 个标签,用户想再加「深度」。最合适的下一步是?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。