细说控件| 讨人嫌的小红点Badge

前面的篇章中，我们有了解到iOS的人机交互指南的基本设计原则和一些其他的控件，本篇来聊一聊“讨人嫌”的小红点。

1、定义及样式

“小红点”是这个控件在国内最通俗的称呼，正式的名称为“Badge”（徽标），Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息；无更新时不展示提醒 。

常见样式包含：

有数字：如果需要让用户精确了解有多少条更新，可使用有数字Badge，给用户带来的心理压力会更大，也会更吸引用户注意力。示例：未读消息、邮箱的未处理邮件

没有数字：只需让用户了解有更新或新内容只有一条时，则使用无数字Badge。或者内容没有那么重要，关注度较低时。示例：微信公众号更新、被屏蔽的群消息

2、使用规则

1、图标中慎用红色

红色小圆点这个视觉元素已经成为一种社会性语义符号，即用户看到就会认为这代表着有新内容，因此图标设计因谨慎使用红色圆点。

示例：下图案例中，红色的心型元素与图标主体间有留白，用户会误以为这表示有新的粉丝，实际上没有，只是图标本来的元素罢了。

2、设置封顶数字

常规消息类是超过99条显示”…”，用户对消息类提醒关注点在于内容，数量的多少对用户影响并不大；

如果是购物车，建议用“数字+”样式展示，告知用户大概数据限度。

这类提醒数据跟钱挂勾，对用户影响较大, 9+和99+的差别是非常大的，所以建议封顶数带具体数值。

3、带数字和不带数字样式可根据业务类型混合使用

根据用户对消息的关注度去区分展示消息数量的样式，可区分轻重缓急。

重要类型用数字表示；

示例：单人消息，个人消息相对群消息，重要性略高，且数量的大小某些程度上可以间接说明对方沟通信息的轻重，所以用带数字的提醒；

非重要类型用小红点表示；

示例：被屏蔽的群消息，被屏蔽说明该消息重要性低，但是还是需要基本的提醒，所有用不带数字的小红点展示对用户影响小；

PS: 同类消息保持提醒样式的一致性，如果设置单人消息用数字表示则该通讯列表类所有的单人消息都用数字提醒，按类型区分，不是按单项区分；

4、消息总数只统计带数字的消息

当消息类包含不带数字的小红点和带数字的小红点两种类型的时候，只统计带数字的小红点消息总数量；

5、一键清除小红点功能

如果小红点非常多出现频次又很高，会对用户产生一些情绪干扰，例如很多强迫症用户每次遇到Badge都会设法点击消除掉，因此快捷的一键清除功能时很有必要的。

好了，关于小红点的一些使用规则就讲完了，大家有补充的可以给我留言，后面我还是会继续跟大家聊聊设计原则和控件。

关注我，一起来做个集美貌才华于一身的设计师吧~