控件集——Badge/通知徽标/小红点/Notice point

起源

在开始之前，我们先来追溯一下小红点的起源。小红点到底是由谁最先发明的呢？众说纷纭，其中一个比较受大众认同的说法是，小红点最早来自于黑莓手机系统。在诺基亚仍一统天下的时代，新消息的提醒为图标+数字的形式，更像是Web端的处理方式。黑莓在2009年推出的9700系列，其搭载的黑莓系统开始使用了带星号的小红点形式。

而在小红点的专利归属上，Apple公司成为了最终赢家。Apple公司于2013年注册了相关专利，并在iOS系统上开始正式使用，小红点由此逐渐被人们所熟知。

在iOS界面设计指南中，Apple公司对涉及小红点的推送通知规范也有明确的阐述：

无论设备被锁屏还是在使用中，app都能随时利用通知来提供及时和重要的信息。每个通知都包含应用名称、一个app图标以及一条消息。通知的到来也可能伴随声音提示，以及app图标右上角小红点角标的出现和更新。Android随后跟进模仿了这一设计样式，小红点成为了通用设计的规范。如今，小红点的身影在各个App中几乎无处不在，在移动互联网的时代，它与我们的日常生活正变得密不可分起来。

定义

“通知用的红点”是目前人们普遍对于它的称呼，其实其正式的名称为「Badge」（徽标），Badge 指出现在应用程序图标（APP Icon），自定义图标（Custom Icon） 右上角、栏右侧的红色圆点或环形，是意符的一种。有内部带有数字，和内部带有文字两种衍生形式。

何时使用

1、圆点+数字

通知徽标最早出现在手机系统的 UI规范中，在应用程序收到新的消息、或有新的通知时出现。出现形式以红点中包含一个数字为主。后来例如微信等应用程序参照了该规范，用于消息数量的显示。其优势在于可以使用户第一时间了解什么位置发生了什么事件，发生了几个事件，协助用户做决定。

2、圆点

只需让用户了解有更新或新内容必然只有一条时，使用无数字Badge，例如微信公众号更新和App版本更新采用无数字类型。

圆点+数字的降级用法，目的是不抢其主要视觉重点的同时起到提醒的作用。例如微信的消息免打扰等次级消息提醒。

3、圆点+文字

大部分用于app 中金刚区的新功能介绍。起到简炼、痛点的作用。

使用规范

1、是否显示徽标

交互设计应当通过用户决定是否显示徽标。

2、徽标形状

徽标形状通常以正椭圆形或环形表达。也有其衍生设计，如下图所示：

3、封顶长度

   由于界面显示空间有限，因此要注意：

·　视场景和信息类型决定数字最长显示多少位；

·　如果数字达到上限该如何显示；（可选值为overflow、ellipsis、limit,默认值为overflow）

·　通常情况下有三种封顶数字的表达形式。一个是封顶数字为99，后面跟“+”（overflow）；一个是显示省略号（ellipsis）；一个是以千为计数，在数字后面跟“k”（limit）。

4、自定义的徽标内容

通常情况下自定义的徽标内容分为文字和 icon。当徽标内显示内容为文字时，通常不会超过6个字符长度，当徽标内显示内容为 icon 时，通常为 icon 规范中可视范围内的最小尺寸。

5、映射导向

每当一项业务有新的动态消息或上新的内容时，都要在业务入口处投放小红点以把用户引导到最终页面，但投放的小红点往往会出现断层的情况，用户在一步步轻触到达最终的页面后戛然而止，不清楚产品侧想给他展示什么内容。

应用程序上的通知徽标，当用户点开时，会出现在应用程序中相应的第一层级页面自定义图标上。思考每一个层级业务入口投放小红点的合理性，如此一来每个页面层级的小红点也能继承起来，给用户以清晰的映射导向。

负面影响

谨慎在图标内运用红色圆点元素

红色小圆点这个视觉元素已经成为一种社会性语义符号，即用户看到红色小圆点就会认为这代表着有新内容，投放太多小红点容易产生两种极端情况，一个是造成用户产生厌烦心理而卸载App，另一个是用户对小红点完全产生免疫，尤其是在游戏App中，试问你现在玩王者荣耀的时候，面对满屏的小红点，还要每次都全部消除完毕之后才会开黑吗。

另外，如果一个页面中徽标使用过多会让用户产生眼花缭乱的负面体验。因此，在投放小红点之前，先思考一下在某一入口投放小红点的目的，到底什么是我们想让用户第一时间看到的？为此我们应该省略些什么？如何去做好一个页面的整体视觉关系？是不是有其他更好的方式能代替小红点，即符合业务场景又能起到为业务导流的作用。

小结

徽标虽然已经是一种语义符号铭刻于用户的心智模型之中，但我们依然不能利用这一点，在界面中布满徽标这种元素，迫使用户查看他们不感兴趣的内容。另外，在使用徽标时必须做好映射，以此避免点击进入一个带有徽标的页面时不知道什么才是下一步的操作。