以是，末了一章，说的便是工具图标在项目中运用的方法，我相信这是在网上很难找到的分享，建议仔细阅读。
一套运用中的图标规格
图标是一个运用不可或缺的组成元素，在运用的界面中随处可见。也由于图标的常见性，我们每每须要在一个运用中运用多套图标，这和崇尚简约的第一印象是有背离的。
很多新手，都以为我们只要设计一套大而全的图标，在项目中对应提取即可。但有很多场景，如果只利用一种图标类型，那么效果会非常差劲。比如，我们看看下面的淘宝设置页，前后包含了 6 种以上的图标。是太繁芜了没错，但如果我们把图标都更换成同一套呢？
可以瞥见，右侧更换后的案例，效果非常的不理想，缺少比拟和意见意义性。交互规则中说：如无必要，勿增实体，但对付图标的利用来说，这便是必要。
运用内的图标规格不同，可以用两个属性来划分，大小和风格。
1. 图标的尺寸
大小便是图标的尺寸规格，有些界面的元素权重低，图标的尺寸就小，有些权重高的则反之。比如在 Apple Music 的播放界面，播放快进等按钮，作为页面最主要的按钮，尺寸非常大，其它可以点击的图标次之，而表示音量的两个按钮则最小。
确定图标尺寸，是我们在项目中进行图标设计的第一件事。但尺寸的确定，不是我们凭空制订出来的，我们要先构建呈现实的「场景」进行剖析，即先完成了界面的高保真原型或交互原型。
下方是我自己做的原型演示，在构建了这样的页面往后，我会在原型中检讨，我统共用了多少种图标的尺寸，它们分别会运用在哪些场景中，然后整理出来。如果涌现了一些以为没有必要的，可以将它们进行调度合并成一种尺寸。
以是，在这个案例中，我整理出了 4 种图标的尺寸：
48pt：分类、快速入口大图标32pt：底部 TabBar 图标24pt：常规工具图标16pt：小型提示图标定好了这 4 种规格，我们在后续的设计上才有明确的设计方向。再复习一遍，为什么我们须要先定尺寸再设计，而不是统一设计一套很大的图标进行缩小。
由于图标要尽可能知足像素对齐的哀求，通过缩小的图标每每在细节上会发生错位、模糊、丢失等问题。且在大画布上设计图标和一开始就在小画布中设计，两者在过程中得到的视觉反馈是完备不一样的，先在大画布画完，再缩小到 16pt、12pt 的规格时每每会显得太繁芜，或描边太粗。
2. 图标的风格
图标尺寸确认完往后，下面便是确认图标的风格了，和尺寸一样，我们要运用什么风格的图标，是须要在已经具备视觉雏形的页面中比拟确定的，而不能提前开始设计。
在我的设计流程中，常日会将图标放在项目的末了再开始设计，缘故原由便是图标的视觉样式风格是取决于所处位置和环境的，是「先有界面样式，再有图标风格」的。
在常规情形下，如果一个运用中有多套图标，那么普通的中小尺寸图标利用一样平常的线性或面性风格即可。而在分类、快速入口这些具备装饰性、大尺寸的类型中，就该当利用一些更激进的设计风格。比如下图是 58 同城客户端运用图标案例：
常日，一种风格会运用在一种「种别」的图标中。上方案例属于比较空想的状态，一种类别的图标对应一种尺寸，但是在一些更繁芜的环境中，每每同一种尺寸下还会包括不同类别的图标。
图标的不同状态
图标在一个产品中，除了充当装饰以外，每每也可以作为按钮来利用。每个运用中都有大量的图标可以进行点击和交互，比如底部导航栏，头部的图标、发布图标等等。
当一个图标能被操作后，那么我们就要把稳到它的状态变革。从导航栏图标举例，常规的选中状态是改换色彩，但也有越来越多的运用会在选中状态采纳不同的设计风格，通过更丰富的样式表现来提升可看性。比如淘宝、QQ 的底部导航栏。
还有，一些包含在控件内的图标，也会跟随控件状态的变更发生变更。例如在账号输入框中，如果选中了输入框，那么图标的色彩也得到改变。如果输入框目前处于不可输入状态，那么图标也会对应置灰。
合格的 UI 设计师会充分考虑到图标所变换的各种状态，并在提交给开拓的过程中会进行详细的解释、归类。以及，充分利用 Sketch 等软件中的组件功能，提升项目的效率和末了的产出成果。
图标的标注和切图
在我们完成了界面和图标的设计往后，要提交我们的设计给开拓职员。个中，包含我们的标注和切图。抛开其它设计元素不谈，我们就讲讲图标的切图须要遵照哪些规范，它和字体都是在这个过程中最随意马虎出错的地方。
运用图标的导出我们已经在上一章提到过，以是下面还是以工具图标的解释为主。
1. 图标的边界
我们要回到第二章工具图标的规范中，当我们确定出图标的尺寸时，不是要把图形设计得恰好撑满这个尺寸，而是利用格线系统来定义它们的大小。
很多新人会在这个过程中产生迷惑，那么在标注的过程中，我们标注的到底是图形到其它元素的间隔，还是图标外轮廓到别的图形的间隔。
实在，图标的间隔是根据外部轮廓进行打算的。虽然这个轮廓我们肉眼不可见，但它包含的内在规律可以帮助我们忽略一些不必要的小问题。
以是，要让标注有效，就一定不要偷
2. 图标的画布
现在有很多帮助我们进行标注和切图的协尴尬刁难象，比如蓝湖、Zeplin 等。我们只要将设计稿上传，程序员可以自行获取图标对应的切图。
在裁切一些特定元素时很好用，但通过线上页面导出图标的方法，是非常不牢固的。我们说过，一个运用中可能涌现多种规格的图标，以是合理的图标切图，要根据不同的规格进行导出和整理（如下图），而不是让程序员自己在线上工具中下载，这样不仅操作起来困难，而且图标间不同的状态难以被轻易获取。
以是，要在项目设计过程中，创建不同规格的画布（Symbol）并将它们分类排列，不仅利于我们对往后图标的调用，也方便在末了批量导出切图到对应文件夹中。
3. 图标的命名
涉及到切图的导出，我们也就不得不提图标命名的规范了，我之前写过一篇关于命名干系的文章中有比较详细的提到图标命名的方法，大家可以扩展阅读：《万字干货！
可能是最全面的UI 设计师文件命名规范》。
下面我们大略讲讲图标的命名规则。有很多新手和刚入职场的 UI 设计师会不明就里的强调图标一定要用英文命名，并且各种网络常见的英文命名词汇，我首先要指出这种做法是缺点的。
由于涉及到全体运用的图标系统时，会涌现大量寓意「抽象」的图标。比如在我上方案例中，有一个启动图标的中文名是「中二」，那么这个词该当如何翻译？纵然不受制于英文水平的发挥，但是你写的英文不代表开拓职员能看得懂，而大量抽象词汇的堆积末了导致命名无法成为有效的索引条件，由于没人看得懂，开拓须要查找一个图标的时候依旧是通过缩略图而不是命名。
以是，在内部没有详细的命名规范，亦或是程序员没有分外哀求的情形下，我更建议利用中文命名系统，由于海内多数程序员的习气会将获取的图标进行二次命名。
命名的格式可以分成 3 级，格式大致为：「模块_名称_状态@1x」，比如下面的案例：
设置_钱包_高亮@1x.png动态_评论_默认@1x.png登录_按钮_点击@2x.png当然，这不是唯一准确的命名办法，我们可以根据实际场景自由调度，但大家要牢记，图标的命名是为了方便我们查找、检索。
末了，图标 Symbol 的命名，要和图标的命名保持同等，这样才能起到事半功倍的效果。
4. 图标的格式
上一章启动图标的导出格式，会根据不同设备、场景导出不同的尺寸，并且利用 PNG 的格式。不要担心，工具图标虽然也面临设备不同的问题，但不须要导出这么多的规格。下面讲讲两种图标的导出类型。
位图格式
最常用的导出格式便是位图 PNG 格式，由于显示器显示倍率的不同，以是我们要导出 1x、2x、3x 三种倍率规格的图片，即设计了 16pt 的图标的话，我们须要导出 16pt、32pt、48pt 三种尺寸。并在导出的文件名后缀上标有 @1x、@2x、@3x 的标注。
这个规格对付 iOS 还是 Android 都是通用的，虽然还有 3x 以上的设备，但是那些设备只要调用 3x 的规格即可。
虽然后面会提图标可以利用矢量格式导出，但对付利用了渐变、投影或者拟物风格的图标，必须利用位图的格式，否则无法完全记录图形的细节元素。
矢量格式
导出 3 种规格的图标很麻烦，而且位图占用的空间每每较大。以是，iOS 和 Android 为了优化这个问题，在之前的系统更新中都默认支持了矢量格式的切图文件：
iOS 利用 PDF 的 1x 切图Android 利用 SVG 的 1x 切图当然，如果利用矢量格式导出，那么牢记在分类文件夹的时候，要将 iOS 和 Android 分开保存，而不是稠浊在一起。
结尾
相信这已经是全网最完全最详细的图标传授教化了，希望各位能有所收成，并能节制入门图标设计的精确姿势。