品牌基因+图标体系，一套完整的图标系统设计思路！
我们都是为梦想一起努力的人
如何让图标更具备品牌特性
企业或产品的品牌通常通过三个方面体现：品牌理念、视觉符号和行为系统，其中视觉符号的概括和提取就构成了品牌基因。将产品的视觉设计与品牌基因融合，才能更好的展现品牌特色。品牌基因的提取有以下几种主要方式：
1. 形状提取 ：使用品牌 LOGO 中出现的有特点的形状，在图标设计中作为外形轮廓，或作为构成图标的基本元素：
2. 颜色提取 ：图标配色使用品牌色，将品牌色作为图标设计的点缀色或主色调：
3. 气质与风格提取 这种提取方法比较抽象，可以提取独特的设计风格、表现手法，比如饿了么的图标采用断开的边缘线、微软的产品图标采用同一颜色不同明度的表现手法；也可以提取品牌的气质内涵，比如北京奥运会的运动项目图标体现中国篆书之美：
上述的提取方法在应用时可同时使用，但需要注意，图标特征不要过多，否则会显得繁琐。这里给出一套图标的设计实例分解，便于大家了解品牌基因的提取方法：
如何搭建图标系统
在设计过程中除了融入品牌基因，还需要遵循设计原则，制定完整的图标系统设计规则，图标才会具备统一的美感和韵律：
STEP 1. 明确设计原则
识别性 ：图标语义传达明确，便于识别
简洁性 ：图形尽量简洁，不做多余修饰
一致性 ：效果、风格及表现手法保持统一
愉悦性 ：美观耐看，细节经得起推敲
品牌性 ：突出品牌的独有特性
STEP 2. 建立基础体系
一套完整的图标系统搭建的基础环节，就是制定设计所用的基础体系，包括网格系统和辅助线系统。
网格系统 ：为了保持图标的一致性，推荐使用网格进行设计。在网格中需要预留出血位，用来防止非标准造型的图标在具体应用时边缘被切掉；同时也为设计师把握图标间平衡留下余地。网格数量可以自行选择，蚂蚁金服的 Ant Design（可阅读 Ant Design 全面解析 进行了解） 采用的是 1024px * 1024px 的网格作为标准，并预留了 64px 的出血位：
再比如刚才案例中提到的 MOQI ID 图标，是采用 1000px * 1000px 的网格进行绘制，出血位的宽度为 60px：
辅助线系统 ：辅助线用于规定不同形状的图标的造型比例，使各种形状的图标在视觉上统一大小。如下图中 MOQI ID 图标采用正方形、圆形和长方形等标准形状，来控制图标比例：
STEP 3. 制定设计规则
Material Design（可阅读 Material Design 全面解析 进行了解）在图标设计标准中提到了以下几个需要注意的细节方面，这几个方面都会影响图标的形态，使图标拥有个性：
1. 端点 ：端点就是线条的起点和结束点，不同的端点形状体现不同的图标性格，一般直角会显得硬朗，圆角则显得更友好：
2. 角 ：角同端点一样，会传达出图标不同的性格。一套图标的角会有几组常用数值，这些数值之间最好有一定的规律，比如 Ant Design 中角采取的是 8 倍数原则，最常用圆角大小有 3 种：8px、16px、32px。下图为同一图标不同的边角效果示例：
3. 线条 ：线条之间的关系也需要有一定的规律，比如 Ant Design 采用 8 倍数原则，常用的线条粗细有 4 种：56px、64px、72px、80px：
4. 倾斜角度 ：线条的倾斜角度也有一定的规律可循，Ant Design 从 76 这个数值出发，根据实际情况进行灵活的应用：
STEP 4. 进行细节检查
去掉多余的节点，合并图形 为了保证图形整洁，在设计完成后对图标的多余节点进行删除，并将图形进行布尔运算合并形状，便于输出：
线条轮廓化，缩放不变形 将线条描边转化为轮廓，并在缩放时使用 Scale 缩放功能，保证图标不产生形变：
小数点及奇数检查 对小数点和奇数进行一轮修正，尽量保证为整数，便于输出和缩放：
做好图层命名与编组 对于图层遵守命名规范，编组清晰。
图标设计资源推荐
本文图片及内容参考来源：
首图来源：https://www.behance.net/gallery/69441617/COLORFUL-YEAR-LOGO-COLLECTION-2017
https://www.uisdc.com/brand-gene-icon-design-pro
https://ant.design/docs/spec/icon-cn