【UI基础】图标篇丨图标的设计流程及规范

图标设计是UI设计的基础。针对UI入门设计师，将会写一个图标设计的专栏。

上一篇教程主要介绍了图标的基础知识，今天这篇教程主要介绍图标的设计流程及规范。

上篇回顾：【UI基础】图标篇丨图标基础知识

​

01

图标的设计流程

1.确定图标主题

根据图标要传达的含义来确定图标的视觉主题，可能有些文字比较难传达，我们可以通过关联词发散来找到主题。

2.确定风格

根据产品定位及用户人群，结合使用场景，找到符合的风格气质。可以多参考和分析竞品的设计风格，形成一定的差异化。

3.定结构造型

根据图标主题和风格形成初步的结构造型，再考虑视觉的美观性和协调性来调整细节。

4.图形输出

定稿后根据相应平台的规范导出规范的图标。

02

图标设计的规范

1.尺寸

应用图标：

设计图标时建1024×1024px的尺寸，定稿后输出其他尺寸。

功能图标：

以界面的大小为标准，常见尺寸有48×48px、32×32px和24×24px，通常为4的倍数。

2.网格和参考线

应用图标：下图为应用图标栅格系统，右侧为应用的案例。我们将设计完成的图形放在图标栅格系统中，根据参考线来调整大小和位置。

功能图标：通常尺寸比较小，需要把画布放大进行设计，可以使用网格和参考线来辅助设计。网格一般在菜单“视图”中开启。有一个图标设计模板推荐大家使用，里面有正方形、圆形、长方形等不同形状的图标范围示意，如下图所示：

这套图标网格规范可以让不同形状的造型在视觉上看基本都是统一的。

3.注意点

使用偶数尺寸绘制图标

奇数尺寸图标在水平对齐时会出现偏差；奇数尺寸的图标在缩小时会出现半格像素，导致边缘发虚不清晰。所以图标设计时尽量避免奇数尺寸的出现。

注意图标的视觉差

人的视觉是具有欺骗性的，在同一个矩形局域中相同高度和宽度的不同形状，我们看起来会觉得不平衡。所以要适当的放大使他们看起来是平衡的。物理平衡有时候是不等于视觉平衡的，而在图标设计中我们应该遵循视觉平衡来设计。

以上就是本篇要分享的全部内容，希望对各位有所帮助。下篇教程会侧重讲解图标设计的基本功——布尔运算。