徽标 图标 用户 大家好，我是 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
视觉 图标 内容 背景顺丰速运 APP 围绕寄件生活场景，为用户提供寄快递、查包裹、查运费、网点服务等一站式快递物流服务。随着 2021 年业务发展和内容丰富，用户对产品体验有着更高的诉求。基于用户声音及产品目标，从体验设计纬度定位出现有界面风格陈旧、操作体验不统一、品牌感知弱等问题，因此我们对顺丰速运 APP 进行全新设计升级。接下来，我们将此次改版的内容以及设计上的思考拿出来与大家一起分享，感兴趣的小伙伴可以前往应用市场下载「顺丰速运 APP」进行体验哦。前期分析通过数据分析、用户声音、体验自查、竞品分析、行业设计趋势分析，存在以下几个问题：产品特色不够明显，与竞品拉不开差异，核心功能体验路径冗长且复杂视觉风格近一年没有更新迭代品牌感知弱，缺乏情感化传达1. 设定设计目标针对现有问题，最终确定设计目标为提升顺丰速运 APP 的视觉美观度、操作易用性及品牌辨识度，强化产品的核心竞争力。实现这一目标我们提取三个关键词：「美观 – 全新视觉升级」从界面布局、色彩、图标、字体等进行全新视觉体验升级，让用户感受到更好的视觉体验「多元 – 更丰富的服务体验」针对日益增加的多样化需求，设计上从多元工具整合和自定义设置两个角度出发，进行多元化服务设计探索「高效 – 服务高效性」强化信息层级展示，提高用户查找信息效率2. 全新视觉现有视觉风格满足不了年轻用户群体的审美诉求，新旧版本交替导致视觉界面体验不一致。伴随着产品服务体验不断升级，视觉风格也亟需进行升级。本次视觉升级围绕颜色年轻化、极简化布局、字体规范化、图标亲和力、情感化传达进行展开。色彩年轻化黑红作为顺丰的品牌色，升级后持续强化品牌感知；同时在明度和饱和度做了优化，相比之前得沉闷，优化后整体更加活泼与透气。中性色作为贯穿整个产品的颜色，进行了规范化定制 ，让 APP 整体视觉更统一成体系。极简化布局旧版本页面边距较小，呼吸感较差，内容层级不清晰。从产品的信息展示效率上考虑突出重要信息和功能，因此对承载内容的容器——信息卡片的样式和内容布局进行了结构化设计，使之可以较好地聚合各类信息，更加有利于信息流内容的清晰展现。圆形在人的视觉过程中更容易被认知，给人一种柔软治愈的感受，圆角的合理运用对容器来讲，会突显矩形内的内容，将用户的视线聚焦在内容本身。两个圆角矩形排列时更容易区分内容归属，模块化更强。字体规范字体的运用 ，为整体视觉风格一致性打好基础提升产品体验。图标识别性：颜色采用顺丰的品牌色黑红，运用了叠加撞色的手法，打造独特的视觉语言，同时强化信息层级功能性：通过设计上手法进行区分，例如：图标线性的表现形式一致性：采用圆角，结合圆润视觉语言，统一视觉风格美观性：整体视觉风格更加年轻，活泼底部导航栏图标在图标微动效设计上贴合图形的意义，增加弹动效果，让用户在切换时感知状态的变化。想学更多的图标动效：本篇来源：优设网原文地址：https://www.uisdc.com/express-app-v9-0
图标 图形 基线 在内容为主的用户界面设计上，图标起到了降低理解成本、高效传递信息等举足轻重的作用。随着矢量格式与高分屏的普及，对图标字体的精细度与视觉匹配度也有了更高的要求，这对设计师来说也是一个不小的考验。本篇将介绍目前业界优秀的图标案例，并以日常图标绘制中遇到的问题，解析背后原理给出对应解法。注：以下部分示例仅为个人处理方法，仅供参考。本期提纲：业界的优秀案例矢量规格的效率画法图标绘制的注意点图标中的平衡业界的优秀案例“SF Symbols” 是苹果为 San Francisco 系统字体设计的一套内置图标合集，每个符号图形都能与所有磅重、大小的文本进行自动对齐，达到与字体无缝结合的效果。目前已更新到 3.0 版本，根据应用界面中各种使用、展示场景，默认提供 3,200 个符号各自拥有 9 种磅重，设计师可根据官方提供的合集库直接引用到设计稿中，或使用符号模板来添加自定义图标。1. 多种磅重“SF Symbols” 拥有与 “San Francisco” 字体相呼应的 9 种字重，在字母参考线（字母顶线与基线）下支持 Small、Medium 和 Large 3 种显示比例，总计 27 种样式，以达到与各个字形最佳的匹配效果。图形磅重与比例参考表图形比例与字形排列参考2. 字形参照定位以字体设计方式处理图形的垂直定位，在设计图标时需要将图形中心部分放置在模板基线以上的位置，系统读取时将根据图形基线计算图形的 baselineOffsetFromBottom（基线与底边的偏移值）进行垂直定位，使图形与文本的基线一致，达到图形和文本水平视觉对齐。图形参考线相同基线下对齐效果，使图形重心处于小写字母区域常用的块级元素对齐效果，重心稍微偏下3. 多色应用通过读取图形内的分层信息，可赋予每个分层不同的渲染模式达到更加丰富的表现形式。不同渲染模式下的多色效果4. 图形本地化适配除磅重与比例以外，当图形出现需要使用文字表达含义时，针对特定语言与书写顺序 “SF Symbols” 提供了不同的适配图形，包含拉丁语、阿拉伯语、希伯来语、印地语、泰语、中文、日语和韩语等语言类型与 LTR/RTL（从左到右、从右到左）两种布局。矢量规格的效率画法随着像 Retina 这样的高分屏与 SVG、PDF 等矢量格式在设备上普及，文字和图标在精细度与匹配度上有了更多的追求，一般应用会根据常用的字体磅重去定义默认图标的粗细，因此我们会看到一些图标出现非整数规格的情况，这对新人来说会造成一定的设计门槛。1. 微信的图标规格以微信客户端为例，需要在 24*24pt 的网格中默认使用 1.2pt 线条进行绘制，同时在图形自然拐角处需要保持外圆内方的样式。2. 为什么会有设计门槛对新手来说在 Sketch、Figma 或 Photoshop 中使用描边设计非整数规格图标可以是噩梦，即便有经验的设计师在绘制过程中也会因为计算路径余数而影响设计效率，以 Sketch 为例路径属性中虽然支持像素对齐、半像素对齐和不对齐像素三种模式，但如果需要绘制 1.2x 描边时，我们只能使用不对齐像素的模式再计算路径落点位置，因此需要不断计算落点是否处于 0.2、0.8、0.2……Sketch 的对齐模式3. 建议方法：倍化绘制所以在处理非整数图标时我们不妨把画板等比放大 5 倍，可以获得一个 120*120pt 的新画板同时描边放大为 6pt，这时候我们只需要使用像素对齐模式直接进行绘制即可，同理其他数值规格我们也可以使用倍化调整，使图形在画板内变成整数，最直接方式是小数点后奇偶数进行判断，奇数放大 10 倍，偶数放大 5 倍。输出资源时如果使用 svg 这类矢量格式可根据业务需要决定是否缩放输出，而位图则根据所需尺寸进行倍数缩放再输出。4. 工具使用差异使用 Sketch 对图形进行倍化后绘制和调整已经友好很多了，但是其实 Sketch 中还有不少绘制效率工具是没有放在默认工具栏里的，这里可以根据需要使用自定义工具栏把这些工具外置。Sketch 中的路径工具Figma 相对而言路径编辑功能比较简单，但依赖社区丰富的插件也能达到对应的效果，这里推荐一些常用的矢量图形处理插件。更多插件推荐：本篇来源：优设网原文地址：https://www.uisdc.com/icon-design-details
用户 图标 功能 项目背景近些年，WPS 组件页在完善基础功能的同时，增加了许多新功能。新功能的持续增多，虽然满足了用户更广泛的需求，但也使界面中的功能入口越来越多，一定程度上增加了用户的认知负担。在日常使用 WPS Office 办公时，图标是用户接触最频繁的界面元素之一。它通过更直观、轻松的阅读体验来指导用户的操作行为，从而有效提高产品的易用性。为此，我们以 “让用户更高效地完成工作” 为目标，用了大半年的时间，完成了 WPS Office 组件页 3000 个功能图标的视觉升级。WPS 改版案例合集：升级过程本文将从圈定核心范围、正确处理表意、制定协作模式和适应不同场景等几个方面来详细阐述我们对组件页功能图标视觉升级的全过程。紧密结合数据，圈定核心范围面对数量如此庞大的功能图标，我们必须从中找到最核心的一批图标重点突破。如果能快速确定核心图标的视觉风格，其他图标也能由此展开快速推进。为此，我们找到了产品同学，详细了解了功能的使用情况。 我们计算了 3 月份 PC 端三大组件功能区各个功能的日均点击次数，从高到低排序，得到了点击排名前 50 的功能。为了更直观地体现排序情况，我们制作了表格：根据排序情况，我们圈定了点击量 Top50 功能的图标作为核心图标，重点围绕这批图标进行了设计和优化。深入理解功能，正确处理表意确定了核心图标之后，我们又开始了新的思考。用户能否清晰地理解图标的含义？用户能否快速找到自己想要的功能？带着这些疑问，我们进行了深入的研讨。1. 如何正确处理表意？要想正确处理表意，必须深入理解功能。我们针对核心功能进行了反复地体验与透彻地研究，确保大家都能准确理解这个功能是什么、有什么作用，从而明确、统一了图标的表达形式和重点元素。除了结合自身深刻的理解，我们也找了同类产品进行对比，力争寻找出最符合用户认知的图形表达方案。2. 如何正确验证表意？功能图标产出后，我们积极邀请产品同学进行审核，针对有争议的图标，我们进行了充分地讨论，并结合双方的要求输出优化方案。同时，我们也通过用户访谈的方式去访问公司里的同事，观察他们的反应、操作过程以及操作结束后的反馈，最终选择了更能快速传达这个功能的图标。反复打磨推敲，制定协作模式我们需要绘制将近 3000 个功能图标。为了应对如此庞大的工作量，组内提出了协作绘制的方案，确保能在规定时间内完成目标。这个项目是我们首次使用多人协作的工作模式。在实施过程中，我们遇到了例如绘制流程不规范、项目进度难把握、质量标准难统一等诸多问题。为了解决这些问题，我们实施了 3 个措施。1. 制定流程为了更好地协作绘制图标，我们制定了规范化的流程。这个流程可以帮助我们严格管控好每一环节，规范好每一步，让每一位同学都能快速上手，了解绘制图标的工序，规范地展开工作，最终完成图标绘制任务。2. 专人统筹我们以小组为单位，根据各组人数分配不同数量的图标，并结合各组所负责的业务发放对应的图标。图标绘制工作是列入到各组的需求安排里，以业务需求去安排人员和交付时间。考虑到各组人员紧缺与业务繁重的情况，我们有专门的统筹人把这 3000 个图标进行分批处理和分发，按批次定量绘制图标，减少堆积压力。作为统筹人，需要跟进各组图标分配情况、沟通协调、绘制进度、绘制指引、质量把控等多个事项。同时，也要做到定时收集反馈和提出优化建议，逐步完善多人协作绘制图标的模式，确保图标绘制项目如期完成。3. 严格控质为后续产出的图标达到一个专业的水平。我们制定了一套系统的 2021 版图标绘制规范，解决现存图标绘制表意不清晰、风格不统一、体量不一致等问题。通过严格规范图标的绘制，能够让大家绘制出来的图标质量是符合标准的。每一批图标绘制完成后，都需要自行进行图标设计自查。各组自查没问题就会统一交付到统筹人，再一遍又一遍审核，如遇不通过图标，将通知返稿直到调整通过才算是绘制完成。套色技术支持，适应不同场景图标绘制完成后，还剩下最关键的一步 —— 套色。WPS 2021 的功能图标需要兼容四大组件（WPS、WPP、ET、PDF）、适配深浅色皮肤和个性皮肤、同时还要尽量降低资源包大小，因此图标的适应性对于我们来说是个很大的问题，此时就需要用套色来解决。套色的原理是通过修改 SVG 图标文件中的代码来修改图标的颜色。设计只需要对输出的图标文件进行颜色标记，然后研发再通过这些标记替换颜色，实现图标颜色的变化。目前，这种套色方式已经在组内试验完成并在各个业务的图标绘制工作中进行了推广。套色给我们的工作提供了很大的便利，主要体现在 3 个方面：这个套色工具我们命名为「Style Icon」。通过这个套色工具，我们实现了不同主题皮肤的兼容，这是落地后的部分皮肤界面效果。后续如果有更多的皮肤需要适配，都能很好的适应。总结在设计层面，经历了不同阶段的探索和优化，我们逐渐找到了设计上需要关注的平衡，例如创新与易用的平衡、认知与行为的平衡、用户习惯的平衡等。平衡好这些，会为我们的产品迭代提供很好的指引。在协作层面，第一次使用多人协作的模式，快速完成了 3000 个 图标的绘制，并取得了预期成效。在持续不断的图标迭代上，还会面临越来越多的挑战。我们将继续完善多人协作模式，并将这种模式运用到更多项目中去。在套色工具层面，为了让一套图标适应到不同的场景，是我们一直以来的难题。 如今，设计研究的套色工具就可以完美解决了，这对于我们来说，是非常大的突破，也是设计价值体现之一。感谢阅读！本篇来源：优设网原文地址：https://www.uisdc.com/wps-3000-icon-redesign
张大湿
落霞与孤鹜
表哥
