App设计体系之小红点

Badge(徽标)，国内称之为小红点，小红点的作用是提醒用户有新内容或者待处理的信息。

1、表现形式

常见的小红点有3种形式：纯红点、数字+背景色、文字+背景色

1.1 纯红点和数字+背景色

纯红点能起到基本的提醒用户关注新内容的作用；如果新内容有条数且需要让用户知道，用数字+背景色的组合，有数字的小红点给用户带来的心理压力会更大，具有更大的吸引力。

a 注意数字的长度和上限

当消息条数过多，需要限制提示数字最长显示多少位，比如消息条数超过百条，显示99+，如果不想给用户带来过大的心理压力，可以把数字换成省略号。

1.2 文字+背景色

文字+背景色组合的权重是最大的，最大化的提醒用户关注。

a 另一种形式

当界面空间小，那么可以把文字和红点分开

b 文案需简短

文案太长不易理解而且会喧宾夺主

1.3 更多形式

结合内容缩略图或头像的异形红点让用户对内容有了提前预知，主要用于强力推送的运营活动场景及关注动态更新。

使用商品图片作为提醒，与常规小红点样式不同，有好的区分，能得到好的关注。

2、实际应用

2.1 更换背景色

为了不过多干扰用户，使用色彩感知较弱的颜色。QQ群设置了消息接收不提醒就使用浅蓝色的小红点，也符合用户不想优先看到群消息的意愿。

2.2 消除方式

a 逐个消除

手动逐个消除是传统的也是目前大多数产品采用的，经常使用的社交软件，进入某个未读消息列表后，红点就会消除。

b 一次性消除

QQ使用拖拉小红点的的方式，整个消除动作具有趣味性；而淘宝使用一键消除未读消息。

2.3 使用微动效