徽标 用户 消息 前言徽标数在系统可见方面扮演着重要角色。通过徽标数的提示让用户直观的感受到系统的可见性，其目的是告知用户有未读的消息或有未处理的任务，当用户完成后徽标数消失。徽标数本是提升点击率和曝光率的利器，然而有些产品却将徽标数当作信息触达的利器，随意使用这件杀伤力武器，使得徽标数被滥用，造成用户免疫，徽标数反而失去了本身的作用。本文通过简析徽标数设计，探讨如何通过徽标数（红点）提升通知易用性。更多小红点设计干货：用6大章节，帮你完整掌握界面中的小红点设计UI设计中最常见的小红点该如何设计？阅读文章 > 一、徽标数构成容器：承载内容的容器，一般由圆或圆角矩形等构成。内容：字符/图标，通常表示未读信息的数量或状态。如下图所示，是几种常见的徽标数类型。二、徽标数类型红点徽标（Dot）：单纯红点，视觉强度较弱。多用于低重要度的提醒内容、功能、状态或动态更新。数字徽标（Digital）：有具体的数量，多用于 IM 消息对话通知。最大值根据不同场景显示如 99+或 999+。文字徽标（Text）：有具体的引导文字，多用于吸引或引导用户注意，文案简单易懂。文字尽量少于 4 个字。自定义徽标（Custom）：有自定义图标或图案，多用于较强的提醒内容、功能、状态或动态更新。由于不同机型的适配不同，需要注意最大字符，避免超出所在的范围。如下图所示：四、使用场景目前市面上的使用场景大致有以下 3 个方向：1. 消息通知消息本身具备数量，那么可以通过徽标数告知给用户。在微信 tab 1 通过徽标数告知用户未读消息条数，当用户完成阅读后，则徽标数量减少或消失，如下图所示：淘宝-我的淘宝-个人订单中，通过徽标数告知用户不同状态的订单数量。微博粉丝群，当设置消息免打扰后，徽标数从数字变为红点提示。告知用户粉丝群有新消息。2. 营销通知通过徽标数，传达某种利益点，提升用户有效曝光率和点击率。例如支付宝的基金，通过徽标数传递基金正确投资方式，立足长期，才能获得更多收益。滴滴通过徽标数告知用户有超值券超值活动，提升用户点击率和成交转化率。3. 系统通知系统消息以徽标数的形式，传达给用户。如 QQ 的动漫列表，通过红点提示用户今日有奖励可以领取。四、设计要点徽标数的设计要点有以下 5 点：1. 一致性当使用数字徽标时，徽标计数具有一致性，数字的计数仅统计数字的计数，不包含红点数量。如下图抖音的消息徽标数统计。各个二级列表的徽标数量之和等于上一级徽标数量。2. 连贯性对于多层级徽标数，需要各个层级页面具备一定的连贯性。如支付宝红点层级具备一定的连贯性，这样可以很好的指导用户到达指定的页面。3. 合理使用合理的使用可以避免用户对徽标数产生免疫。苹果的 Human Interface Guidelines 提到：最好的体验是提供简洁、信息丰富的通知。用户打开通知以获得快速更新，因此专注于简洁地提供有价值的信息。对于非 IM 场景，满屏的徽标会给人带来压力且没有重点。下图 1 中，美团首页金刚区，没有业务模块通过徽标数去提升业务的点击率，做的相当克制。而图 2 则满屏的徽标数。每个业务模块都想去强化提示，从而提升有效曝光率和点击率，结果造成整个页面没有重点，甚至导致整体数据变差。从通知的重要程度来考虑，可根据不同情况大致分为以下三个层次：高关注度：强提醒或需要及时回应，这种情况常使用数字徽标。中关注度：无需立即回复，较为重要的活动消息或营销通知，这种情况常使用文字徽标或自定义徽标。低关注度：不关注但需要偶尔查看，免打扰的消息通知或不太重要的营销通知，这种情况下使用红点。4. 给用户选择的权利针对于徽标数产生机制，有时候会产生过量的徽标计数，如何通过设计去平衡数量，这时候可以将选择权交给用户。如下图所示：随着加的微信群越来越多，微信群消息也开始泛滥，对于有些群不重要的信息，用户可以根据自身情况去设置消息免打扰，降低微信群消息轰炸。如下图所示：为了解决淘宝卖家对于用户过度营销，造成骚扰，淘宝设计了拒收功能。用户点击后即可屏蔽商家发送的消息，只有下次用户主动和商家交流时，商家才能继续发消息。5. 创新形式使用微动效的徽标可以增强用户操作趣味性，提高关注度。对于信息的触达有明显的提升。当然也要适度避免滥用。如下图所示：京东和拼多多的徽标数动效既增强了趣味性又提升了关注度。如下图 Dribbble 上@Oleg Frolov 的动效作品，下图 1 通过徽标数的发散增强了趣味性和关注度。图 2，文字在徽标数的容器轮播，使得更多信息的传递。五、后记有些 APP 做了一键清除未读消息的功能，其目的是为了快捷解决用户消除徽标数的使用场景，方便用户。然而站在产品侧来看：对消息的触达不利，甚至会让整个消息系统丧失作用。如下图：淘宝消息顶部做了一键清除未读消息功能，而拼多多没有做。本篇来源：优设网原文地址：https://www.uisdc.com/red-dot-design
徽标 图标 用户 大家好，我是 Clippp，今天为大家分享的是「徽标设计」。说到徽标（Badge）设计，可能有些读者会觉得陌生，但是大家肯定都知道手机软件上那些没完没了的小红点提示，这种设计就是运用了徽标（Badge）组件。徽标很常见却又很容易被忽视，除了常见的小红点，根据使用场景的不同，徽标组件还有其他设计样式，比如在小红点上加数字、文字、状态……而且除了圆形，徽标还有很多其他形状，如果你也忽视了这些关于徽标的设计细节，一起来看看吧~徽标的四种类型徽标组件有纯圆点、数值、文字、图标 4 种常见的类型：1. 纯圆点纯圆点徽标是最常用的类型，作为一个轻量级的提醒，引导用户点击某些特定的功能。纯圆点徽标还可以用来区分用户的状态，显示用户是否在线。2. 数值带有数值的徽标用来表示具体的数量，主要用在消息通知、添加购物车、外卖点餐等场景。例如在消息通知的场景中，消息 icon 上显示的数值可以用来告诉用户有几条未读的新消息。又或者在网购或点餐等场景中，通过购物车的数值徽标的变化，就能知道已经选择了多少商品或食物。3. 文字文字主要有两种使用类型，一种是单独的文字徽标，多用在电商运营等活动场景中，通过显示优惠促销来吸引用户。例如在某多多首页的功能图标区域，通过加入不同的文字徽标，能够告诉用户有新的“限时秒杀”活动和“立减 2 元”的充值优惠，鼓励用户采取行动。另一种是作为文字标签，放在 UI 卡片的任意一角，用来展示某个热门的话题或者显示浏览量等。或者放在内容中，用来突出重要的活动。关于标签组件，还有很有需要注意的设计点，后期我会单独出一篇文章展开讲讲标签设计。4. 图标在元素基础上叠加一个图标来显示当前的状态，或者对用户的反馈做出响应，常用的图标状态包括成功、失败、警告。在一些交友类产品中，可以用图标徽标表示哪些用户已经过实名认证。Tips：根据使用场景的需要，一个 UI 页面中可以包含多种徽标类型。在收件箱中，使用右上角的数值徽标展示新收到的邮件数量，下方纯圆点提示可以明确区分出新邮件和已读邮件。徽标设计的五个要素虽然徽标看起来很简单，但想要得到一个独特的徽标，仍然需要考虑颜色、圆角、描边、阴影、位置等设计要素。1. 颜色填充利用徽标颜色来调整内容优先级。背景色 100%的徽标比半透明(不透明度为 15–20%)的徽标视觉效果更明显，那么重要的内容优先使用100%的颜色填充，相对次要的内容则使用半透明度的徽标。徽标的颜色并不局限于某一种，更重要的是要灵活使用，做到在每个页面中都能有效吸引用户视线并且易于识别。2. 圆角半径调整徽标的圆角半径来改变容器的外形。除了基础的圆形、方形，也可以考虑使用长条状矩形、气泡形、不规则形状等外形样式。徽标大多用在原有元素的基础上，所以在设计徽标外形时，还要考虑原有元素的样式和风格，例如原有元素是圆形，那么徽标也应该考虑设计成圆形，这样才能和原有图标统一，跟整个 UI 页面搭配。3. 轮廓描边仔细观察就会发现，大多数徽标并没有和原有元素贴在一起，而是相切一定距离的宽度。通过给徽标加入与背景色相同的描边，既能将徽标单独展示出来，还能保证徽标在任何背景颜色上都能够被看到。4. 添加阴影通过给徽标设置一个平滑的阴影(使用相同的颜色)，能够得到一个微妙而优雅的悬停效果。5. 位置关系徽标容器的长度根据内容量的多少而定，容器长度可以向左、向右或从中心扩展。当徽标向右延伸时，需要注意徽标距离右侧相邻的图标之间的距离，避免徽标太长影响相邻图标的显示。灵活运用特定的文字缩写可以有效减少内容量并节省空间，例如使用“99+”来表示超过 100 条的消息，用“4.8k”表示 4800 位关注者。最后以上就是徽标(Badge)设计容易忽略的设计点，希望通过这些细节能帮助你打磨和改善产品的体验。「组件系列」的其他文章，近期也会不断更新，欢迎大家关注~看似简单烦人的小红点提示，原来还有这么多设计细节！你是否遇到这种场景，打开一个APP想赶紧用呢，结果满屏“小红点”提醒，强迫症的你必须咬咬牙把它们先消掉，才能舒心的正常使用。阅读文章 > 欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/app-red-dot-design
在路上
张大湿
