讨人嫌的小红点/徽标

前言：前言：我们每天打开手机接收到的新消息提示中，除了各种弹层另一种提示就是“徽标”，通常我们形象地称之为小红点。少量的小红点出现的时候可以给用户有效的提示，但是当满屏的红点出现时会是强迫症患者的灾难。本篇我们就粗浅的了解一下小红点的特征和使用，以及目前有哪些办法可以帮助强迫症患者消灭这些小红点。

目录

1、定义

2、视觉特征

3、如何使用

4、如何消除

1、什么是徽标？

徽标（Bradge）：一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。通常以小红点或者是添加数字的圆形或者胶囊形状来展示未处理的新消息。

2、徽标的视觉特征

① 颜色：

红色、橙色（常用）：色彩感知强烈，能快速吸引用户注意，引导用户点击。常用于互动/系统消息提示，版本/功能更新等。但在红点出现较多时会给用户压迫感和焦躁的情绪。

蓝色、灰色（较少用）：色彩感知较弱，通常用于不希望过于干扰用户注意的场景，例如：邮箱列表页的未读信息提示。

② 形状

圆形/胶囊（常用）：给人感觉更为友好，有亲和力。

圆角矩形（较少用）：优酷在“我的”页面中使用了有异于用户认知习惯的圆角矩形徽标（形状接近于方形），视觉上较为生硬。

异形（较少用）：QQ在未读消息超过99条时，徽标会变成一个带有表情的异形胶囊，这个表情仿佛在说：快点我，我已经满了需要倾泻~~很可爱我很喜欢，那种被徽标数字带来的压迫感会瞬间减轻不少。

③ 数字展示

以下展示的是几种封顶数字的徽标样式

3、如何使用徽标？

下面我以大家常用的微信和QQ来举例分析一下徽标在不同场景下是如何使用的：

微信和QQ都有个功能，叫做“消息免打扰”，这个功能开启或者关闭时徽标的展示是不同的。

微信徽标展示

① 正常状态：新消息会在头像右上角显示徽标数字。

② 免打扰状态：新消息提示变成了小红点，数字则在列表的文字信息中显示。

QQ徽标展示

① 正常状态：和微信一样，消息列表页有徽标数字提示。

② 免打扰状态：这里与微信不同的是QQ的消息列表页依旧会有徽标数字提示，且群消息的徽标的颜色从红色变成感知较弱的浅蓝色，而PC端的徽标则显示浅灰色。

从微信和QQ这两款主流社交应用可以看出：带有数字的红色徽标通常更容易被用户注意，有效地引导用户点击，弊端是徽标较多的情况下会给用户带来焦虑感；当用户不想被打扰时可以使用“去除数字”和“浅色徽标背景”这两种方式来降低对用户的干扰。

4、如何消除讨嫌的小红点？

目前消除红点的方式一共有3种：

1、手动逐个消除：是目前多数应用使用的方式，费时耗力，耗流量。

2、伴有动效地趣味性消除：QQ使用拖拉的方式消除红点，且是一次清除所有的未读消息。

爱奇艺对于未读消息使用了爆炸的小动效，虽然只能逐个消除，但是很有点击欲，会让用户觉得消除红点也是件有乐趣的事。

3、全部已读：iOS短信、马蜂窝、知乎、优酷都有增加“全部已读”按钮，不用在逐个手动清除红点，强迫症患者的福音。

总结：本篇内容虽然不多，但对于设计师来说却是不可忽略的知识。弄清楚小红点的特性，可以帮助我们做到既能有效地提醒用户关注，又能降低用户心理负担；让这些霸屏的小红点从讨人嫌到变得充满趣味甚至让用户喜闻乐见，对于身为设计师的我们来说依旧仍需努力！

参考链接：

https://ant.design/components/badge-cn/

https://zhuanlan.zhihu.com/p/26107887