文章目录
- 1.什么是红点
- 2.红点的作用
- 3.红点的类型
- 4.为什么要搞红点系统
- 5.红点性质
- 参考文献
1.什么是红点
你一定见过红点，因为它无处不在。
在所有移动APP、Web网站、PC应用，只要是需要引导用户点击的地方，一般都会使用红点提醒用户。
比如社交APP中新消息的提醒，游戏APP领取礼包的提醒，Web网站、PC应用新功能模块的提醒，基本都有红点的身影。
红点是我们惯用的叫法，它正式的名称应该叫做徽标（Badge）。通常指出现在图标右上角的红色圆点或带数字和文字的红点，如下图：
实际上，红点不一定是红色的，有时为了降低骚扰和提醒程度，也可以是在视觉上没那么显眼的其他颜色，比如橙色、蓝色、灰色等。如 QQ 群助手里的消息推送就使用了浅蓝色的小红点。如下图：
因为红色的圆点比较常见，所以把这种用于提醒的徽标统称为红点。
2.红点的作用
红点的核心作用就是提醒，引导用户点击。最终是为了以下两种目的：
（1）作为一种通知形式，告知用户有未查阅的信息或未处理的任务；
（2）为重要的业务入口导流，增加点击量，进而增大业务曝光率。
说真的，红点是个好东西，告诉用户有重要的提醒需要查看，但显然被产品同学玩坏了，不知道你有没有这种感觉，反正我是深受其扰。
3.红点的类型
常见的红点在表现形式上一般分为三种类型，它们各自有对应的使用方法以及使用场景。
（1）纯红点。
单纯的小红点，无任何附加信息显示。
（2）数字红点。
在纯红点的基础上加入了数字，最大数字一般为 99 或 999，主要用于有数量场景的通知，比如未读消息数量、可领取的礼包数量等。
（3）文字红点。
在纯红点的基础上加入了文字，常用于运营活动的场景，文字内容通常是一些有较强吸引力的词句，为了吸引用户点击。
4.为什么要搞红点系统
红点系统基本可以说是贯穿了大部分应用的多个场景，那么我们也就产生了希望能提前设计一个通用的红点模块，约定各种规则后方便后续开发过程中进行模块化调用，提高研发效率。
5.红点性质
（1）传递性：红点由触发点逐级向上传递，直到达到顶层入口；
（2）叠加性：
- 不同类型的红点叠加时根据优先权重配置显示优先级（取优先级高的显示）；
- 相同类型红点叠加根据其大类型调用规则，规则如下：
父类型 | 叠加规则 |
小红点 | 叠加显示仍为单一小红点 |
数字红点 | 数字数值累加显示 |
文本红点 | 叠加显示仍为单一对应文本小红点 |
下面是一个树状红点结构示意图：
