这个控件叫:Badge/徽标/小红点

作者:龙爪槐守望者

原文地址:zhuanlan.zhihu.com/p/26107887

转载无限欢迎,但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。


鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。

「小红点」是这个控件在国内最通俗的称呼,正式的名称为「Badge」(徽标),Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字,表示有新内容或者待处理的信息。

v2-47e6d68fded33d502a25470fddf9f0da_r.jpg

形态各异的Badge(徽标)


如何使用

  • 无数字和有数字Badge使用场景
    Badge可以分为无数字和有数字两类,一般来说,如果只需让用户了解有更新或新内容必然只有一条时,使用无数字Badge,例如微信公众号更新和App版本更新采用无数字类型。如果需要让用户精确了解有多少条更新且新内容有多条,可使用有数字Badge,例如IM的未读消息、邮箱的未处理邮件。有数字的Badge给用户带来的心理压力会更大,也会更吸引用户注意力。

v2-aec4740c9fc5e55f885620da7ca02498_hd.jpg

无数字和有数字

  • 注意数字的长度和上限
    对于有数字的Badge,由于界面显示空间有限,因此要注意视场景和信息类型决定数字最长显示多少位,如果数字达到上限该如何显示。

v2-0d2ecdd34f98f873a8fb4b046fa8521f_r.jpg

  • 谨慎在图标内运用红色圆点元素
    红色小圆点这个视觉元素已经成为一种社会性语义符号,即用户看到红色小圆点就会认为这代表着有新内容,因此图标设计因谨慎使用红色圆点,例如魅族Flyme社区App里「我的粉丝」图标,红色的心型元素与图标主体间有留白,用户会误以为这表示有新的粉丝,实际上没有,只是图标本来的元素罢了。

v2-69f7c5a53f3436a6d482698a2bffefd0_r.jpgFlyme社区图标


相关资料

  • 为什么Android官方控件没有Badge
    iOS最开始设计并没有通知中心(iOS5.0之后才有通知中心),仅靠桌面图标上的Badge表示App是否有新消息,而Android设计之初就有通知中心,可在通知中心内聚合查看所有App的通知,所以不需要额外的Badge提示用户有新消息。

v2-9f6cc20537de1c770081e9619a079e05_r.jpg

Android的通知中心


  • 手机QQ一键清除小红点功能
    Badge如果非常多出现频次又很高,会对用户产生一些情绪干扰,例如很多强迫症用户每次遇到Badge都会设法点击消除掉,手机QQ以此为出发点,创造性的设计了一键拖拽清除小红点的功能,得到用户好评。

v2-7b738471ede74d8a70c19c6b59416108_r.jpg

一键清除小红点动画演示

具体设计过程和总结请阅读腾讯 ISUX 博客:烦人的“小妖精”:浅谈小红点的设计

欢迎阅读上一期 Segment Controls/分段控件:uicircle.club/a/90


更多文章,欢迎访问 uicircle.club

微信公众号:uicircle

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入内部的 Slack Channel 及微信群
  • 报名参与各种线下设计、聚会活动
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们