提示类控件之 l 小红点°系统设计指南

badge

一。小红点简述

英文Badge（徽标），出现在图标或文字右上角的红色圆点，表示有新内容或者待处理的信息。

二。小红点作用机制

1. 追求和谐统一的普遍心理使人们偏好对称美：小红点通过破坏平衡，让用户感觉不适，诱导用户消除不和谐，产生点击行为；

2. 通过变化（有无）和对比（颜色）吸引用户眼球：App图标或导航栏icon常态不存在小红点，前后不同的变化破坏了自身平衡；带有小红点的App或icon与众不同，破坏周围视觉平衡引起注意。

三。小红点优缺点

优点：引导用户、业务导流

1.作为一种通知形式，告知用户：您有尚未查阅的信息；

2.为重要的业务入口导流，增加点击量，进而增大业务曝光率。

缺点：厌烦心理以及麻木心理。

1. 一项数据显示，在用户卸载App的7大原因中，“烦人的消息提醒”一项高居榜首

2. 对小红点完全产生免疫（王者荣耀—满屏小红点）

根本原因：产品目标（为业务导流、推广新功能、更多曝光点击）与用户目标（有效信息、及时提醒、尽可能少的干扰）的使用场景相互冲突

四。小红点类型/样式

1.单独红点

2.数字+红点

展示未读消息数量，常用于社交类App，精确传达多少条未处理新内容，给用户的心理压力更大，也会更吸引用户注意

3.文字+红点

展示标签，如“热门”、“免费”、“NEW”、“限时”，常用于活动引导

五。小红点设计指南

需考虑触发机制、关联机制、提醒样式、消除机制

i.纵向角度

关联机制，是否与上一级入口建立关联。

当业务有新的动态消息时，需要清晰的路径导向，将用户从投放小红点的入口处引导到最终页面，以符合用户的预期，避免信息断层使用户产生困惑。

可使用倒推法，从最终要投放小红点的末级页面开始，不断的向上一层级的页面倒推，思考每一个层级业务入口投放小红点的合理性，又保障了页面层级前后信息的一致性，给用户以清晰的路径导向。

底部导航icon红点为业务路径引流

ii. 横向角度

各场景中同一页面内的红点优先级；提醒样式，数字达到上限该如何显示，根据场景和信息类型决定数字位数

消息红点展示

消息红点展示极限

+首页

同时3个红点

最多同时出现3个红点，按照优先级依次替补

优先级规则例如：

恒定浮动icon（个人中心、购物车图标）> 汉堡图标（提示抽屉导航）>活动中心 >明日预告

汉堡图标和活动中心只允许出现一个红点

+我的

最多同时出现3个红点，按照优先级依次替补

底部导航 > 评价栏 > 活动相关 > 消息通知

iii.增加动效

自带动效的小红点更具情感和趣味性，给用户愉悦的体验；

结合微动效，拖拽消除小红点的操作便捷，交互又有趣味性

iv. 统一友好的消除机制

1.点击即消最为常见，即用户点击小红点所在的业务入口即可消除小红点；

2.到达最终页面消除小红点，引导用户顺着小红点的路径到达指定页面，避免业务层级过深让用户产生厌烦心理；

3.特殊的消除机制，如小红点“一键下班”功能，据自身产品实际情况，确定符合产品定位的消除机制。

v. 克制投放，巧妙替代

结合产品特征及形象设计小红点样式，新鲜又增强品牌形象。如电商类吉祥物、产品logo微动效、数字类文案的滚动加载、动态图（需加强点击量）等

vi. 验证投放效果

在各个业务入口埋点，灰度发布A/B test，搜集不同小红点方案的转化效果反馈，通过数据检验设计。

vii.避免传达误会

x在图标内运用红色圆点元素x（和红点恶搞头像没差）

就是点不掉我(＾－＾)V耶

x在非可交互可点击区域使用红点元素x

小红点在用户心中可点击的心理模式早已固化（下图栗子不可点击还使用全屏最显眼的颜色是要怎样）

不可点击的小红点

参考：腾讯ISUX