UI设计师必看！4个章节教你系统掌握Badge设计

往期回顾：

一、考古 Badge

目前普遍认为，Badge 这一设计最早可追溯至黑莓手机系统。

在诺基亚主导移动通讯市场的时代，消息提醒沿用着“图标（数字）”的传统模式，这种设计思路更接近于早期网页的交互逻辑。

2009 年黑莓推出的 9700 系列机型首次采用了带星标的小红点提醒机制。

随着苹果公司于 2013 年正式注册相关专利并将该设计整合进 iOS 系统，Android 也紧接着模仿了这一设计样式，Badge 成为了通用设计。

二、定义 Badge

当这个始于消息提醒的小元素成为数字界面的“标配”，我们不禁要问：在当下的设计语境中，badge 究竟被赋予了哪些核心特征？又该如何定义 Badge 呢？

在调研了解一些设计系统和平台对 Badge 的定义后，我们发现各体系均强调 Badge 的附着性（依附某个元素对象）、动态性（反映实时变化）、克制性（无侵入式干扰）三大核心特征。

结合我司产品实践中高频出现的场景——未读消息提示、上新信息或营销活动引导、官方身份标识等实际用例，最终将badge收敛定义为：

附着于元素边缘，通过信息容器传递轻量化动态信息的非阻塞型标识。

通俗来讲，就是贴在元素边上的“牛皮癣”，能随时更新信息还不阻碍用户操作。

三、解构 Badge

视觉聚焦于 Badge 时，不难发现他们的结构主要为 容器 + 内容

其组合类型包括：纯圆点、数值、图标、文本

四、使用 Badge

1. 视觉上

关于颜色 

通常使用红色，例如代表警告、重要性、紧急性和营销性时，因为红色在视觉上极具冲击力，能瞬间抓住用户的视线

在实际使用场景中，为了追求更加协调、舒适的用户感受，可能采用其他颜色表示不同的状态、表达不同的信息等。

品牌色：增强组件的可扩展性，支持自定义尺寸，以应对未来业务需求的变化，避免频繁解组和二次开发。

其他颜色：可能使用其他颜色弱化提醒或表达不同的状态信息。

关于容器形状 

简约的容器和柔和的圆角视觉更柔和，减少视觉攻击性，让用户感到友好；同时小尺寸下，圆角容器能更好地包裹内容，保持信息的清晰传达。

轮廓描边可以提升与背景的区分，确保在不同颜色背景下都能清晰可见

关于位置关系 

通常位于元素的右上角，Material Design 中明确规范了 Badge 的位置不可随意更改

徽章容器锚定在图标边界框内。Badge 容器的宽度根据内容长度自适应，建议向左延展，避免 Badge 超出父容器边界（尤其在空间受限时）。

避免在一个元素上覆盖多个 Badge

文案建议控制在 4 字以内，避免 Badge 被截断或遮挡其他容器元素，合理运用缩写能精简内容并优化空间，例如采用“99+”来表示超过 100 条的消息

2. 交互上

弱提醒 

低频被动通知或持续状态指示场景下使用弱感知类型 Badge - 纯圆点。减少视觉干扰，保持界面简洁，尽可能不打扰用户性，比如社交媒体的小红点提示新消息，但不需要立即处理。

纯圆点

形态：仅显示一个小圆点（通常为高对比色，如红色）

特点：无具体内容，仅提示存在通知或状态变化

适用场景：

1. 未读消息/通知（如邮箱、聊天应用）
2. 实时在线状态（如头像旁的小绿点）

优势：简洁不干扰，视觉负担小

中高级提醒 

数值类型 Badge 属于中高感知类型，所以适用于需要用户注意但不需要立即行动的情况。比如购物车中的商品数量，或者待处理任务的数量，这时候数值徽章能够直观显示数量，帮助用户快速判断优先级。

数值

形态：显示具体数字（“3”、“99+”），常搭配有色容器

特点：量化提示用户未处理的信息量

适用场景：

1. 未读消息数量（如微信、邮件）
2. 购物车商品计数
3. 待办事项剩余任务

优势：信息明确，驱动用户操作（如“5 条未读”比圆点更紧迫）

图标 Badge 大部分用于分类或强调特定类型状态的信息。图标能够快速传达信息类型，减少阅读负担。

图标

形态：小型图标 icon

特点：用图形符号表达状态，节省空间

适用场景：

1. 已关注状态
2. 官方标识

优势：视觉直观，形象表达

强提醒 

在营销策略中，文字 badge 能通过醒目的视觉效果强烈吸引用户的注意，既能增加互动乐趣，还能悄悄促进功能的转化。不过需要特别注意，正因为它们很吸睛，使用时一定要保持适度，建议一行不超过一个 Badge，过度堆砌会制造视觉噪音，分散用户核心注意力，甚至稀释品牌信任感，效果适得其反。同时，滥用动态效果，更容易引起认知疲劳。

文本

形态：简短文字标签（如“NEW”、“HOT”、“VIP”）

特点：通过关键词传递状态或类别信息

适用场景：

1. 功能上新提示（如“NEW”标签）
2. 内容分类（如“限时”、“促销”）

优势：语义清晰，直接传达信息

结语

Badge 虽然只是一个微小的界面元素，却承载着信息传达与视觉平衡的双重使命。但需要谨记的是：Badge 是界面中的“调味剂”而非“主菜”。作为设计师，我们需始终以“克制”为准则——先问“是否必要”，再判“优先级次序”，最后通过场景适配形态。唯有如此，Badge才能真正成为高效的信息信使，而非干扰体验的视觉负担。让微小设计回归本质，或许正是我们对专业性的最佳诠释。