保姆级教程！全面系统的小红点设计指南

更多小红点设计干货：

引言

墨一影：你有没有注意到，很多手机 APP 上总爱在那些新消息、未读通知旁边放个小红点？这个小家伙看起来不起眼，但作用可不小，它能一下子抓住你的眼球，告诉你：“嘿，这边有新鲜事儿！”不过，你知道吗？设计这个小红点也是有讲究的。要是用得不对，它可能就会变成个烦人精，让你看着就头疼。那么，在 UI 设计中，我们的小红点到底该怎么用才算是用对了呢？

这篇文章就来跟你聊聊这个话题~

一、正确认识小红点

1. 你真的了解小红点吗？

小红点是最通俗的叫法，在 UI 设计中还有一个名称叫徽标（Badge），它指的是出现在图标或文字右上角、可带有数字或文字的红色圆点，小红点的出现则意味着有新内容或者待处理的信息，其目的是为了入口导流，起到引导用户操作、增加点击量的作用。

小红点的常见形态

小红点其实很多程度上利用用户的强迫症心理，而“强迫症”这一术语，实际上描述的是个体对于环境或事物中不对称、不和谐状态的自然反感，并倾向于纠正这种感知上的“不完美”。小红点作为一种视觉元素，巧妙地利用了这种心理倾向，成为营销手段中的有效工具，用以吸引用户的注意并促使他们采取行动。

然而，当我们深入探讨用户的真实感受时，不难发现一个有趣的现象：尽管小红点设计之初是为了吸引用户，但许多用户却对其产生了复杂的情绪。在网络上，充斥着大量关于“如何快速清除小红点”的教程和技巧，这反映了相当一部分用户对于小红点的态度并非全然喜爱，而是希望能够有效管理或消除这些视觉上的“干扰”。

进一步地，从用户行为的数据中我们也能窥见一二。在用户选择卸载 APP 的众多原因中，“消息提醒”这一类别常常占据前列，而小红点作为消息提醒的标志性元素，无疑在其中扮演了重要角色。这表明，对于那些觉得小红点过于频繁或侵扰的用户来说，它们可能成为了卸载决策中的一个关键因素。

2. 小红点在界面中的正面作用

① 及时通知与提醒

小红点最显著的作用是作为未读消息、待办事项、新内容的即时通知标志，帮助用户快速识别并处理重要信息。这种即时反馈机制提高了用户的信息获取效率，减少了遗漏重要信息的风险。

② 增强用户参与度

通过吸引用户的注意力，小红点鼓励用户更频繁地打开和使用 APP，从而增加了用户的参与度和活跃度。这对于提升 APP 的留存率、用户粘性和商业价值具有重要意义。

③ 业务导流与曝光

小红点作为一种视觉元素，能够有效地引导用户点击并探索 APP 中的新功能、新内容或优惠活动。这种导流作用有助于提升 APP 内特定页面的曝光率和点击率，促进业务的增长和发展。

3. 小红点在界面中的负面影响

① 红点强迫症

部分用户可能会形成“红点强迫症”，即看到小红点就忍不住要点开查看或消除。这种心理现象不仅会影响用户的日常生活习惯，还可能对用户的记忆和决策产生负面影响（如前文提到的研究所示）。

② 分散注意力与干扰

频繁出现的小红点可能会分散用户的注意力，干扰用户的正常工作和生活。尤其是在信息爆炸的时代，过多的未读消息和待办事项可能会给用户带来压力和焦虑感。

③ 误导与滥用

在某些情况下，开发者可能会滥用小红点来吸引用户的注意力，即使没有真正的未读消息或待办事项也会故意显示小红点。这种误导行为可能会损害用户的信任感和忠诚度。

二、小红点的展现形式

1. 小红点的构成

小红点的/徽标由容器、内容构成，内容形式可以是数字和文字

容器：承载内容的容器，一般由圆角矩形构成

内容：数字、文字、通常表示未读信息的数量和状态，或营销场景的引导

2. 小红点的类型

① 单纯的小红点

纯红点作为一种直观而高效的提示元素，广泛应用于各类应用与平台中，它象征着“新内容待探索”或“消息更新”，以非侵入性的方式轻触用户注意力。这种设计旨在引导用户自然而然地深入浏览，解锁新信息或功能，进而促进用户活跃度，显著提升内容的点击率及业务的整体曝光度。无论是社交圈子的最新资讯、APP 版本的更新通知，还是功能模块的新增亮点，纯红点都以其简洁明了的特点，成为连接用户与新鲜内容的桥梁。

② 数字+红点

在众多提示方式中，这一红点加数字的组合提醒机制堪称最为高效且引人注目的设计之一。它脱胎于传统的纯红点标记，广泛应用于社交及信息密集型的功能模块，通过直观展示未读消息或通知的具体数量，巧妙地将用户的注意力聚焦于关键信息上。这种设计不仅促进了信息的有效传达，还助力用户迅速浏览并作出相应决策，尤其是在处理如会话列表中的未读消息、系统重要通知等场景时，其优势尤为显著。

③ 文字+红点

在运营活动的广阔舞台上，巧妙运用“免费”、“立减”、“新品”、“有奖”等极具吸引力的词汇，如同磁石般牢牢抓住用户的注意力，精准地触达了他们内心对于优惠、新奇事物的渴望。这种策略深刻洞察了人性中对于小确幸的追求与对未知世界的好奇，巧妙地利用了用户的心理倾向，激发了他们强烈的点击冲动与参与欲望。最终，这一系列精心设计的营销手段成功引导用户走向预设的转化路径，实现了品牌宣传与产品销售的营销目的。

④ 图标/缩略图+小红点

主要用于吸引用户注意、提示更新或未读信息，并引导用户进行点击操作,而把小红点跟图标或者缩略图结合起来，给人表达的含义就指向性更明确。

3. 小红点的视觉特点

APP 中的小红点在视觉设计上具有色彩鲜明、形状简单、尺寸小巧、位置关键等特征。

① 小红点的颜色

顾名思义，既然叫小红点，那么自然就是以红色为主了，确实也如此。这是因为红色在视觉上具有突出的效果，能够迅速吸引用户的注意力。在众多颜色中，红色通常被视为代表警告、重要性和紧急性，这与小红点的功能相吻合。

但是最近随着互联网的快速发展，有一些产品深入挖掘用户的需求，在部分产品上也采用了其他颜色，例如主题色、或者其他饱和度更低颜色，以减弱红点的信息层级，在界面中追求更加协调、舒适的用户感受。这种情况只存在单纯的小红点中，因为这种设计一般是要弱化处理，而如果数字+红点还采用这种色彩来设计，就南辕北辙了。

② 小红点的形状

小红点的设计倾向于简约风格，主要采用圆形或近似圆形的形态。这种简洁的形状不仅使得小红点容易被用户捕捉和记忆，还确保了视觉上的平衡与和谐，有效避免了视觉上的冗余和负担。此外，简单的形状设计使得小红点能够灵活融入各种界面背景之中，保持高度的辨识度和一致性，从而为用户带来更加流畅和直观的体验。

③ 小红点的位置

在探讨小红点（常用于消息提醒的标识）最佳放置位置时，我们首先要认识到其作为辅助提示元素，需紧密依附于主体信息但又不能干扰其主导地位。将主体信息视为一个视觉整体，其各部位（特别是中心与四角）因力场不同，对用户吸引力各异。通过逻辑排除法，我们可以这样分析：

中心位置排除：为避免小红点遮挡或混淆主体信息的核心部分，直接影响其识别性，首先排除将小红点置于元素中心的做法。

左上角非优选项：根据尼尔森的用户阅读视线模型，用户习惯于从左至右、从上至下的浏览路径。将小红点置于左上角可能会过分吸引注意，从而削弱了主体信息的首要地位，造成视觉上的主次颠倒，故非最佳位置。

左下角与右下角的不稳定性：受自然界重力影响，人类的视觉感知中，物体下部尤其是右下角区域给人以“下沉”或“不稳定”的感觉。因此，将小红点置于这些位置会引发视觉上的不平衡感，如同倒三角形状给人的不稳固印象，不利于营造稳定和谐的视觉体验。

右上角成为相对合理选择：在排除了上述所有不利位置后，右上角成为了一个相对合理的选择。尽管它也可能对整体画面构成轻微干扰，但相较于其他位置，其劣势显得不那么显著。无论是从产品功能需求的角度出发，还是考虑用户的视觉舒适度和接受度，右上角都更能达到平衡，使得小红点既能有效提示用户，又不至于过分突兀。

⑤ 小红点的视觉表现技巧

投影：为了在投影设计中突出小红点样式，尤其是在非红色背景下避免视觉冲突，可以采取以下策略：首先，精确提取小红点的颜色值，随后对该颜色进行适度的加深处理，以增强其视觉深度。通过这样的色彩调整，小红点将呈现出一种悬浮于界面之上的效果，既醒目又不与背景融为一体，从而提升整体的视觉层次感和吸引力。

描边：当小红点样式被应用于红色图标、图片或色块上时，由于颜色相近，其突出性会受到挑战。为了有效解决这一问题，我们可以通过为小红点添加明确的描边边框，将其从背景中清晰分离出来。这一设计手法确保了即使在红色或其他相似色调的载体上，小红点也能被用户准确无误地识别，从而增强了视觉元素的辨识度和整体界面的可用性。

三、不同产品中小红点的需求不同

不同产品在设计小红点时会有不同的策略，这些策略通常基于产品的类型、目标用户群体以及期望达到的效果。我们千万不能生搬硬套，不去分析所在产品需求而去盲目使用红点，一旦使用不当会造成严重后果，也就是前问所说的负面影响。

以下是一些常见类型的产品及其在小红点设计上的特点：

1. 社交办公类：

典型产品：微信/钉钉/QQ 等

在社交与办公媒体应用中，小红点扮演着至关重要的角色，它作为视觉提示，专门用于标记用户的未读消息、新评论、好友请求等关键信息。这类应用深度融合了用户的生活与工作环境，成为即时通讯与沟通不可或缺的工具。为了确保用户能够迅速注意到这些重要更新，应用开发者倾向于采用醒目的颜色（尤其是红色）来设计小红点，并将其巧妙地安置在消息中心或个人资料图标的显眼位置。

这种设计策略巧妙地利用了人类的好奇心和即时反馈机制，营造出一种“非看不可，不看不消”的紧迫感，促使用户在看到小红点时，往往会立即采取行动，如点开查看并回复消息。即便在没有小红点提示的情况下，许多用户也会出于习惯或担心错过重要信息的心理，主动检查会话列表，确保不错过任何一条消息。因此，小红点不仅是一个简单的视觉元素，更是提升用户参与度、保持应用活跃度的有效手段。

2. 社区资讯类：

典型产品：抖音、微博、小红书、快手

在社区资讯类应用中，用户的主要目的倾向于消遣娱乐与资讯获取，这种使用场景相较于即时通讯（IM）应用，对小红点的设计需求显得更为温和。因此，在设计这类应用中的小红点提示时，可以考虑在视觉上采取更为柔和的处理方式，不必像 IM 应用那样强烈地吸引用户注意。

具体而言，可以使用单纯的红点而不是数字加红点，以减少对用户浏览体验的干扰。同时，在布局上也可以灵活调整，比如仅在主页面上使用红色或其他较为鲜明的色彩来标识关键更新，而在二级页面或具体资讯详情页中，则可以采用更为低调的色彩或设计，以提示用户有新内容，同时避免造成过度的视觉压力。

这样的设计策略既能够满足用户对于新资讯的及时获知需求，又能够保持应用的整体美观性和用户浏览的流畅性，从而提升用户体验。

3. 工具服务类：

典型产品：夸克、字由、懂车帝等

对于工具服务类应用而言，其核心在于满足用户的即时需求，倡导“即用即走”的便捷体验，避免过度占用用户注意力。在设计时，应审慎使用红色等醒目色彩，确保其在必要时有效传达通知信息，同时避免色彩滥用导致的视觉干扰。特别是当消息或通知累积过多，影响到应用内主要内容的清晰展示时，不仅会降低用户体验，还可能引发用户的反感情绪，最终影响其对应用的持续使用意愿和忠诚度。因此，优化消息管理机制，确保信息的适时适量展现，是维护良好用户体验、提升应用满意度的关键所在。

四、实际产品中小红点的设计策略

小红点看起来简单而又不简单

近期深入探究“小红点”的设计，我对其产生了以往工作中不同的看法。表面上看，它仅仅是视觉设计中的一个细微元素，但实质上，它触及了产品策略的核心——即如何精妙地调度与分配用户的注意力。而这一过程，远非简单的界面布局所能涵盖，它关乎产品如何构建长期吸引用户、促进互动与留存的整体战略考量。因此，“小红点”的设计，实则是产品智慧与用户心理博弈的微妙体现。

1. 设计目的匹配用户需求

在设计小红点时，首要任务是清晰界定其核心目的。小红点作为一种视觉提示手段，主要旨在通知用户存在未处理的信息，如未读消息、待办事项或新发布的内容。这一设计的根本驱动力在于通过吸引用户的注意力，引导他们进行点击操作，从而有效提升产品的用户参与度与互动性，并进而加深用户的粘性，促进更频繁和持久的使用行为。

① 以营销为目的的红点设计

在营销策略中，红点设计被精心运用以视觉冲击力引导用户行为，旨在激活产品使用频率、增强用户互动，并促进关键功能的转化效率。这些红点作为导流工具，扮演着类似微型广告的角色，其提醒效果尤为显著。然而，正因其高强度特性，设计此类红点时必须采取谨慎克制的态度，避免过度使用，以免对用户体验造成负面影响，甚至引发用户的反感和抵触情绪。因此，在设计策略上，需精准定位、适度展现，确保红点的出现既能吸引用户注意，又不至于成为用户的负担。

② 需用户反馈及操作类强提醒

通知作用：告知用户有未读消息、未处理任务或新内容更新，引起用户的注意。

引导作用：旨在提升用户体验、增强用户参与度，并促进用户完成关键操作。

③ 消息通知、应用更新类弱提醒

在即时通讯类应用中，如微信、QQ 等，小红点常用于提醒用户有未读消息。这些消息可能来自好友、群聊或系统通知，但小红点本身不会显示具体的消息数量或内容。

在内容型应用中，如新闻阅读、视频观看、银行等，小红点可以用于提醒用户有新的内容更新或推荐内容。由于这类应用的内容更新频率较高，使用小红点可以避免用户因频繁收到通知而产生厌烦感。

2. 小红点设计内在逻辑与原则

① 并集原则

小红点的显示应遵循父节点的小红点为子节点小红点的并集的原则。即，如果子路径上有小红点，则其父路径上也应显示小红点，只有当所有子路径上的小红点都被清除后，父路径上的小红点才会消失。

② 多层级关联

在设计小红点的显示逻辑时，需要考虑到不同层级之间的关联。例如，在微信中，tab 上的小红点显示的是聊天列表里未读消息的总和，只有当所有未读消息都清空时，tab 上的小红点才会消失。

③ 动态更新

小红点的显示应能够根据服务器推送的内容更新或用户操作（如阅读消息、完成任务）而动态变化。这要求系统能够实时监测路径所对应的小红点的变化，并逐层分发到每一个父路径。

3. 小红点在实际项目中的应对策略

① 同层级内红点层级根据用户需求差异化

针对同一层级内的小红点提醒系统，为了满足用户多样化的需求，可以采取差异化的提示策略。以消息提醒为例，对于较为久远的信息，鉴于用户对这类信息的关注度可能相对较低，可以适当降低其提示的强度，比如减少闪烁频率或调整颜色饱和度，以此来减轻用户的视觉负担和心理焦虑感，使得提醒系统更加人性化与高效。

② 同一路径不同层级的提醒

在实际项目中，部分产品系统层级比较深，如果采用同样的小红点提醒，会导致信息层级较弱，比如微信订阅号中，订阅号本身提醒只是采用了单纯的红点设计，进去以后，有不同的订阅号也有更新提醒，如果还是采用前面一样的红点设计，会导致用户识别障碍，微信这里巧妙的使用产品主题绿色，既做了区分又降低了用户负担，也达到了产品设计目的。

4. 小红点的友好的消除方式

小红点的消除方式多种多样，体现了不同产品设计理念下的用户体验差异。最常见且直接的方式是，用户通过简单的点击操作即可即时消除小红点，这种即时反馈增强了用户界面的清晰度和操作的便捷性。然而，也有部分产品设计需要用户跳转至多个页面，逐步深入才能触达并处理导致小红点出现的具体信息，这种设计可能增加了操作的复杂度，但也为用户提供了更详细的上下文信息。

① 一键清除

为了进一步优化用户体验，不少产品还创新性地引入了“一键清除”、“全部已读”功能，该功能允许用户在不需要逐一查看或处理每条通知的情况下，快速批量消除所有小红点，极大地提升了操作的效率和便捷性，满足了用户对于快速清理界面杂乱元素的需求。

② 关闭不必要的通知

在系统设置中，用户可以关闭不需要的应用通知，以减少小红点的出现。这有助于保持界面的整洁和用户的专注。

五、小红点设计的注意要点

在设计小红点时需要注意的几个关键点包括：

1. 小红点与标签有什么不同？

小红点通常是一个小型的圆形或点状图标，用于吸引用户的注意力并提示有新的、未处理的信息或任务，通常是临时出现的，一旦用户查看或处理了相关信息，小红点就会消失。

而标签是一种用于分类或标记内容的文本或图标，帮助用户快速找到和理解特定类型的信息，是持久性的导航和信息标记工具。

2. 小红点可以使用其他颜色吗？

设计小红点时，可以考虑是否使用其他颜色，这取决于多个因素的综合考量。

用户体验是设计小红点时必须考虑的关键因素。红色虽然醒目，能够迅速吸引用户的注意力，但在某些情况下可能会给用户带来压力或焦虑感。例如，在需要用户放松或享受的应用场景中，使用过于强烈的红色可能会破坏氛围。因此，设计师需要根据应用的性质和目标用户群体来选择适合的颜色。

再者，消息类型和优先级也是决定颜色选择的重要因素。不同类型的消息可能需要不同的颜色来区分其重要性和紧急性。例如，重要且紧急的消息可能仍然适合使用红色来突出显示，而一般性的通知或提醒则可以使用其他颜色来降低其视觉冲击力。

最后，场景适应性也是设计小红点时需要考虑的。不同的应用场景可能需要不同的颜色来适应其特定的氛围和需求。例如，在暗色背景或者红色背景的应用中，使用明亮的颜色（如蓝色或黄色）的小红点可能更容易被用户注意到。

3. 要注意适度性，不可滥用

小红点设计需要特别注意适度性，避免滥用。小红点作为一种视觉提示元素，其主要目的是吸引用户的注意力，引导用户关注并处理重要信息或未完成的任务。然而，如果过度使用或滥用小红点，不仅无法达到预期的效果，反而可能给用户带来困扰和焦虑，甚至影响用户对产品的整体印象和体验。

4. 其他注意事项（在前文已讲过）

可控性：提供选项让用户能够根据自己的偏好调整或关闭小红点提示。

位置安排：将小红点放置在用户容易注意到且不会遮挡重要内容的位置。

一致性：在整个应用中保持小红点的设计风格一致，以便用户能够快速适应和理解。

总结

总体而言，小红点作为一种页面引导元素，在提升用户导航效率方面展现出了显著成效。尽管各应用因其业务特性和功能场景的差异，对小红点的运用方式各不相同，但其核心设计理念应聚焦于如何以高效且友好的方式吸引用户注意，避免盲目投放导致的负面效应，比如过度干扰用户体验乃至引发用户流失。

咱们得先琢磨琢磨，它是不是真有必要出现，得是能真正帮到用户，让他们用起来更顺手，或者让产品的功能更容易被发现和利用。接着，得让这小红点跟咱们产品的“气质”合拍，就像穿衣服得搭配好一样，这样用户看着才舒服，也能更认同咱们的品牌。要是还能加点好玩的元素进去，那就更棒了！这样一来，那些原本可能让人觉得烦的小红点，就变成了用户愿意点、喜欢点的小玩意儿，自然而然地就提升了咱们产品的吸引力和用户的粘性。

以上是我对小红点设计策略的一些思考与提炼，希望能为相关从业者提供有价值的参考。当然，设计领域充满创意与多样性，欢迎各位同行分享不同见解，共同探索更加优化的用户体验之道。