跳转到内容

前端与界面 · DEFINED TERM

Tag 与 Badge

用短标签表达分类,用小徽标表达数量或状态提醒。

你可能会这样说“状态用标签,未读数量放在菜单图标旁。”

VISUAL EXAMPLE

先看懂它怎么工作

Tag 与 Badge
层 1读取属性
层 2映射样式
层 3在关联对象旁显示

MECHANISM

运行机制

  1. 读取属性
  2. 映射样式
  3. 在关联对象旁显示

USE WHEN

适合这样用

分类、筛选条件、状态和未读数

NOT FOR

不要这样理解

不要用十几种颜色制造新的识别负担

TELL YOUR AGENT

可直接发给 Agent

请按“Tag 与 Badge”的概念处理这个需求:状态用标签,未读数量放在菜单图标旁。。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

含义不只依赖颜色,长度受控,徽标与所属对象关系明确

OFFICIAL SOURCES

官方来源