首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

一个通用的红点后台实现方案

文章目录 1.什么是红点? 2.红点的作用? 3.红点的类型 4.为什么要搞红点系统 5.红点性质 参考文献 1.什么是红点? 你一定见过红点,因为它无处不在。...通常指出现在图标右上角的红色圆点或带数字和文字的红点,如下图: ? 实际上,红点不一定是红色的,有时为了降低骚扰和提醒程度,也可以是在视觉上没那么显眼的其他颜色,比如橙色、蓝色、灰色等。...如 QQ 群助手里的消息推送就使用了浅蓝色的小红点。如下图: ? 因为红色的圆点比较常见,所以把这种用于提醒的徽标统称为红点。 2.红点的作用? 红点的核心作用就是提醒,引导用户点击。...3.红点的类型 常见的红点在表现形式上一般分为三种类型,它们各自有对应的使用方法以及使用场景。 (1)纯红点。 单纯的小红点,无任何附加信息显示。 ? (2)数字红点。...,规则如下: 父类型 叠加规则 小红点 叠加显示仍为单一小红点 数字红点 数字数值累加显示 文本红点 叠加显示仍为单一对应文本小红点 下面是一个树状红点结构示意图: ?

2.9K20

烦人的“小妖精”:浅谈小红点的设计

所以,如何权衡好小红点的业务目标和用户体验,是一项可以认真讨论的议题。 ? 小红点的起源 在开始之前,我们先来追溯一下小红点的起源。小红点到底是由谁最先发明的呢?...通知的到来也可能伴随声音提示,以及app图标右上角红点角标的出现和更新。 Android随后跟进模仿了这一设计样式,小红点成为了通用设计的规范。...4.异形红点 App功能和场景不断拓展,使得小红点形式也随之发生了新的变化,拥有了更多的形态,虽然与基础样式的小红点已经有很大差别,但是其仍然承担了小红点的功能,从一定意义上来说,它仍然是小红点。...如下图App中,右上角的消息入口显示红点+数字5,轻触进入下一层级后,显示的小红点数字为1+2+1=4,与上一层级的数字5不一致,导致与用户原本的预期产生偏差,而产品本身的专业性也会受到用户质疑。...笔者正在使用的Behance这款App,首页右上角红点,无论尝试多少次轻触进入最后层级的页面,都无法成功将其消除,实在是令人如鲠在喉,不知道有没有小伙伴也遇到相同的问题。 ?

1.3K20

Android开发笔记(一百六十八)为应用绑定通知渠道并展示消息角标

setShowBadge:是否在应用图标的右上角展示小红点。...channel.enableVibration(true); // 通知渠道是否让手机震动 channel.setShowBadge(true); // 通知渠道是否在应用图标的右上角展示小红点...原本通知渠道提供了setShowBadge方法,可设置是否在应用图标的右上角展示小红点(此红点又称消息角标),调用该方法设置true之后,有未读消息时就显示红点,无未读消息则不显示红点。...国产手机的红点方案参考了苹果手机的红点样式,同样把消息红点放在桌面应用的右上角,并且红点内部显示当前未读消息的数量(如下面左图所示),而安卓官方的红点内部不展示数字(如下面右图所示)。...e.printStackTrace(); } } 综合上述的两种角标实现方案,形成以下的显示角标代码,可同时兼容华为系手机和小米系手机: // 在桌面上的应用图标右上角显示数字角标

1.6K40

为应用绑定通知渠道并展示消息角标

setShowBadge:是否在应用图标的右上角展示小红点。...channel.enableVibration(true); // 通知渠道是否让手机震动             channel.setShowBadge(true); // 通知渠道是否在应用图标的右上角展示小红点...原本通知渠道提供了setShowBadge方法,可设置是否在应用图标的右上角展示小红点(此红点又称消息角标),调用该方法设置true之后,有未读消息时就显示红点,无未读消息则不显示红点。...国产手机的红点方案参考了苹果手机的红点样式,同样把消息红点放在桌面应用的右上角,并且红点内部显示当前未读消息的数量(如下面左图所示),而安卓官方的红点内部不展示数字(如下面右图所示)。 ? ?...            e.printStackTrace();         }     } 综合上述的两种角标实现方案,形成以下的显示角标代码,可同时兼容华为系手机和小米系手机:     // 在桌面上的应用图标右上角显示数字角标

2.3K30
领券