小红点设计剖析

一、小红点的起源

App中随处可见的小红点原始到底是从哪里来？目前受大众认可的说法是，在诺基亚仍一统天下的时代，新消息的提醒为图标+数字的形式，更像是Web端的处理方式。黑莓在2009年推出的9700系列，其搭载的黑莓系统开始使用了带星号的小红点形式，具体的起源无法考证。但是，能够确定的是小红点被iPhone发扬光大。2013年，苹果公司注册了相关专利并正式在iOS系统上使用小红点，并将其统一放于App右上角作为通知规范。慢慢地用户开始习惯这种设计，以至于小红点成为了App的通用设计规范。

二、小红点的本质

我们经常说的“小红点”本质上来说是徽标(Badge)的形式之一。徽标指在页面元素上出现的圆点、数字、文字等信息。

从徽标的表现形式上来说可以分为两类：简单型、数字型和文字型。我们说的小红点即为简单型徽标。

1.简单化提示徽标

为重要的业务（或是深层级的业务）入口导流，增加点击量，进而增大业务曝光率。

2.数字型徽标

主要用于消息通知的场景中，告知用户尚未查阅的信息，让用户精确知道有多少新内容，吸引用户注意力。

3.文字型徽标

在纯红点的基础上加入了文字，常用于运营活动的场景，文字内容通常是一些有较强吸引力的词句，为了吸引用户点击。

三、小红点为什么吸引人？

1.破坏自身平衡

App图标或导航栏icon常态下是不存在小红点的，突然间增加的小红点让它前后发生了变化，「破坏」了自身平衡，无疑起到了传递信息（我改变了）的功能，从而诱发点击行为。

2.破坏周边平衡

没有对比就没有伤害，与其他不存在小红点的App图标或导航栏icon对比，无疑让带有小红点的App或icon变得与众不同，在视觉上迅速引起用户重视，从而诱发点击行为。

3.破坏带来不适

人都倾向于喜欢对称美，这是追求和谐统一的普遍心理，对不对称、不和谐的事物有厌烦心理，并且想要去纠正这些“错误”。而小红点则完美利用了这一人性的弱点，破坏了原有的和谐，给用户带来不适，而当用户忍不住要去轻触消除它时，产品侧为业务导流的目的也就达到了。

四、为什么标记长成小红点？

作为一种通知形式，小红点也必须完成一个天生的使命——通知。要达到通知的目的，它首先必须要具备很强的可视性，如何增强它的可视性，同时又不破坏整体桌面的协调性呢？我们可以从色彩、形状和位置三个方面来具体分析。

1.色彩

从色彩上来说，小红点为了“逼迫”人们点击，通常会使用高明度+高纯度的红色，因为红色相较与其他色系，色彩感知强烈，而且有警告、危险的含义，更容易和页面形成强烈的对比，引起人们的注意。所以为了引起注意，在色彩上标记选择红色。

2.形状

从形状上来说，圆形是最简洁的面型图标，没有任何多余的棱角和边，对于凸显其中的数字来说是最适合的。一旦我们把原型改为其他面型图形，即使是最基础的三角形、矩形，也会发现复杂度增加了很多，多余的角度和线条会分散用户对于其中数字的视觉注意力。特别是对于三角形这种约定俗成带有警示性意味的图形，用起来做通知肯定是不合适的。

3.位置

在一个矩形画面中，存在不同的力场，我们可以用“米”字线来分隔画面，分隔之后，边框、中心点、4个角、“米”字线都会对对象产生吸引力和排斥效果。中心点的吸引力大于4个角。

1.鉴于中心点是小红点需提示的主体内容，小红点位于中央位置会影响主体的识别度，且对于信息主次来说，还是以信息展示为主，提醒为辅，所以首先排除小红点位于中心点位置的方案。

2.考虑到圆形本身的认知特性：滚动及不稳定性。不管小红点位于左下角还是右下角，画面都有一种向下倾倒的力，会让人感觉画面非常不稳定，不平衡。相比之下，图标在左上角和右上角，因为App图标的大和方，整体构图依然会比较稳定。基于此，可以排除左下和右下的方案。

3.根据多数人的视线浏览习惯为从左至右，右上方的感知是处于上升状态，让人感觉和谐舒缓，而左上方有向上一层方向的引导认知。

五、小红点运用法则

1.清晰的路径导向

每当一项业务有新的动态消息或上新的内容时，都要在业务入口处投放小红点以把用户引导到最终页面。如果投放的小红点的下层链接页面中看不到与小红点相关的内容，就会出现断层情况，用户在一步步轻触到达最终的页面后戛然而止，导致用户产生困惑。针对这一问题，一种有效的设计方法是倒推法，即从最终要投放小红点的末级页面开始，不断的向上一层级的页面倒推，思考每一个层级业务入口投放小红点的合理性，如此一来每个页面层级的小红点也能继承起来，给用户以清晰的路径导向。

2.符合用户预期

对于小红点的投放，也要注意每个页面层级前后信息的一致性，以符合用户的预期。举个例子，右上角的消息入口显示红点+数字5，轻触进入下一层级后，显示的小红点数字为1+2+1=4，与上一层级的数字5不一致，导致与用户原本的预期产生偏差，而产品本身的专业性也会受到用户质疑。

3.友好的消除策略

在投放小红点之前，应先确定好小红点的消除策略，大部分的小红点采用触过即消的策略，还有一些则需要到达最后的页面层级小红点才会消除。如果为了对业务入口进行强引导，在用户轻触后小红点仍然存在，这无疑极大程度的影响用户体验。

如QQ的消息列表为简化操作，可直接在消息列表页直接用拖动的形式消除提示，提升操作趣味性。

4.结合微动效

如今手机的屏幕很大，用户阅读的视线路径很长，用户被上一层级入口的小红点引导到当前页面后，往往需要花费一点时间来寻找当前页面的小红点，而结合微动效的小红点则可以有效的解决这一问题。因为人类天生就会关注正在运动的事物，让小红点动起来无疑是吸引用户注意的好方法，结合微动效的小红点更具情感和趣味性，容易能给用户带来愉悦的体验。

5.克制投放小红点

投放太多小红点容易产生两种极端情况，一个是造成用户产生厌烦心理，另一个是用户对小红点完全产生免疫。反而起不到内容引导作用。

那怎么样才能做到克制投放呢？来看下案例对比：

可以看到当单个模块内容范围内，徽标使用不超过两个；整个一屏范围内同时出现的徽标总数不超过5个的情况下，用户可以有效感知提示内容，可以起到导流作用。但当同一模块内容同时出现的徽标数量过多，页面反而内容混乱没有重点，小红点也就失去了投放意义。

当同个模块内有多个内容需强化导流，那么可以用轮流展示的方式以降低投放密度，同时也能保证每个内容都有徽标引导。

6.记录投放效果

现阶段小红点运用已经相对成熟，小红点的转化效果已被大量数据验证提升转化率的可行性，上线小红点后可关注页面不同位置小红点方案的转化效果，记录转化数据，记录整个页面最佳投放位置的数据，方便迭代升级。

六、总结

小红点这个视觉元素已经成为页面导流的一种有效途径，即用户看到红色小圆点就会认为这代表着有新内容去好奇点击。但具体小红点样式的使用、使用的频次需要根据产品的实际情况来做决策，如果运用不当则会使用户产生厌烦心理亦或是对小红点完全产生免疫。因此，在投放小红点之前，可以先做以下几点思考：

• 到底什么是我们希望用户第一时间看到的？

• 投放位置确定后需不需要为此省略些什么？

• 如何去做好一个页面的整体投放比例关系？

做完这些思考以后再结合小红点的运用法则进行投放，相信可以对页面点击转化起到有效正向数据效果。