开yun体育官网入口登录app 控件集——Badge/通知徽标/小红点/Notice point

起源

在开始之前，我们先来追溯一下小红点的由来。小红点是谁第一个发明的？说法不一，其中比较流行的一种说法是，小红点最早来自黑莓手机系统。在诺基亚还一统天下的时代，新消息的提醒都是图标+数字的形式，这更像是网络上的处理方式。黑莓在2009年推出了9700系列，黑莓系统开始使用带星号的小红点。

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

在iOS界面设计指南中，苹果也明确解释了涉及小红点的推送通知规范：

无论设备是锁定还是正在使用开yunapp体育官网入口下载手机版，应用程序都可以使用通知随时提供及时且重要的信息。每个通知包含应用程序名称、应用程序图标和消息。通知的到来还可能伴随着声音提示，以及应用程序图标右上角小红点的出现和更新。 Android后来跟进并模仿了这种设计风格，小红点成为通用设计的标准。如今开yun体育官网入口登录app，小红点在各种应用程序中几乎随处可见。在移动互联网时代，它们已经与我们的日常生活密不可分。

定义

人们通常称之为“通知红点”。事实上，它的正式名称是“Badge”（标志）。徽章是指右上角和一栏的应用程序图标（APP Icon）和自定义图标（CustomIcon）。右侧的红点或红环是一种符号。有两种导数：里面有数字和里面有文本。

何时使用

1. 点+数字

通知标志最早出现在手机系统的UI规范中，当应用程序收到新消息或有新通知时出现。主要的外观形式是红点包含一个数字。后来微信等应用参考了这个规范，并用它来显示消息数量。它的优点是可以让用户立即了解在哪里发生了什么事件、发生了多少事件，并协助用户做出决策。

2. 点

如果您只需要让用户知道有更新或者必须只有一项新内容，请使用无编号的 Badge。例如微信公众号更新、App版本更新就使用无编号类型。

点+数字的降级使用旨在起到提醒作用，同时又不会夺走主要视觉焦点。比如微信的消息请勿打扰等二次消息提醒。

3.点+文字

大部分都是用来介绍app金刚区的新功能。其目的是为了简洁和痛点。

使用说明

1、是否显示标志

交互设计应允许用户决定是否显示徽标。

2.标志形状

标志的形状通常表示为椭圆形或环形。还有衍生设计，如下图：

3、封盖长度

由于界面展示空间有限，请注意：

·最大显示位数取决于场景和信息类型；

·数量达到上限如何显示； （可选值为overflow、ellipsis、limit，默认值为overflow）

·上限数通常有三种表达形式。一是上限数是99，后面加“+”（溢出）；一种是显示省略号（ellipsis）； 1 以千为单位，后面跟“k”（限制）。

4. 定制标志内容

通常，定制的Logo内容分为文字和图标。当标志显示的内容为文本时，长度通常不超过6个字符。当标志中显示的内容是图标时，通常是图标规范可见范围内的最小尺寸。

5. 测绘指导

每当商家有新的动态新闻或者新的内容时，就必须在商家入口处放置一个小红点，引导用户到达最终页面。然而开yunapp体育官网入口下载手机版，放置的小红点往往存在间隙。一步步敲到最后一页后，突然停了下来。目前尚不清楚产品方想向他展示什么。

当用户点击应用上的通知标志时，它会出现在应用中对应的一级页面自定义图标上。思考在每一级业务入口放置小红点的合理性，让每一级页面的小红点也能得到继承，给用户一个清晰的映射引导。

负面影响

在图标中小心使用红点元素

红点的视觉元素已经成为一种社交语义符号，即当用户看到红点时，他们会认为它代表了新的内容。放太多的小红点很容易导致两种极端的情况。一是用户感到无聊并卸载该应用程序。另一个原因是用户完全不受小红点的影响，尤其是在游戏应用中。现在玩王者荣耀，面对满屏的小红点，每次都得这么做。全部淘汰后会变黑吗？

此外，在页面上使用太多徽标会给用户带来眼花缭乱和负面的体验。因此，在放置小红点之前，首先要思考在某个入口处放置小红点的目的。我们到底希望用户首先看到什么？为此我们应该省略什么？如何让页面有良好的整体视觉关系？有没有其他更好的方式来替代小红点，既契合业务场景，又能起到业务分流的作用？

概括

虽然标志已经是刻在用户心理模型中的语义符号，但我们仍然不能利用这一点，用标志等元素填充界面，迫使用户查看他们不感兴趣的内容。徽标必须正确映射，以避免点击带有徽标的页面而不知道下一步该做什么。