本文授权转自： 晴天的设计宝藏 （ID：UI_Focus ）

前阵子在工作中，组内有讨论小红点的设计形式。在讨论的过程中，发现大家对小红点的理解不太一样。有的所理解的小红点是红色的小圆点，没有任何文字、数字，讨论时仅围绕小圆点的这种形式，有的理解的小红点是一种标签形式，可以是小红点、数字、文字等，讨论时围绕多种情况进行说明....原来看似很简单的小红点居然有这么多的“学问”？

为了搞懂小红点，于是下来学习了解了一下，啊，原来我们应该讨论“徽标”啊....

一、徽标是什么？

徽标（Badge）是一个小的重叠UI控件，是叠加在某个元素（图标或文字）上的圆点、数字、文字等信息，指示底层元素相关的状态，通知或事件。

ps：徽章不一定是叠加在底层元素上，而是出现在底层元素周围，只要与底层元素具有亲密性即可。

二、徽标类型

徽标可以分为纯圆点型、数字型、文字型、图标型这四种常见的类型。

1）纯圆点型

纯圆点型徽标即只有一个小圆点，是大家最常见的一种类型，也是“小红点”最初的样式。

2）数字型

数字型徽标会展示出具体数量，清晰地向用户传达内容量或通知量有多少。

相对于纯圆点型，数字型徽标带给用户的心理压力会更大一些。不过对于现在消息量爆炸的时代，越来越多的用户对小红点、对数字已经不再过敏，看到小红点不再有非消除不可的强迫症了。

数字型徽标常被使用在需让用户了解到有多少条内容、需向用户展示具体数量的场景中。

例如未读消息数量，未读通知、未读状态，告诉用户有多少条未读的内容。

在外卖等购物app中，购物车图标上会出现对应的数量，让用户清楚地知道自己选购了多少件商品。

3）文字型

通过直观的文字信息向用户传达内容。如限时、免费、新等对用户具有吸引力的字眼，吸引用户点击。

文字型徽标多应用在运营活动中。通过具有吸引力的文案、以及配合动效吸引用户注意与点击，提升业务功能的点击率。

4）图标型

应用图标来显示当前的状态，常用的图标状态包括成功、失败、警示。

从上面所列举的案例我们可以了解到一些信息：

1.纯圆点型、数字型徽标主要应用于消息通知场景，文字型徽标主要应用于营销服务的通知场景中。

小tips：在消息通知场景中，可以基于消息通知的重要性，也就是消息通知的层级来选取用数字性徽标还是纯圆点形（“小红点”）。

消息通知的层级可以分为高关注度与低关注度来区分。

高关注度用户高度关注，需要用户及时回复。这种情况常使用数字徽标，可以通过大小、警示性的颜色、数字等去强提醒用户。

低关注度用户不关注但需要偶尔查看，免打扰的消息通知或不太重要的营销通知，这种情况下使用“小红点”（颜色不一定是红色）。

2.我们所提及的“小红点”设计，颜色也不一定是红的，形状也不一定是小圆点....徽标的设计是灵活多样。

三、徽标设计要素

徽标设计看似简单，但还是需考虑到很多细节才能设计出精致、耐用的徽标。徽标设计的基础要素包括色彩、形状、位置、描边。我们从从这四点基础的要素入手去考虑我们的徽标设计形式。

1.色彩

色彩是最容易抓住用户注意力的。徽标色彩多为红色、橙色等具有警示的颜色，这种警示色更能吸引用户视线，引起用户注意。

现在市场上也有很多APP会采用自身产品品牌色（品牌色非红色、橙色类警示色）作为徽标颜色，如一些电商类APP购物车上的徽标会用品牌色。

色彩的选取还是需要根据具体的场景来，如果是强提醒、实时性性强，需要用户高度关注的场景建议采用红色、橙色这种很重的警示性颜色；如果仅消息提醒，不需要用户重点关注，那不用警示色完全是可以的，相反会带给用户更好的体验。

例如QQ邮箱色彩的选取就很贴心，因为现在qq邮箱里的信息对于用户来说并不是那么重要，收件箱里大多都是广告或者推送，用户几乎几个月甚至一年才看一次。在收件箱处qq邮箱采用浅蓝色色块+数字的设计样式，对于用户来说更加友好，对比使用强提醒的红色，用户并不会焦虑不安，和产生“非消不可”的强迫症心理，用户只是看一眼知道有这么多封未读邮件而已。

然而对于具有时效性的贺卡、订阅栏目采用了红色，它需要我们及时地去查看与阅读，对用户来说关注度会更高。

2.形状

徽标最基础的图形就是圆形，市场上大多数“小红点”的设计形式都是采用的带圆角的基础图形（小圆点、圆角矩形）。

除了圆点，在一些运营场景中会常见一些气泡、不规则的形状。

徽标的设计不一定要标新立异，达到产品需要传到的“意思”，与产品本身视觉语言不突兀即可。

3.位置

徽标的位置相对来说还是比较灵活的，徽标主要作用是用于消息提醒，只要徽标的位置与我们所提醒的主体信息具有亲密性、关联性，且视觉舒适都是可以的。这里的视觉舒适主要指徽标与主体信息间能够达到视觉平衡。

徽标最常见的位置就是出现在图标右上角。

在消息列表里，徽标除了像微信那样出现在群组或订阅号图标右上角外，在很多app中，徽标也常常出现在消息列表的右边或者前边。

在bilibili APP里，在增长粉丝数提醒场景中，徽标出现在元素上方；在直播提醒，徽标位于元素下方；关注的人有动态更新，徽标会在右下角...

可见在不同的场景应用中，徽标的位置是挺灵活的，徽标可以出现在元素的上方，元素的下方、元素的右下角等。并不是规定一直固定在右上角的。

4.描边

添加描边主要是想让徽标与底层元素区分开来，让徽标更好的被识别，而不是与底层元素融为一体。

四、总结

1.徽标可以分为：纯圆点、数字型、文字型、图标型四种类型。可根据应用场景与用户关注度来选择不同的徽标类型。纯圆点、数字型徽标主要应用于消息通知场景，文字型徽标主要应用于营销服务的通知场景中。

2.在设计“小红点”时，我们可从徽标的设计四要素（色彩、形状、描边、位置）入手进行考虑和设计。

徽标的设计也并不局限于某一种，更重要的是灵活使用，综合考量，让徽标在每个页面中都能根据具体场景有效地吸引用户视线，发挥其价值与作用。

以上就是关于“小红点”的知识点啦~不学不知道，学了才了解到看似简单的“小红点”居然有这么多的设计细节与思考点呢~学无止境~

文章转载： 晴天的设计宝藏 ，版 权归原作者所有

https://mp.weixin.qq.com/s/KfwK1zS9vGBQYjVKVmxCaQ

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编辑 | 梁芊芊

终审 | 苏 菁

点这里，学习更多设计知识！