一个通用的红点后台实现方案

文章目录

• 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）叠加性： （a）不同类型的红点叠加时根据优先权重配置显示优先级（取优先级高的显示）； （b）相同类型红点叠加根据其大类型调用规则，规则如下：

下面是一个树状红点结构示意图：

在这里插入图片描述

参考文献

[1] CSDN.一个简单的通用红点模块方案 [2] APP 设计中，小红点的特点及设计是怎样的