红点

本词条尚无可操作示例；插画为编辑示意，对照红点与数字角标两种形态，不代表已验证的实现。应用到产品前仍须确认红点能被查看清除，并为它提供文字等效形式。

{
  "states": [
    "none",
    "unread",
    "seen"
  ],
  "a11y": [
    "红点的含义有文字等效形式，不只靠颜色与形状表达",
    "承载它的入口在可访问名称中说明有未读内容"
  ],
  "motion": "出现与消失可以是瞬时的；减弱动态偏好下不做闪烁或脉动"
}

{
  "id": "notification-dot",
  "type": "micro",
  "name": {
    "zh": "红点",
    "en": "Notification Dot"
  },
  "aliases": [
    "Badge Dot",
    "Unread Dot",
    "小红点",
    "未读标记"
  ],
  "granularity": "state",
  "intents": [
    "inform",
    "reveal-actions"
  ],
  "tags": [
    "未读",
    "标记",
    "提示",
    "入口",
    "注意力"
  ],
  "definition": "附着在图标或入口上的一个小圆点，只表示\"这里有新的东西\"，不给出数量、不说明内容，也不要求立即处理；用户进入查看后它自行消失。",
  "boundary": "红点与数字角标承担不同的信息量：角标说\"有多少条\"，红点只说\"有\"。选红点通常是因为数量本身不重要或不可靠；一旦用户开始追问\"到底有几条\"，说明该用角标了。它也不是通知：通知会主动呈现内容，红点只是被动等待被发现。红点的有效性完全依赖稀缺——每个入口都挂上红点之后，它就不再传递任何信息，只剩下持续的轻微焦虑。用红点把用户引向与\"新内容\"无关的推广，属于误用。",
  "signature": [
    "一个没有数字的小圆点，附着在图标或列表项的角上",
    "只表示有新内容，不表达数量、紧急程度或类型",
    "用户查看后自动清除，无需手动关闭"
  ],
  "when": [
    "有新内容值得被发现，但数量本身对用户没有意义",
    "数量不可靠或会频繁变化，显示数字反而制造噪声",
    "入口本身很小，放不下数字角标"
  ],
  "when_not": [
    "用户需要据此判断要花多少时间，数量才是他们真正想知道的",
    "产品里几乎每个入口都常驻红点，它已经不再传递信息",
    "用它标记推广、活动或与\"新内容\"无关的东西"
  ],
  "tradeoff": "不带数字的标记成本极低、几乎不占空间，也不会因为计数不准而失信；代价是它的信息量同样极低——用户无法据此判断值不值得现在点进去，只能靠点进去才知道。",
  "comparison": {
    "focus": "提示这里有新内容，不说明是什么",
    "mechanism": "入口角上一个无数字的小圆点，查看后自动清除",
    "cost": "信息量极低，且完全依赖稀缺才有效"
  },
  "sources": [
    {
      "id": "dot-ant-design",
      "title": "Ant Design · Badge",
      "url": "https://ant.design/components/badge",
      "claim": "该组件文档说明徽标通常出现在通知图标或用户头像附近以吸引注意，一般用于显示未读消息数；其 API 中的 dot 属性被定义为\"是否显示为一个红点而不是计数\"（布尔值，默认 false）。本词条据此区分\"红点\"与\"数字角标\"这两种形态。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://ant.design/components/badge",
        "status": "available",
        "checkedAt": "2026-09-22T11:55:41.998Z",
        "jobId": "spn2-beff294742ecabb9374aa0590aa2949c456fdb44",
        "url": "https://web.archive.org/web/20260922115606/https://ant.design/components/badge/",
        "timestamp": "20260922115606"
      }
    },
    {
      "id": "dot-atlassian",
      "title": "Atlassian Design System · Badge",
      "url": "https://atlassian.design/components/badge/examples",
      "claim": "该组件文档把徽标的用途定义为\"显示数值型的状态数据\"；本词条引用它说明数字角标承担的是数量信息，从而衬托出红点刻意不承担这一信息的取舍。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://atlassian.design/components/badge/examples",
        "status": "unconfirmed",
        "checkedAt": "2026-09-22T11:56:16.765Z",
        "error": "status-request-failed",
        "jobId": "spn2-44698dc83c105317e7bdcac6af84db71e3e3e766"
      }
    }
  ],
  "relations": [
    {
      "target": "status-message",
      "kind": "alternative",
      "condition": "系统需要告诉用户发生了什么",
      "reason": "状态消息主动呈现内容并说明结果，红点只被动提示\"有东西\"；需要用户理解发生了什么时不能用红点代替。",
      "basis": "editorial"
    },
    {
      "target": "notification-center",
      "kind": "composes_with",
      "condition": "红点被点开后用户需要看到具体是什么",
      "reason": "红点只是入口的标记，内容仍要由可回看的列表承载；缺了后者，红点指向的就是虚空。",
      "basis": "editorial"
    },
    {
      "target": "calm-technology",
      "kind": "composes_with",
      "condition": "产品希望让新内容可被发现但不打断当前任务",
      "reason": "红点是一种周边信号：它等待被发现而不是主动争夺注意力，这正是把信息放在注意力边缘的做法。",
      "basis": "editorial"
    },
    {
      "target": "nagging",
      "kind": "conflicts_when",
      "condition": "红点被用来标记推广内容，或在用户查看后仍然重复出现",
      "reason": "无法通过查看清除的标记就不再是提示，而是持续的催促。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "红点出现在某个入口上",
      "instruction": "确保用户查看对应内容后它会被清除，并且不会在没有新内容时重新出现。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "界面同时存在多个可挂红点的入口",
      "instruction": "限制同时出现的数量，并让用户能按来源关闭它；红点的作用完全来自稀缺。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "none",
      "unread",
      "seen"
    ],
    "a11y": [
      "红点的含义有文字等效形式，不只靠颜色与形状表达",
      "承载它的入口在可访问名称中说明有未读内容"
    ],
    "motion": "出现与消失可以是瞬时的；减弱动态偏好下不做闪烁或脉动"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，对照红点与数字角标两种形态，不代表已验证的实现。应用到产品前仍须确认红点能被查看清除，并为它提供文字等效形式。",
  "image": {
    "src": "/images/notification-dot.webp",
    "alt": "一张对照示意图：左侧一个虚构的圆角应用图标右上角有一个不带数字的小红点；右侧是同样形状的图标，改为带数字的角标；下方一行并排放着五个不同抽象图形的图标，每个都挂着红点，示意红点过多时不再传递信息。"
  },
  "searchTerms": [
    "unread",
    "badge",
    "indicator",
    "entry point",
    "attention"
  ]
}