海口ui设计培训 图标设计规范与流程

　　用图标准确的表达出实际含义，仅仅学其「形」是不够的，需要对图标有较为全面、系统的认识，了解图标的相关概念、正确的绘制方法及处理好一系列的细节，本篇文章将介绍图标设计的具体方法及要点，帮你规避掉一些常见的问题，让图标设计有理有据。设计规范与流程

　　遵循图标设计规范有利于设计师之间的合作及接下来的设计，以及产品整体图标风格的统一性，起到约束的作用，即便在更换设计师的情况下，也不至于出现较大的问题。在制定合理的设计规范前需要先了解图标到底有哪些规范，应从哪些方面入手，以便接下来的图标设计顺利进行。

　　1 网格尺寸比例

　　为了保持图标元素的平衡，尺寸大小需要保持一致，通常我们会建立基础网格尺寸进行图标的绘制，常见的网格尺寸有16、24、36、48、64、128、512、1024，这些网格尺寸并非固定，也会根据设计中的特殊尺寸而变化。

　　一个图标系统包括网格尺寸和图标元素两部分，设定好网格尺寸后，就需要用keyline来约束图标形状的长、宽比例了。zui终设计的图标大小并不是跟随网格尺寸，而是根据不同的形状占比受制于图标keyline，zui终形成统一的视觉大小。

　　从上图中可以看出，相同尺寸的图标在真实的视觉中相差很大，这就好比一个100像素的圆形、跟100像素的方形相比，站在逻辑角度，大小是相同的，但在视觉上，一定是方形显得更大。所以我们常说的图标大小相同，并非真实尺寸，而是视觉感受。

　　2 图标keyline

　　为保持图标视觉上的一致性和平衡感，需要先绘制keyline用来指导、规范图标设计。keyline由圆形、正方形、长方形-横、长方形-竖、三角形和对角线组成，网格的大小需保持4的倍数，便于不同尺寸的图标都能适配，可使用24*24px的网格尺寸为基准，其他尺寸的图标可通过增加倍数以此类推，如48*48px、72*72px......

　　下图是以24px尺寸的网格参考基准示例(出血为2px)：

　　3 确定图标风格

　　根据产品属性及目标用户并结合应用场景，找到zui符合自身产品性格、气质的图标设计风格，例如健身应用属力量、粗矿类型，圆角、曲线适合女性产品等，在前面的「性格与气质」中有举例说明。

　　4 图标绘制

　　经过图标风格的确定，图标细节便是接下来绘制过程的核心部分，对线性图标来说，注重的是线条的粗心，而面性图标则注重各小图形之间的距离，所以在绘制时，需要保持线条、间距的统一，方便后期的图标更新迭代。

　　1)线性描边粗细

　　我们以iOS@2x为基准(避免@1x的3px描边变成1.5px，小数点)，可适配zui2px、3px、4pxzui常用的描边粗细，4px视觉较重，用于级较高区域的功能性图标，2px看起来会显得更加精致，在设计中，还需根据产品的行业属性及调性来确定描边的粗细，并统一起来。

　　2)面性正负形间距

　　面性图标需要确保每个单独的形状之间有足够的间距，以24px大小的形状为例，其间距不能小于1px，以此类推，虽然未规定上限，但间距也不宜太大，否则无法相互组合关联，以实际视觉的舒适度为准。

　　5 创意提取

　　根据行业类型及风格进行创意设计，如线性统一断点、融入品牌基因、单个元素倾斜、节日氛围烘托、修饰元素等，为图标塑造灵魂或传递更多信息而进行的二次创作。