badge

什么是badge?

🌈在我们日常使用的App内,经常会遇见一个图标/文字按钮的右上角出现一个「小红点」,这个控件的正式名称就是badge,用来表示当前有新的消息内容或待处理的信息。

如何正确使用badge?

· 有无数字的badge

🌈badge控件主要有两种类型:一种是不带数字的圆形红点,这种类型的badge提示性较弱,一般用于只需要通知用户有新的消息通知更新,而不需要告知用户具体有多少条新的消息通知;另一种是带有数字的badge提示,这种带有数字的badge会给人一种压力,促使用户点击查看,更加吸引注意力同时提示性更强。
image.png

· 其他形式的badge

🌈除了圆形红点和带数字的圆形红点外,还有很多其他形式的badge,具体根据需要提示的信息模块而定;
🌈badge不一定是红色,其他颜色也可以,对颜色没有绝对的要求,但是作为提示颜色需要一定的醒目性;
🌈此外badge也不一定非得出现在右上角,一般根据需要提示的信息模块而定;
image.pngimage.pngimage.pngimage.png
image.png
image.png

· 注意badge字符长度上线

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

· 谨慎在图标内使用红色点状元素

🌈用户长时间使用App已经形成「小红点」就代表有新的或待处理的消息,因此在图标设计中需要注意谨慎使用红色点状元素作为图标的一个元素,这很容易让用户误以为是「小红点」。