从零开始画图标系列：图标应用详解

在 UI 设计中，图标不是孤立存在的。我们学习图标的设计，不是为了画一组套图，然后上传到设计平台中分享或求赞，而是要在真实的项目中发挥作用。如果不了解图标应用到项目中的知识点，那么真实的图标设计水平就会在项目设计过程中被损耗。

所以，最后一章，说的就是工具图标在项目中应用的方法，我相信这是在网上很难找到的分享，建议仔细阅读。

一套应用中的图标规格

图标是一个应用不可或缺的组成元素，在应用的界面中随处可见。也因为图标的常见性，我们往往需要在一个应用中应用多套图标，这和崇尚简约的第一印象是有背离的。

很多新手，都以为我们只要设计一套大而全的图标，在项目中对应提取即可。但有很多场景，如果只使用一种图标类型，那么效果会非常差劲。比如，我们看看下面的淘宝设置页，前后包含了 6 种以上的图标。是太复杂了没错，但如果我们把图标都替换成同一套呢?

可以看见，右侧替换后的案例，效果非常的不理想，缺乏对比和趣味性。交互规则中说：如无必要，勿增实体，但对于图标的使用来说，这就是必要。

应用内的图标规格不同，可以用两个属性来划分，大小和风格。

1. 图标的尺寸

大小就是图标的尺寸规格，有些界面的元素权重低，图标的尺寸就小，有些权重高的则反之。比如在 Apple Music 的播放界面，播放快进等按钮，作为页面最重要的按钮，尺寸非常大，其它可以点击的图标次之，而表示音量的两个按钮则最小。

确定图标尺寸，是我们在项目中进行图标设计的第一件事。但尺寸的确定，不是我们凭空制定出来的，我们要先构建出实际的「场景」进行分析，即先完成了界面的高保真原型或交互原型。

下方是我自己做的原型演示，在构建了这样的页面以后，我会在原型中检查，我总共用了多少种图标的尺寸，它们分别会应用在哪些场景中，然后整理出来。如果出现了一些觉得没有必要的，可以将它们进行调整合并成一种尺寸。

所以，在这个案例中，我整理出了 4 种图标的尺寸：

• 48pt：分类、快速入口大图标
• 32pt：底部 TabBar 图标
• 24pt：常规工具图标
• 16pt：小型提示图标

定好了这 4 种规格，我们在后续的设计上才有明确的设计方向。再复习一遍，为什么我们需要先定尺寸再设计，而不是统一设计一套很大的图标进行缩小。

因为图标要尽可能满足像素对齐的要求，通过缩小的图标往往在细节上会发生错位、模糊、丢失等问题。且在大画布上设计图标和一开始就在小画布中设计，两者在过程中得到的视觉反馈是完全不一样的，先在大画布画完，再缩小到 16pt、12pt 的规格时往往会显得太复杂，或描边太粗。

2. 图标的风格

图标尺寸确认完以后，下面就是确认图标的风格了，和尺寸一样，我们要应用什么风格的图标，是需要在已经具备视觉雏形的页面中对比确定的，而不能提前开始设计。

在我的设计流程中，通常会将图标放在项目的最后再开始设计，原因就是图标的视觉样式风格是取决于所处位置和环境的，是「先有界面样式，再有图标风格」的。

在常规情况下，如果一个应用中有多套图标，那么普通的中小尺寸图标使用一般的线性或面性风格即可。而在分类、快速入口这些具备装饰性、大尺寸的类型中，就应该使用一些更激进的设计风格。比如下图是 58 同城客户端应用图标案例：

通常，一种风格会应用在一种「类别」的图标中。上方案例属于比较理想的状态，一种类别的图标对应一种尺寸，但是在一些更复杂的环境中，往往同一种尺寸下还会包括不同类别的图标。

图标的不同状态

图标在一个产品中，除了充当装饰以外，往往也可以作为按钮来使用。每个应用中都有大量的图标可以进行点击和交互，比如底部导航栏，头部的消息图标、发布图标等等。

当一个图标能被操作后，那么我们就要注意到它的状态变化。从导航栏图标举例，常规的选中状态是更换色彩，但也有越来越多的应用会在选中状态采取不同的设计风格，通过更丰富的样式表现来提升可看性。比如淘宝、QQ 的底部导航栏。

还有，一些包含在控件内的图标，也会跟随控件状态的变更发生变更。例如在账号输入框中，如果选中了输入框，那么图标的色彩也得到改变。如果输入框目前处于不可输入状态，那么图标也会对应置灰。

合格的 UI 设计师会充分考虑到图标所变换的各种状态，并在提交给开发的过程中会进行详细的说明、归类。以及，充分运用 Sketch 等软件中的组件功能，提升项目的效率和最后的产出成果。

图标的标注和切图

在我们完成了界面和图标的设计以后，要提交我们的设计给开发人员。其中，包含我们的标注和切图。抛开其它设计元素不谈，我们就讲讲图标的切图需要遵循哪些规范，它和字体都是在这个过程中最容易出错的地方。

应用图标的导出我们已经在上一章提到过，所以下面还是以工具图标的说明为主。

1. 图标的边界

我们要回到第二章工具图标的规范中，当我们确定出图标的尺寸时，不是要把图形设计得正好撑满这个尺寸，而是利用格线系统来定义它们的大小。

很多新人会在这个过程中产生疑惑，那么在标注的过程中，我们标注的到底是图形到其它元素的距离，还是图标外轮廓到别的图形的距离。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!