图标设计是设计师在入门界面设计的必经之路,从主屏幕上的应用程序图标到引导用户完成任务的图形表示,图标无处不在。

好的图标设计是一门艺术,不仅元素必须以最小的尺寸进行可识别的渲染,而且基于矢量的图标也可以缩放以用于超大比例,一些设计师甚至使用图标风格的图像作为主要视觉效果。想要设计出优质图标icon,尝试从以下8个简单的步骤指南开始!

1. 从网格开始

好的图标设计始于坚实的基础,你只需要一个简单的方形网格即可开始绘制图标。

从网格开始

 在Pixso中,点击右侧栏的「布局网格」即可创建网格阵列,点击网格图标,可以将网格阵列更换为列或行。Pixso 支持自由组合网格、列、行 3 种基本网格。因为大多数图标最终都需要适合方形空间,因此选择在网格下绘制图标会更规范。

虽然网格是方形的,但并不意味着你的图标必须是方形的。它可以是圆形的或更多的矩形。网格只是为了帮助你创建一个框架,你可以在其中进行一致的图标设计。当你设计一些不是正方形的元素时,应该保持在网格中水平和垂直排列,这可以帮助你保持图标集的一致比例。

2. 用几何构建

图标通常都很小,因此使用让用户一目了然的元素进行构建很重要,这就是为什么这么多图标都植根于几何形状的原因。

圆形、正方形和三角形是最流行的形状组合,用户不必考虑它们或质疑它们是什么,每个形状都简单且可识别。

用几何构建

 例如,上图的文件图标无非就是由几个矩形组合在一起,形成一个文件夹。这个概念是创造性的、简单的,任何尺寸都易于阅读。另一个流行的“几何”选项是使用单个大写字母作为图标的一部分,虽然这不适用于广泛应用,但它可以作为功能性品牌标识符。

3. 创造独特的形状

虽然通常是从圆形和正方形开始创建图标,但如果你使用的是品牌识别图标的话,创建一个独特的形状尤为重要。即使是看似复杂的图标也常常以简单的形状开始,然后演变成更独特的东西。当谈到独特性时,你需要考虑一些设计元素:

创造独特的形状

 3D天气图标

3D天气图标

毛玻璃风格图标

  • 不要使用图像,会降低图标可识别性。

  • 不要使用文字,会降低用户可读性。

  • 尝试一些新趋势,如扁平化图标样式很通用。

  • 不要使用网格上的点直接进行连接。

  • 彩色图标更容易吸引人。

4. 图标需要适当留白

图标需要足够的空间来呼吸,因此在进行设计时,需要适当留白。试想一下图标的使用场景,用户在其杂乱的壁纸上看到图标,则该设计需要在框架内进行一些设置,以使图标更具可读性和可区分性。

图标需要适当留白

3D玻璃质感图标

在Pixso布局网格内,你可以围绕图标边缘创建一致的边框,就像在印刷设计中处理出血一样。颜色需要延伸到画布的这一部分,可以去掉即可。

5. 与品牌色彩保持一致

图标颜色的选用也比较讲究,如果你是为品牌创作的图标,如Logo、品牌识别等,则需要与品牌色调保持一致,使用同一套企业VI系统。

如果你是为网页设计或其他用途制作图标集,那可以先从黑色或白色的图标开始创作,然后在你接近完成设计时再添加颜色。通过使用具有高对比度的简单元素(白底黑字或黑底白字),你可以真正了解每个图标在空间中的外观。

6. 重视图标细节的优化

在绘制图标时,你需要注意图标设计中的每一个细节。虽然微小的细节可能看起来并不重要,它们甚至可能在最小的尺寸下都不完全可见,但它们可以为更多图形显示中使用的图标添加经典风格。

重视图标细节的优化

食物插画图标

越来越多的设计师在整个设计中使用图标作为按钮,并帮助引导更多文本重元素之间的视线,精心制作的图标可以帮助用户更快熟悉网站转换。

7. 以最小尺寸设计图标

虽然图标可以以任何尺寸使用,但通常比较受用户喜爱的图标尺寸是 16 x 16 像素。在完成图标设计后,请仔细检查你的图标在最小尺寸下还能否辨认?如果答案是否定的,需要重新设计或为小空间创建备用图标,例如网站图标。

8. 不要过度装饰图标

图标设计要保持简单,不要做过多的装饰,如阴影、轮廓、浮雕等。图标应该表示快速交互,能让用户一眼就能看明白,这才是图标设计需要关注的重点。如果用户因为试图弄清楚图标的含义而在图标上停留太久,那将会让用户失去耐心。

9. 总结

图标设计是一件非常有趣的事,如果你能掌握以上8个设计原则,更能快速开启设计。当然,Pixso资源社区里也有很多优质的图标资源,都可以免费一键调用。你可以从这个练习中学到很多关于如何更好地创建自己的简单形状的技巧,最重要的是学会灵活运用,根据自己的产品特征,找到合适的突破点去设计!