烦人的“妖精”：浅谈小红点的设计当新的运营内容或新功能上线时，大家的做法往往是“放个红点就行”。然而，简单粗暴的形式和奔放的传递，让小红点变成了人见人恨的“小仙女”。本文从设计的角度探讨小红点的一些设计细节，希望能引起大家对小红点的关注。在此，希望有兴趣的朋友一起探讨。讨厌的小红点人类似乎天生厌倦了不对称、不和谐的事物，想要纠正这些“错误”。简而言之，就是大家通常所说的“强迫症”。而小红点就完美的利用了人性的这个弱点。就像白嫩的脸颊上长了一个小疙瘩，让人忍不住去戳。因此，小红点也成为了强大的产品运营利器。只要放在某个商业门户上，几乎没有用户会对其视而不见。流量的目的也达到了。那么问题来了，用户喜欢小红点吗？在Google和Bing上搜索关键字“app小红点”时，几乎一半的搜索结果都是“教你如何消除小红点”。一份数据显示，在用户卸载应用的7大原因中，“烦人的消息提醒”高居榜首，小红点作为提醒引导的形式之一也难逃其咎。看得出来，用户是真的不喜欢小红点。然而，让用户如此恼火的小红点真的没有用吗？如果没有小红点，用户将无法在第一时间知道男神女神已经回复了自己的微信，也无法知道自己关心的淘宝店铺刚刚上线。购买新产品的同时，您还将错过刚刚推出的最新促销活动和有趣的功能。小红点之所以成为烦人的“妖精”，其实是产品方和用户方的目标不一致造成的。产品方想向用户推销新功能、新服务，但这些不一定是用户需要的，甚至可能会打扰用户。因此，如何平衡小红点的商业目标和用户体验，是一个可以认真探讨的话题。小红点的来历在开始之前，我们先来追溯一下小红点的来历。谁是第一个发明小红点的人？众说纷纭，其中一种被广泛接受的说法是，小红点最早来自于黑莓手机系统。在诺基亚还一统天下的年代，新消息的提醒都是图标+数字的形式，更像是Web端的处理方式。黑莓在2009年推出了9700系列，其黑莓系统开始采用带星号的小红点形式。从小红点的专利归属来看，苹果成为了最终的赢家。苹果在2013年注册了相关专利并开始在iOS系统上使用，小红点也逐渐为人们所熟知。在iOS界面设计指南中，苹果对涉及小红点的推送通知规范也有明确的表述：无论设备处于锁定状态还是在使用中，应用程序都可以随时使用通知提供及时且重要的信息。每个通知都包含应用程序名称、应用程序图标和消息。通知的到来还可能伴随声音提示，以及应用图标右上角小红点的出现和更新。Android跟进并模仿了这种设计风格，小红点成为了通用设计的常态。如今，小红点的身影在各种App中几乎无处不在。在移动互联网时代，它越来越离不开我们的日常生活。红点的种类及其主要使用场景随着很多APP功能的不断丰富，内容的更新也更加频繁。为了增加各业务的曝光率，提高相关页面的到达率，在各业务入口放置了大量的红点。原本单一形态的小红点，也演变成多种形态，以满足不同业务场景的需求。众所周知，手Q是一款功能丰富的社交产品，涉及的业务数不胜数。如果每个业务线都随心所欲地在自己的业务门户上打上各种样式的红点，对于用户来说无疑是一场灾难。为了保证用户体验的一致性，手Q的QUI规范对小红点的种类进行了分类，这里简单介绍一下它们主要对应的使用场景。1、小红点是最基本也是最常用的一类红点。它们是小红点的初始形式。它们一般放置在业务入口处，用于内容、功能或动态更新提醒。2、小红点+数字由基本的小红点样式演变而来，可以显示未读消息数。一般用于QQ、微信、Q空间、朋友圈等社交场景，当有新的好友信息，有新的点赞或评论时显示。3、红点文字内容主要包括“免费”、“热门”、“新品”、“新品”，主要用于新品上架、免费、限时抢购等运营活动。“免费”等直观的文字内容可以强烈吸引用户的点击欲望。4、异形红点App的功能和场景不断拓展，使得小红点的形态也发生了新的变化，形态更加丰富。虽然和小红点的基本款式有很大的不同，但是依然承担着小红点的功能，从某种意义上说，它还是小红点。异形红点结合图标或内容缩略图，可以让用户提前预知内容，主要用于强推的运营活动场景。（以上图片来自QUI规范文档）以上几种小红点基本涵盖了目前市面上所有APP的基本小红点形式。还有各种APP根据自己的业务需求，设计了更加个性化的红点形式，这里就不一一列举了。当然，红点并不是孤立使用的。一个功能或业务的运作涉及多个层次和多个入口，因此在大多数情况下它是结合多种形式的红点来使用的。小红点的几个设计细节说到小红点的设计，可能有的同学会想，小红点怎么设计才好呢？当然，使用基本的小红点样式无疑是最省时的Effortless做法。但是，正如我们所见，放置的小红点没有经过深思熟虑的设计，不仅会让用户产生强烈的厌烦感，而且过多的小红点也会导致用户免疫力下降，影响业务导流的效果。那么，如何设计小红点呢？这里我根据自己平时的项目经验和一些案例的分析，总结一下小红点设计的一些细节：1.清晰的路径引导每当一个业务有新的动态消息或者新的内容，一定是有必要放置小红点业务入口处的红点引导用户到最终页面，但小红点经常出现故障，用户一步步点击到达最终页面后突然停下来，不知道产品的侧面概念是什么让他看。在下图的app中，在底部tabbar的home选项卡上放置了一个红点，但是在页面内容中看不到与红点相关的内容。但是，消息标签上没有红点，但是消息列表中有一个红点。这提醒指南，存在信息差距，容易造成用户混淆。针对这个问题，一种有效的设计方法是后推法，即从最终放置红点的最后一级页面开始，不断向后推到上一级页面，想着把各层级业务入口处的小红点的合理性，让各页面层级的小红点也可以继承，给用户一个清晰的路径引导。2、满足用户期望对于红点的放置，还要注意各页面层级前后信息的一致性，这样才能满足用户期望。如下图App中，右上角的消息入口显示一个红点+数字5，点击进入下一关后，小红点显示的数字为1+2+1=4，与上一关的数字5不符，导致与用户最初的预期出现偏差，产品本身的专业性也会受到用户的质疑。3.友情淘汰策略在发动小红点之前，首先要确定小红点的淘汰策略。大多数应用采用触摸消失策略，部分应用需要到达最终页面层级。关卡入口处的小红点将被消除。为了给部分APP的业务入口提供强有力的引导，小红点在用户点击后依然存在。这无疑是在挑战用户的底线，甚至可能导致用户卸载应用。笔者使用的Behanceapp，首页右上角的红点，无论我尝试点击多少次进入最后一级页面，都无法成功摆脱。同样的问题。手机QQ早在2014年就推出了红点的“一键下班”功能，这是一个非常值得称道的设计案例。拖拽去除红点的操作方便有趣。简直令人耳目一新。4.小红点形式更加多样小红点的样式从最初的小红点形式逐渐演变为现在样式丰富的不规则形状的红点，但小红点的元素依然保留。千篇一律的风格总是让人感到疲倦。如果能根据自己产品的特点和形象设计出新款式的小红点，不仅能给用户带来新鲜感，还能强化产品的品牌形象。比如厘米秀就用小胶囊款式作为领取新套装的提示，既贴合自身品牌形象，又区别于页面上其他常规的小红点款式，更加生动有趣.5、结合微动效果现在的手机屏幕很大，用户的视线很长。用户被上一级入口的小红点引导到当前页面后，往往需要一点时间才能找到当前页面的小红点，小红点结合微动效果可以有效解决这个问题。因为人类天生就会关注正在移动的事物，移动小红点无疑是吸引用户注意力的好方法。小红点结合微动效果，更有情调和趣味性，轻松给用户带来愉悦的体验。6、切忌放小红点放太多小红点很容易导致两种极端情况。一是用户厌倦了卸载应用，二是用户对小红点完全免疫，尤其是在游戏类应用中。请问，现在玩王者荣耀的时候，面对满屏的小红点，是不是需要全部清除掉才能变黑？要想不做红点，首先要有一套清晰的运营策略。一个平台级的产品涉及到很多业务入口。如果没有明确的运营策略，不同的商家乱投红点，就会影响产品。对用户体验的灾难性打击。关于红点的运营策略，这里有一些建议：从业务纬度出发，限制产品每月释放红点的总量，然后逐层分配每个业务的月度红点额度。比如A产品有5个主营业务，主营业务下有不同的细分业务。产品限制每月发放红点数量为4000w，平均分配给每个主营业务的每月红点额度为800w。各主营业务可根据细分业务需求，继续分配月度红点额度。有了这样的月红点数量限制，一线高管在投放红点的时候会更加珍??惜月额，这在一定程度上限制了红点的泛滥。从用户的纬度出发，减少对同一用户重复放置红点，避免对细分业务的强干扰。同一用户每个月的红点数不应超过8个（视具体业务情况而定）。对于功能入口，一个月内不要给同一用户两次红点。结合数据分析，可以通过个性化推荐为用户带来价值。每次推出一个小红点，应该不会对所有用户全面推出。结合大数据分析技术，可以根据后台的流量模型判断用户当前的属性，并据此决定是否给用户放置小红点。例如，用户在上个月的1号充值了电话费。根据流量模型分析，用户过去一个月左右充一次话费。如果本月初话费业务推出了促销活动，那么，对于用户来说，促销活动的红点可以放在话费业务的入口处。这样一来，用户因为关注小红点得到了优惠，商家本身也提高了转化率，小红点也给用户带来了实实在在的价值。另外，在放置红点之前，可以先想好在某个入口处放置红点的目的是什么。有没有其他更好的方式来代替红点，既符合业务场景，又能为业务服务？导流作用。下面我们来看几个在同一业务入口下使用小红点和不使用小红点的情况的对比。第一个是QQ钱包的账户余额入口。非红点方案使用数字滚动的效果。相比小红点方案，不仅能吸引用户眼球，还能清晰表达钱包余额缩减的概念，设计可谓十分精致。二是淘宝App首页“天猫国际”商家入口。非红点方案结合了天猫的卡通形象和弹出、闪烁的动作效果。很乖巧可爱，也强化了自己的品牌。图像。如今，这种动态的商务门户解决方案正在被许多电商APP所采用，它不仅可以吸引用户的注意力，还可以展示更多的运营信息。从以上几种方案的对比我们可以看出，在业务入口的一些场景下，虽然放置规则的红点也能满足业务的需求，但如果经过深思熟虑和设计，最终的方案往往能够给用户一个意想不到的精致体验。7、验证投放效果。一个APP有上百个业务入口，并不是每一种形式的红点都适用。如果不确定是否投放小红点，或者纠结使用哪种形式的小红点，如果条件允许，可以通过灰度发布的方式进行A/B测试，注意不同小红点的转化效果dotschemes，收集数据往往能为最终的线上方案提供强有力的支持。腾讯SNG内部开发的Kepler平台是一款通过数据来检验设计效果的强大工具。通过在各个业务入口埋点，持续关注线上数据变化，收集用户反馈数据。比如下面这个案例，通过A/Btest发现，对于商户入口，彩色图标的平均转化率比纯色图标高出20%左右，所以最终选择彩色图标作为最终在线解决方案。通过工具收集数据反馈，让设计不再主观，也可以作为设计不断迭代优化的依据。结束语上面说了这么多，主要是希望广大互联网从业者在设计过程中能够对小红点保持一定的关注度。不要在设计的最后阶段才想到，然后随意放进去处理。最终不仅会扰乱用户，产品本身的口碑也会受到影响。当然，每个app的业务入口和功能场景都不一样，设计情况也很复杂。不要用各种“酷”的小红点来追求所谓的创新。应该回归到用户的价值上，思考放红点的必要性，以及小红点的形式与产品视觉风格的一致性，这样烦人的“小妖精”才会真正被用户接受.
