指南编辑：提到“logo设计”，很多用户可能很陌生，但实际上在日常生活中很常见，相关设计中也有很多细节需要注意。在这篇文章中，作者总结了标志设计的一些设计细节，我们一起看一下吧。
说到 logo(BADGE)设计，有些读者可能会感到陌生，但谁都知道手机软件中无尽的小红点是利用LOGE(BADGE)部件的。标志很常见，但容易被忽略。除了常见的小红点外，根据使用场景的不同，logo组件还有数字、文字、状态等不同的设计风格。
而且除了圆形，logo还有很多不同的形状。如果你忽略了关于logo的设计细节，请一起看~
一、标志的四种类型
徽标组件有四种常见类型：纯点、数字、文本、图标。
1. 圆点
纯点标识是最常用的类型，是引导用户点击特定功能的轻量级通知。
纯点标志还可用于区分用户的状态，并显示用户是否在线。
2. 数值
有代表特定数量的数字标识，主要用于消息通知、添加购物车、外判式等。例如，在消息通知场景中，可以使用消息icon中显示的数值通知用户有几条新的未读消息。
通过在或网上购物或订购等场景中更改购物车的数字徽标，可以知道选择了多少商品或食物。
3. 文字
文本主要有两种使用类型。一个是单独的文本logo，多用于电子商务运营等活动场景，通过显示优惠促销吸引用户。
例如，您可以在多个主页的功能图标区域添加不同的文本徽标，通知用户有新的“限时杀人”活动和“入鉴2元”充值优惠，从而鼓励用户采取行动。
另一个是在UI卡的一角放置文本标签，显示哪些热门话题或点击率等。
eight="427"/>或者放在内容中，用来突出重要的活动。关于标签组件，还有很有需要注意的设计点，后期设计夹会单独出一篇文章展开讲讲标签设计。
4. 图标
在元素基础上叠加一个图标来显示当前的状态，或者对用户的反馈做出响应，常用的图标状态包括成功、失败、警告。
在一些交友类产品中，可以用图标徽标表示哪些用户已经过实名认证。
Tips：根据使用场景的需要，一个UI页面中可以包含多种徽标类型。在收件箱中，使用右上角的数值徽标展示新收到的邮件数量，下方纯圆点提示可以明确区分出新邮件和已读邮件。
二、徽标设计的五个要素
虽然徽标看起来很简单，但想要得到一个独特的徽标，仍然需要考虑颜色、圆角、描边、阴影、位置等设计要素。
1. 颜色填充
利用徽标颜色来调整内容优先级。背景色100%的徽标比半透明（不透明度为15–20%）的徽标视觉效果更明显，那么重要的内容优先使用100%的颜色填充，相对次要的内容则使用半透明度的徽标。
徽标的颜色并不局限于某一种，更重要的是要灵活使用，做到在每个页面中都能有效吸引用户视线并且易于识别。
2. 圆角半径
调整徽标的圆角半径来改变容器的外形。除了基础的圆形、方形，也可以考虑使用长条状矩形、气泡形、不规则形状等外形样式。
徽标大多用在原有元素的基础上，所以在设计徽标外形时，还要考虑原有元素的样式和风格，例如原有元素是圆形，那么徽标也应该考虑设计成圆形，这样才能和原有图标统一，跟整个UI页面搭配。
3. 轮廓描边
仔细观察就会发现，大多数徽标并没有和原有元素贴在一起，而是相切一定距离的宽度。
通过给徽标加入与背景色相同的描边，既能将徽标单独展示出来，还能保证徽标在任何背景颜色上都能够被看到。
4. 添加阴影
通过给徽标设置一个平滑的阴影（使用相同的颜色），能够得到一个微妙而优雅的悬停效果。
5. 位置关系
徽标容器的长度根据根据内容量的多少而定，容器长度可以向左、向右或从中心扩展。当徽标向右延伸时，需要注意徽标距离右侧相邻的图标之间的距离，避免徽标太长影响相邻图标的显示。
灵活运用特定的文字缩写可以有效减少内容量并节省空间，例如使用“99+”来表示超过100条的消息，用“4.8k”表示4800位关注者。
三、最后
以上就是徽标（Badge）设计容易忽略的设计点，希望通过这些细节能帮助你打磨和改善产品的体验。
「组件系列」的其他文章，近期也会不断更新，欢迎大家关注~
#专栏作家#
作者：Clippp，微信公众号：Clip设计夹。每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。