掏空家底！图标设计落地全方位指南

如期而至，这是标签栏控件总结的第二。这一真掏空职业验，希望对的作所帮。

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

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

标签栏图标规范

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，但是项目大了难免积成多，在真实项目中，管任何切图我都会手压缩一次。

里推荐一个压缩 .png 文件大小，但几乎不产生失的免费网站 tinypng³（是我曾经深爱的一位前端小哥推荐给我的，在此表示感谢）。

2. 矢量图

位图切图会面临交付的倍率图过多、容易失真、文件大难控制等问题，但对于矢量图，这些问题都得了解决。目前.svg矢量图落地也在项目中越来越流行了。UI 可以在 Sketch 或 Ai 中制作。

般与前端员接有在线图标库接与本地文件接两。

线矢图标库很多，内比较流行的阿里巴巴矢图标库-iconfont⁴；本对接就直接将文件发送给端人员，他们会自行行项目文件的理与调用。

如果 .svg 切图输后，与设计稿中样式符，请注意查点：

svg 不支持渐变颜填充；

• svg 支持描边，请将有的描边轮廓。Sketch 中可通过「图层-轮廓」；AI 中可通过「对象－路径－轮廓描边」；
• 要确一组图标的文件尺寸一致，需在图标下方增加一个透明方形，和图标一同导出。

动态图标

为了提升用户体验和品趣味性，动效微交互标签栏图标也越来越流了。

动效在前端落地法其实有很多：

• 前端代码直实现：代码是大的，但通常用代码直写复杂动效会浪费项目间。简维度的动效如位移、透度、大变化等可以借助代码，但复杂动效就不要去扰前端哥了；
• 接刚 gif：这已经是旧技术时代动画解决案了，文件大请求文件也需要时，有时候法用户及时触控反馈。再者它是位图原，在高分辨率屏幕上缩放容易失真。
• png 序列帧：我们知道，动画一张一张的静态图交替变化形的。如果将每一帧动画都拆分一张图片，就了 png 序列帧。所以一套动画的 png 序列帧往往非常多，文件小自然就变了。所以后也团队引了雪碧图的方式，但文件小依然不乐观。并且同样图的原因，高分辨率屏幕易失真。
• Facebook Pop/Rebound/Keyframes/Facebook Pop/Rebound 是 Facebook 给 iOS 和 Android 供的画预设，是较早将效代码的开源技术方案，但画效果预设只有弹簧/衰减等一些简单样式。后来 Facebook 又推了 Keyframes，允许设计师自己在 Ae 中自定义画并导，然后交付给前端人员。
• Lottie 动画：和 Facebook Keyframes 相同，是结合 Ae 输出动画代码。但是 Lottie 更厉害的地方在，它比 Facebook Keyframes 来支持的 Ae 样式更，例蒙版、遮罩、修剪路径等等。

综上述，落地标签栏态图标，目前最效可行的还是 Lottie 画。

1. Lottie的背景

Lottie 是 Airbnb 开源的一个跨动画库。表现层面它是一张图片，但实现的方式是通过代码，所以它是矢量的。花式的动画也可以把文件大做非常。

UI 与前端接是过交付个 json 代码文件。

如果这第一次接触 Lottie，再好不过的体验方法就玩一玩阿里提供的一站式动画平台：犸良动画 5。它底层采用的技就 Lottie，只被阿里二次封装了许多预设的动画效果，可以自义其中的元素与参数，然后试导出的第一 json 文件。

2. Lottie如何上手

接下简单粗暴的 UI 与端对接实 Lottie 动画落的全骤参考。此之，全方了解 Lottie 的相关信息，请参阅 Lottie 官方明文档 6。

骤一：安装 Ae  bodymovin

制作 Lottie 动画，首先必需两具：Ae  bodymovin 插件。

Ae 最低版本要求为 Ae CC2014。又因为据很多设计师反馈，目前 bodymovin 在汉后的 Ae 中使会现诸多问题，后面的程都是基于 Ae 英版。如果你汉了Ae，最好在需要制作 Lottie 画时取消汉。

获取 bodymovin7。bodymovin 插件更新至今，版已非常，并不一定最新版就适用你当前的项目，因为前端使用的 bodymovin 析包能无法析你用最新版 bodymovin 插件输出的 json 文件。

一旦确定使用 Lottie，前端人在 GitHub 查询 Lottie 相关文档的，所以 UI 只需要合前端确定一下合适的 bodymovin 插件版就以。最终走查时，一定要确当前 bodymovin 输出的动画在项目所需要运行的所有境中运行，才说明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 析包版是兼容的。

获取了 bodymovin 后，将 bodymovin 拖入 ZXP Installer8 中，ZXP Installer 会动识别插件安装 Ae。

安装完成后，就可以在 AE 的「窗-扩展」中 bodymovin 。

步骤二：将 Sketch 或 Ai 中的文件导 Ae

果你技术娴熟，当也以直接在 Ae 中绘图案动画。但果你还是习惯先在其他软件中绘基础图案，到 Ae 中动画，你需要何将图案导 Ae。

Ai 和 Ae 都是 Adobe 旗下的工，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作图，可直存储为 .ai 文件，再在 Ae 中开。

如果你使用的是 Sketch，可以先导出为 .svg，再用 Ai 开该 .svg 文件，转换存储格式为 .ai，最后 Ae 中开。

然，Sketch 有接和 Ae 接插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 时安装 AEUX 插件，Sketch 负责传送，Ae 负责接收。具体使用法可以在官网教程查看，我不再赘述了。

步骤三：制作动效并输出

和静图标同理，为了保证落地图标视觉大一致，一组动效图标输出的文件尺寸应该是相同的。所以在你制作动画之前需要确定成文件的尺寸。Lottie 官方建议：因为 Lottie 输出的是矢量动画，所以建议以 @1x 输出动效，前端人员在任何屏幕上放大并不会失真。

在制作之前请必详细阅读 Lottie 所支持的 Ae 参数文档10，以免辛苦做出的动效，前端无法解析。别提醒：生环中 bodymovin 是不支持解析 Ae 表达式的。

完成制作动效后，可以过 bodymovin 导出动效了。

步骤四：预览交付

导出完成后在你的目的地文件夹中将存在一个 .json 文档，如果你的动效中还使用了位图，系统还会动生成一个 images 文件夹。这些都是你需要交付给你对的前端开发人员的文件。

.json 文件中记录的动效代码 UI 不需要过多关心，但是其中个息你是一定要了解的。它是你前端对沟通和获悉文件息的一些关键参数。

UI 检动效或其相关人员需要预览动效的候，可以用 LottieFiles11，拖入 .json 文件即可预览。iOS 和 Android 还可以下载 LottieFiles APP，扫描预览页中的二维码即可在移动端预览。

总结

整个图标的流程我已经部整理出来。首先要注意图标的规范，位图、矢量、动效图标时的注意点，我几乎把我在项目中踩的坑告诉大家。剩下的创造的节就给你。

所有在文中涉及的文档地址和插件下载链：https://pan.baidu.com/s/1xJGXB14dOm32PAJxu_4_0g 提取码: sfpj

备用下载链接：https://share.weiyun.com/5wBV1Nt

欢迎家关注作者微信公众：「UCD耍家」