平面设计5大软件图标-B面设计指南05-图标应该如何设计？

C端产品由于手机屏幕分辨率的不断提升，已经进入高分辨率时代，手机屏幕的色彩也更加准确。 因此，图标的视觉风格会更加多样化，让视觉设计师有很好的表现

在B面图标设计上，我们一直追求系统、高效、高质量的输出。 一方面，对于B端产品，我们往往关注主流程的核心体验，图标往往是低优先级的需求； 另一方面，B端产品往往注重主流程的核心体验。 另一方面，不统一、难看的图标的出现，无一例外都会破坏用户对产品的体验和感受。

比如最近设计圈发生的“有赞系审美缺失”事件，也从侧面反映出B端设计师对图标的认知不够清晰。 但从现象来看平面设计5大软件图标，本质是有赞部门缺乏图标标准。因此，B端图标规范就显得尤为重要。

让我们从图标开始。 从宏观上看，图标是一种通用的“符号语言”，每种语言中，必然有它的“语法”和“词语”。 图标中的“语法” “单词”一般包括什么？

1）图标中的“语法”

是我们常见的图标规范文档。一般需要包括：设计原则、轮廓模板、操作热区、命名规则等。

•设计原则

设计原则一般贯穿整个产品，因此设计师需要对其进行深入细化。 设计原则可以帮助我们确定产品的方向。 通过实施设计原则，我们可以做出有效的决策。

图标的设计原则中，主要是通过设计的核心理念来传达的。 例如，在Antdesign中，确定了图标设计的四个原则

准确：设计形状准确的图标（保留偶数原则，去除小数点）； 选择含义准确、不会造成用户认知混乱的图标。

简洁：在含义清晰、准确的基础上，尽量保持图形简洁，不进行不必要的修改。

节奏：发现构图的秩序之美

愉悦：传递适度的情感

•轮廓模板

轮廓模板用于明确图标的视觉尺寸。我们使用Keyline作为形状的基础来标准化图标的核心形状。 这可以帮助我们设计尺寸统一的图标，并确保多个产品线的视觉重量一致。

•操作热区

这是B端设计师经常忽视的一个细节。 一方面，运营热区首先在移动端兴起。 不知道大家是否还记得一句非常经典的话呢？ “iOS 的最小操作热点区域为 44px，Android 的最小操作热点区域为 48px。” 另一方面，在桌面上，由于屏幕分辨率的不同，并没有规定最小操作热区。但由于文字登陆方式的限制[2]，12px逐渐成为了桌面端认可的最小值。大家作为图标操作热区。

[2]实现方法：因为在Chrome浏览器中，文本受到浏览器大小的限制，最小的字体是12px，12px的文本最适合搭配12px的图标，图标会和文本一起使用。 所以12px是PC图标的最小尺寸

•命名规则

命名规则是最基本的技能之一。 一般来说，有经验的设计师都会有自己的一套命名规则。 在图标规范中，需要明确多个项目之间的差异。例如，每个产品项目都有自己独立的后缀，而公共基础图标部分则采用相同的命名规则。 这样就可以将图标应用到每个产品上，同时可以追踪每个图标的最终来源。

例如，常见的命名规则为：component_category_function_status，但在B端产品中通常为：component_category_status。 这里聚集了大量的组件、类别、状态的英文名称。 建议收集它们。

2）图标中的“Word”

是我们常见的图标资源。一般由图标人物和图标场景两部分组成

•图标字符

在图标设计中，图标性格尤为重要，我们应该选择符合自己产品特点的图标性格。

我把图标的所有性格都列在了一个坐标轴上，并根据图标的粗细和圆度将图标分为四种不同的风格：粗犷、可爱、精致、商务。

B面图标设计中，粗犷、商务是比较适合的图标人物。 在图标性格的选择上，我们必须将其与产品的设计理念相结合。通过建立图标的性格，我们也可以更好地缩小范围，减少设计资源的浪费。

ps：当然要根据自己产品的视觉表现进行相应的优化，拒绝生搬硬套。

•不同的场景有不同的含义

图标是一种通用的“符号语言”，因此也具有多语义特征。 有些语言在不同场景下具有完全不同的含义。图标也是如此。 我们需要根据不同的场景来表达不同图标的含义，因此需要对B端图标场景进行系统梳理。

我们先看一个例子：

在这个例子中，同一个五角星在不同的场景下对应着不同的含义。 比如淘宝详情页，星星代表收藏； 在美团点评中，它们代表的是每次评价的分数，所以不同场景下的不同含义也不同。 另外，因此我们需要整理一下B面图标的场景

1.基础组件场景-象形图图标

文章开头《我们的老规矩》提到：基础组件和业务组件的差距。 这里我就不详细讲两者的区别了。

B端产品中，基础组件需要涉及到很多图标。 例如：在日期组件中，需要显示日期图标作为组件的属性； 在下拉菜单中，需要有一个下拉箭头来表示。这些基本组件中都使用了基本图标，并且由于这些图标是使用象形技术进行简化的，所以大多数基本图标都是象形图标。

象形图：

象形图标源自现实生活中的物体。 比如我们所说的编辑器就来自于铅笔象形图。 它是随着时间的推移，通过大家对铅笔编辑的不断理解而形成的； 过滤源自漏斗象形图； 在象形图标的设计中，需要贴合真实的使用场景。

2. 操作模块场景-图标

通常出现在各种插件市场和运营商城页面。 也是B端产品盈利的关键。 业内常说一句话：“Saas产品基本上不赚钱，只是交朋友，赚钱完全靠后期运维”。

因此，操作模块中使用的图标也受到特别关注。 例如，我举几个例子。 它们都采用“表意图标”在操作模块中显示。

图标：

图标是生活中原本不存在的物体。 经过不断的发展，人们按照惯例为某一类事物创造了一个图标。 它通常代表某种类型的事物或某种类型的行为，例如：讨价还价、社区等。

需要提醒大家的一点是，这些类型的图标基本上都是按惯例建立的，所以在设计上不要做太多的改变，以免让用户感到困惑。

3.专业场景-文字图标

在B面图标场景中，还有一类特别专业的图标。 这类图标往往没有行业内常规的表达形式，而且在设计表达上，不可能使用简单的图形，因此图标的使用存在很大的问题。 认知成本。例如：团购、清仓

这时最好的解决办法就是文字化相应的专业词汇，并用“文字图标”来表达关键词。

文字图标：

它使用文字图标来直接表达含义。 在一些垂直专业领域，常用文本缩写来表达含义。 比如美团外卖中的“折扣”，就是每个人都需要使用的图标。 很难用图形符号来描述它。 因此，用“折”可以准确、直接地表达它。 文字图标虽然过于简单粗暴，不好用，但它的信息传递比其他形式更高，因此在B端环境复杂的图标生态中是常用的方式。在现在非常流行的下沉市场中，经常使用文字图标，这样就不会因为用户的认知水平而产生立即的偏差。

4.导航菜单场景组合图标

组合图标经常存在于B端场景中。 由于业务的复杂性，通常需要共享图标并进行相应的思考。 组合图标和场景我会在第三章讲到，这里就不详细说了。

1）根据公司不同阶段构建

团队中建立一套完整的图标规范通常有两种模式：开源和独立建设。 我会从效率、品牌、完整性三个方面来分析评估：

开源图标

站在巨人的肩膀上，您可以快速建立一套适合自己产品的图标规范。通过引用图标库，可以降低公司的设计成本，获得更高的设计质量和效率。 然而，开源图标的使用主要针对公共企业。 对于一些特定的业务，会有相应的限制。 我会在第四章专门给大家分享一些开源的、高质量的B端图标库

效率：★★★★★

品牌： ★★★☆☆

完整性：★★★☆☆

独立搭建

自我建构就会有自己独特的视觉风格和表现形式。 但需要一定的设计成本。 自建是一个循序渐进、反复打磨的过程，常常涉及到翻车、重头来过，因此需要大量的时间和人力成本。 对于一个企业来说，独特的符号语言更有利于产品的对外营销。但是，自助建设会考验设计师的能力。 如果能力不好，就会得不偿失。

效率：★★★☆☆

品牌： ★★★★★

完整性：★★★★★

了解了两种构建方式之后，在构建B端图标规范之前，我们需要明确自己产品的“定位”。 根据产品的不同阶段，我们会采用不同的方法来构建规范。

我了解的产品阶段中，一般分为三种：初创期、成长期、成熟期。

初期产品：

由于正处于实验阶段，产品需要频繁迭代，因此处于变化的节奏中。为了应对这种变化，引用开源图标库成为了更好的解决方案。

成长期产品：

成长期的产品会从混乱走向逐渐稳定。 设计师也会逐渐意识到产品的整体形态以及后续的规划方向。此时就需要顾全大局，对初创期遗留的问题进行优化平面设计5大软件图标，同时完善产品的设计理念。产品的设计竞争力。

成熟期产品：

成熟阶段的产品需要构建自己的方法论。 并且要脱离图标的单一维度，多维度、多层次的思考，通过自主建设，统一多个产品线，建立完整、成熟的设计体系，满足业务发展的需要。

2）如何设计图标资源

在图标资源设计中吉祥物，我将图标分为基本图标和业务图标进行讲解，以便大家更好的理解。

•基本图标

在我们的基础图标中，在保证图标性格一致的前提下，还涉及到直角、图标粗细等设计细节，所以我们在这里详细讲讲这方面。

大形状、大角度、小形状、小角度

在基本的图形设计中，圆角是一个经常被忽视的细节。 我们需要根据图形的面积来设计我们的圆角的大小。 我们需要讨论图形和圆角之间的关系，而不是获得具有 2x 圆角的图标

当基本图形占用面积太大且呈正方形时，建议使用3x圆角； 当基本图形变小时，如全高（宽）矩形，建议使用2x圆角。当基本图形为小（小于1/2宽高）矩形时，建议使用2x圆角。使用 1x 圆角。

* 这里的3x是指尺寸与行程的比例

观点正确

从图标的角度来看，最好使用正视图图标进行绘制。 这样可以保证图标库的风格一致。 但当有些图标无法通过正视角度表达时，使用三维图标来表达，这也符合透视一致性原则，但需要付出很大的努力。 避免

•商业图标：

由于其特殊性，业务图标一般都是组合图标，通常采用A+B+C的形式。 如果绘制单个图标，很难保证图标的一致性，输出效率极低。 因此，业务图标将采用A+B+C的形式绘制。 模块化的方式设计业务图标在B端产品的菜单导航中最为常见：比如我接手的CRM产品中，就有50多个业务图标。 无论你是一心一意思考还是全局思考，这一点都尤为重要。

我将图标模块化的方法分为以下步骤：

第一步：拆解整理

当我们拿到需求的时候，由于图标数量巨大，我们需要找到图标中的共性和个性。

例如：销售简报管理、销售订单管理、销售权限管理、销售池管理、业务销售插件、商机销售阶段，它们基本上都是以销售开始，以操作的管理描述结束。如果描述中间的不同，你也会在产品的其他部分找到相应的文案。

因此，我们发现图标之间有一个共性，而在庞大的B面图标库中，有很多地方都有这样的共性。 通过一点点的拆解和整理，我们整理出了一张图标之间的共性表，并完成了。 拆卸和整理工作

第二步：模块划分

通过模块划分，我们可以了解图标的结构。 模块分区的思想来自于 Ant Design 图标规范 2.2 中提到的图标节奏。

一次偶然的机会，我看到Ant Design对同类型的图标给出了类似的呈现形式，所以我想到我们的图标应该分为模块。

经过一周的总结，针对市面上大部分B面图标的拆解，我将整个模块分为三个区域：一个主分区和两个次分区。 通过主次分区的不同组合，可以满足大部分的需求。 大多数B面图标的使用场景。 主图标：主要表达图标的主要功能。 根据不同的业务，会生成不同的主图标。 副图标：代表主图标对应的功能，比如常见的：通过主图标进行管理、权限、规则等。 、子图标组合，组合后的图标可以高效绘制

第三步：分区图

利用分区图实现分区的图标形式

在一个图标中，如果让你画销售、审批、数据等单个图标，难度比混合在一起的图标组合要低。 因此，降低了在分区中绘制图标的难度，这可以让团队中其他较低级别的人更舒服。 设计师共同参与。 在绘制时，我们以一个大小为24px的图标为例：

主图标大小为：16px

辅助图标的大小为：8px

根据相应的尺寸，主图标的图形设计应该更加清晰，因为外面必须与次图标叠加，并且同一图形需要出现在多个图标中，所以形状不能太复杂。

副图标以简洁为主，因为较小的面积和更多状态的显示要求其简洁且易于识别，这样在图标叠加的过程中，两个图标更具有代表性。

第四步：调整细节

由于多个图标是重叠形成的，也会出现很多图标连接之间的细节不规则的情况。 因此，相应的细节被保留，例如图标之间的间距、图标未来的可扩展性等。

1)图标说明•闪电

Salesforce是一款值得期待的B端产品。 随着salesforce的不断发展，Lightning设计系统也在不断迭代。 Lightning中的图标规范不仅全面，而且实用。 它还拥有 500 多个图标资源。

关于图标规格，Lightning系统一直非常实用。 由于Salesforce已经成型多年，设计规范一直非常稳定。 其规格中的每一个细节都值得细细品味。 如果你有兴趣，可以研究一下设计系统的更多迭代。 更新记录，里面有宝物~

•阿特拉斯安

ATLASSIAN在我心目中一直是B端行业的龙头产品。 无论是产品还是设计，其Jira、Confluence、Trello都具有很高的设计水准。 作为一个针对多种产品的设计系统，它的包容性也值得大家学习。 你可以去实际页面深入体验一下，你会得到很多不一样的收获。

•材料设计

#图标主题

B端产品中，为什么我不推荐Apple或者其他设计语言？ 相比之下，Google的MaterialDesign一直处于很高的水平。 与实际情况相比，Material Desgin 设计的背景与 B 端的实际情况有所不同。 非常相似，它们也有令人困惑的屏幕分辨率、急需解决的页面层次结构、卡片式的设计思路，因为MD Design对这些特殊情况进行了深入的考虑。

2）图标库1.REMIXICON

Remix Icon是由中国设计师张晓春创建的开源图标库。 目前，该图标库中有2,271个图标。图标涵盖了建筑、商业、通讯、设计、文档编辑、金融、健康等十多个图标类型。您可以直接下载SVG或PNG版本或复制SVG代码

从图标质量来看，Remix Icon的质量是我见过的开源图标库中最高的。 它有两种不同的版本：线性版本和平面版本。 2000多个图标中，一定有你需要的~

2.费勒

Feathericons 是一个美丽而简单的开源图标库。 每个图标均设计为 24×24 网格。 它包含 282 个 SVG 图标。 您可以使用右侧的设置来调整图标的粗细和大小。 您还可以单击网站右上角的使用月亮图标来切换明暗模式。

如果您是 Figma 用户，作者还提供了 Figma 插件，这将使您的体验更加友好。

3.EVA图标

#/

Eva Icons 是Eva Design System 的图标部分。 共有 480 个开源图标，以 SVG 和 PNG 格式显示。 在图标类型方面，您可以选择两种风格的图标：线性图标和曲面图标。 非常有趣的是，你可以将鼠标悬停在图标上，你可以自己设置图标的动画效果，比如：放大、晃动、翻转，这大概只是设计者的感受吧~

4.英雄人物

Heroicons 是由 Tailwind CSS 的创建者构建的另一个出色的开源图标库。 它具有超过 165 个具有填充和轮廓样式的独立图标，但每个元素也有深色和白色版本。图标的外观非常优质且制作精良

使用这些图标很容易，而且它们还在 Figma 中提供了库。如果您想包含所有图标，可以从公共存储库下载所有 SVG 文件

5.图标

最后但并非最不重要的一点是，Ikonate 是另一个很棒的开源图标库，它拥有大约 100 个基于平面设计的高级图标。它在非常宽松的 MIT 许可证下获得了慷慨的许可

导出前，您可以轻松配置图标的大小、边框宽度、边框和角以及颜色

6.图标公园

字节跳动于9月3日开放了图标库。大多数人并不知道。 图标样式有线性、填充、双色和多色。 图标质量也非常高。 支持批量下载。 该网站仍处于起步阶段。 ，感觉还是内部用的，不过现在开源了，效果还不错。

由于篇幅限制，图标资源网站有几十个，这里就不过多展示了。

2）Iconfont上的优质图标资源

首先，由于iconfont链接放在公众号后无法打开，所以您可以通过我提供的作者姓名搜索iconfont用户。

1.阿里云设计中心

首先，这是阿里云账号。 很多做云产品的B端同学可以参考一下。

2.木松涛

他的OA办公系列图标给我留下了深刻的印象，我以前也尝试过一些。

3.木木

4.刘老师好

5.iconfont官方图标库

1.远古时代——图片和精灵图片 之前在和一些资深设计师聊天的时候谈到过这个话题。 当时的图标修复都是以图片的形式。 随着网站页面数量的不断增加，大家会发现图片占据了大量的空间。 请求资源时，一方面，网页中每出现一个图标，请求频率就很高。 另一方面，图标本身很小，频繁请求后台服务器会给它带来更大的压力，这显然不划算。 ，然后精灵图像就出现了

Sprite图表：将多个图标组合成一张图表卡通形象，然后前端利用CSS的background-position定位来显示不同的图标。虽然解决了频繁请求的问题，但仍然存在巨大的痛点，很难解决维持。

因为设计师每次添加图标时都需要修改原始图像，而精灵图像通常是通过前端的工具生成的。 如果工具稍有不正确，就会影响之前定位的图像。 同时，精灵图片的修改会直接影响之前的缓存。 长远来看，会变得难以维护

2. 发展时期-字体图标

由于使用基于图片的图标仍然存在各种问题，因此字体图标开始出现。 第三章刚刚提到图标的本质也是“文字符号”，所以在属性上是非常一致的。 前端CSS开始支持@font-face并引入网页字体后，字体图标进入了快速发展时期。 比如Font Awesome就是这个时候出现的。 这时国内出现了一个图标托管网站：iconfont

3、成长期——iconfont的崛起

Iconfont 已经陪伴我们 7 年了。 它集图标托管、共享、管理平台于一体，算是解决了国内大部分设计师的图标管理需求。 iconfont是“阿里巴巴”的产品。 主要为大家提供了很多图标资源。 下载，当然强烈建议iconfont有排序功能。 对于我这样的强迫症来说，实在无法忍受图标类型的混乱。

4.上升期-svg

svg 源是图标的最佳位置。 一方面，svg本身具有缩放能力，允许图标放大或缩小。 另一方面，很多编辑和绘图软件都支持svg的任意编辑，这使得它非常适合设计师。 再次修改。同时svg可以直接使用，这也将避免像字体图标那样需要通过管理平台进行维护。

svg真正的崛起是inline svg的出现。 2016年，Github全面启用了内联图标，可以将图标直接嵌入到HTML内容中。 其文档模型可以通过JS/CSS访问和操作，前端可以通过CSS控制实现图标颜色和样式，满足图标的各种需求

如果你有兴趣的话，我可以另外写一篇文章来谈谈font icon和svg的比较。

在图标的设计上，我很佩服Susan的细腻，以及她在如此低分辨率下的设计能力，这对于后续mac图标的设计有着深远的意义。

我也很佩服Hammer，他把具体的图标描绘得如此细致，以至于我常常盯着图标发呆，仔细研究它的技法；

希望B端的图标不要因为门槛而打扰大家。 我曾经对图标深感困惑。 希望您能从本文中有所收获。 由于篇幅较长，经过多次修改，存在一些不正确的细节。 请留言指正。

我是CE青年

2B行业的2B设计师