这一期我们来聊一聊标签栏中的关键元素——图标。

图标其实存在于界面中的许多地方，但因为这一期主要分析标签栏，所以我会借标签栏中较主流的图标样式，总结一套图标制作与落地方法。这些方法在图标制作过程中都是相通的，大家可以举一反三。

标签栏图标规范

1. 图标样式

图标具体样式风格的定义是非常主观的，网络上也流传着许多的教程教大家如何设计五花八门的图标，所以在这里我就不再赘述了。我主要来总结一下基础的标签栏图标一般有哪些样式变化。

我调研了诸多的应用程序，发现主流的 APP 标签栏样式变化，大致分为以下五种。其中占比最多的是「由线型转面型」。

调研的应用程序中，所有使用到线性图标的应用程序，都将描边粗细限制在 1pt-2pt 之间。

2. 图标视觉大小

上一期我们讲到，iOS 定义了一套标签栏图标的尺寸规范。

iOS 在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。

那么为什么 iOS 会根据不同的图标形状给出不同的图标尺寸呢？因为 50px×50px 的正方形比 50px×50px 的圆形面积更大，所以正方形的视觉大小也会大于圆形。为了统一图标的视觉大小，正方形要做适当的面积收缩处理。（矩形同理）

于是我们看到许多平台都推出了图标辅助网格规范 ¹。其实如果遵从「面积相等」原理，理论上所有的图标网格都应该由下面这一套推理公式得出（以Material Design 标准图标网格为例）：

但实际情况是，不同平台的图标辅助网格规范建议尺寸都有一定的差异。原因就在于，虽然有时候我们参考「面积相等」原则对图标视觉尺寸进行了规范，但项目落地后发现视觉上可能还是有一些不协调，所以最终设计师还是会凭借自己的主观判断再进行微调。

记住：好的设计作品是理性的设计理论与设计师本身感性的碰撞结果，二者缺一不可。

3. 图标输出尺寸

iOS 规定标签栏图标的输出尺寸统一为 31pt×28pt；Material Design 规定标签栏图标的输出尺寸统一为 24dp×24dp。

但我们发现，在借助了图标网格解决了图标视觉大小的问题之后，每一个不同形状的图标，尺寸其实是不同的。为了方便前端落地，我们在输出切图文件时，要保持每一个图标文件的输出尺寸是相同的。该怎么办呢？

于是我们将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标与这个容器之间的空白像素，正好也帮助我们规避了图标落地后，切图边缘像素可能被截断的现象发生，所以我们称这个区域为「安全边距」。

对于安全边距的规定：Material Design 全平台规定图标的安全间距统一 2dp；iOS 则根据不同的图标使用场景给出的不同的图标网格和图标安全间距 2。

静态图标

标签栏的图标一般分为静态图标和动态图标两种。

静态图标的实现方法相对容易，可以与前端沟通确定本次项目交付的标签栏图标文件是采用位图还是矢量图。如果是位图建议交付 .png 格式文件；如果是矢量图建议交付 .svg 格式文件。

1. 位图图标

使用位图时请注意以下两点：

不同项目环境输出的切图套数不同

• 交付 iOS 原生的标签栏图标切图需要 @1x/@2x/@3x 三种倍率的切图文件；
• 交付 Android 原生的标签栏图标切图需要 @1.5x/@2x/@3x/@4x 四种倍率的切图文件（@0.75x 和 @1x 切图层分别用于 ldpi 和 mdpi 分辨率设备，但这些设备现在几乎已退出市场，所以可不考虑，但最终视项目真实需求确定。）；
• 交付 web 项目的切图需要试情况而定，一般常用 @2x 切图，因为 @2x 向下适配 @1x、向上适配 @3x，都不会产生太大的图片失真。但有时候前端小哥会要求用到其他倍率切图，所以最终以具体需求而定。

请注意：这里我所提到的倍率全都是「绝对倍率」，这个概念非常关键。

「绝对倍率」指的是：以上所有的倍率都是针对 @1x 设计稿下的输出倍率尺寸。而当你使用 @2x 作图时，为了保证「绝对倍率」不变，你的切图输出倍率就应该设置为 @0.5x/@1x/@1.5x 。

如果你在 @2x下作图，却依然保持输出 @1x/@2x/@3x 的切图，那你输出的文件尺寸最终其实是 @2x/@4x/@6x。

有一点绕的话，我们以 Sketch 导出位图切图为例：

所以如果你日常使用的是 Sketch，也是用 Sketch 原生导出工具，那你的切图预设应该根据你的作图尺寸而定，见下表：

如果你日常使用的是 PS，用 Cutterman 切图，那么 Cutterman 会自动识别你当前的画板，然后根据它的宽（横屏情况下是高）来设定它的基准分辨率。那么你在任何情况下输出 @1x/@2x/@3x 的切图，其实都是「绝对倍率」，不用像 Sketch 当中一样换算。前提是「设置当前画布为：Auto（自动识别）」。

假设你在 @2x 下作图，执意不管不顾「绝对倍率」，又忘了交代前端人员手动处理切图尺寸的话，那你所有的切图尺寸实际都是设计稿所需图标尺寸的2倍。就算前端小哥帮你手动处理了切图尺寸，每一张切图所包含的像素信息，都比项目真实所需的要多很多，完全就是在徒增所需切图文件的大小。

注意切图文件大小

切记，公司的线上项目中，用户从服务器下载的每一单位的流量都是要公司花钱的，所以许多项目管理者都是很在意控制线上文件大小的。于是压缩切图是 UI 必备的技能之一。

虽然图标的文件大小一般只有几 KB，但是项目大了难免积少成多，所以在真实项目中，不管任何切图我都会手动压缩一次。