几何元素图标如何设计？最全教程来啦！

更新时间：2023-02-10 10:39:19

几何元素抽象图标是一种常用的图标设计风格，其特点是使用几何抽象图形来表示意义。这种风格的图标通常具有视觉吸引力，并且能够很好地转化为不同的尺寸和颜色。几何元素抽象图标可以用于许多不同的场合，如网站、应用程序、海报和平面设计等。跟随教程，一起来学习如何绘制一个优质的几何元素抽象图标吧！

1、案例图设计尺寸

• 图标绘制在 32*32px 的像素网格上，并可等比缩放到不同大小以供实际场景应用。
• 在图标网格中预留了 2px 的出血，这样可以确保图标在导出时不会出现边缘被裁切的情况；同时在设计过程中，也为设计师留下了把控图标视觉平衡的余地。大多数情况下，不建议超出安全区域。

2、图标的设计规范

常见图标尺寸

在界面图标设计中，最常用的尺寸包括1212px、1616px、2424px、3232px、4848px。其他常用的尺寸有6464px、9696px、128128px、256256px、512512px

图标网格（Icon Grids）

图标网格是一种框架约束，来自于Material design。它基于面积相等来达到视觉平衡，并通过这些核心形状来扩展，这有助于使产品系列图标保持规范与统一。小贴士：图标网格的作用是规范基础形，是一种指南，而不是硬性规则。当它影响图标表意时，应以视觉为准。

图标绘制标准

图标的线宽基于32px的绘制标准，使用2px的描边，包括曲线、内部和外部的描边。

图标内外描边规范

采用不同的描边方式会影响图标的形状，大多数情况下建议采用「居中描边」进行设计，便于裁剪与布尔运算。

3、冷饮和群组图标

主要展现信息

冷饮图标的结构：

• 可采用冰淇淋、饮料之类的参考物群组图标的结构：
• 群组就需要有多人的元素，可用两人或者三人

杯子（主要形态）

• 绘制 12px*6px 的三角形。
• 绘制 2px*2px 的圆形，和三角形保留 1px 的距离。

装饰（辅助图形）

• 绘制两个 6px*5px 的三角形作为辅助图形底部图形。
• 绘制两个 8px*8px 的三角形作为辅助图形中间部分。
• 绘制两个 8px*8px 的三角形作为辅助图形顶部部分。

装饰（辅助图形）

根据颜色系统填充冷饮辅助图形颜色。

人物（主要形态）

• 绘制 8px*8px 的圆形作为头部。
• 绘制 16px*18px 的椭圆形，只保留上半部分，添加 2px 的居中描边

人物（主要形态）

• 再绘制两个人物作为辅助图形。
• 要注意辅助图形在图标中的比例占比，要统一视觉大小。

以上就是全部的几何元素抽象图标设计教程，看完之后，可以使用即时设计，一起跟着教程自己做一组几何元素抽象图标吧！