了解图标规范，用Lottie动画让图标落地

　　图标作为标签栏中的关键元素，本文汇总了主流图标样式，并结合实际案例，探讨了图标制作的相关规范和实现方法，供读者参考与学习。

　　本系列文章第二期，我们将聚焦于标签栏中的核心——图标。若您尚未熟悉标签栏的平台规范，建议先阅读《用户体验之前，先了解标签栏》。

　　图标广泛应用于界面设计中，但本文聚焦于标签栏图标，将借助主流的标签栏图标样式，总结一套通用的图标制作与实现策略。这些策略在图标设计中具有普适性，读者可灵活应用。

一、标签栏图标规范

1.1 图标样式

　　图标的具体风格具有主观性，网络上已存在众多设计教程，因此本文不再赘述。主要总结基础标签栏图标的样式变化。调研显示，主流APP标签栏图标变化大致分为五种，其中“由线型转面型”最为常见。

　　所有使用线性图标的APP，其描边粗细通常限制在1pt-2pt之间。

1.2 图标视觉大小

　　上一期提到，iOS定义了一套标签栏图标的尺寸规范，但并非最终输出尺寸，而是为设计师提供不同图标形状的参考尺寸，以确保图标视觉大小一致。

　　正方形（50px*50px）的面积大于圆形（50px直径），因此正方形需适当收缩以统一视觉大小。许多平台推出图标辅助网格规范，遵循“面积相等”原则。但实际中，不同平台的图标网格建议尺寸存在差异，设计师需根据具体情况进行微调。

　　记住：优秀设计是理性设计理论与感性创作的结合。

1.3 图标输出尺寸

　　iOS规定标签栏图标输出尺寸为31pt28pt；Material Design为24dp24dp。为便于前端实现，输出时保持同一尺寸容器内图标文件尺寸一致，同时设置“安全边距”避免切图边缘像素被截断。Material Design规定安全间距为2dp；iOS则根据不同使用场景给出不同网格和安全间距。

二、静态图标

　　标签栏图标分为静态和动态两种。静态图标实现相对简单，需与前端沟通确定采用位图或矢量图。位图建议交付.png格式；矢量图则使用.svg格式。

2.1 位图图标

　　使用位图时需注意：

1. 不同项目环境输出的切图套数不同。iOS原生需@1x/@2x/@3x切图；Android原生需@1.5x/@2x/@3x/@4x切图；web项目视需求而定，常用@2x切图。注意保持“绝对倍率”。
2. 控制切图文件大小。公司需支付用户下载流量费用，因此压缩切图是UI必备技能。推荐使用tinypng进行.png文件压缩。

2.2 矢量图

　　矢量图解决了位图的诸多问题，越来越受欢迎。.svg矢量图可在Sketch或Ai中制作，与前端对接方式有在线图标库和本地文件两种。若.svg切图与设计稿不符，检查以下三点：

• svg不支持渐变颜色填充；描边需轮廓化。
• 确保一组图标文件尺寸一致。
• 在图标下方增加透明方形一同导出。

三、动态图标

　　为提升用户体验和产品趣味性，动效微交互的图标越来越流行。前端实现动效的方法多样：直接代码实现适用于简单动效；GIF和png序列帧因文件大和易失真已较少使用；Facebook Pop/Rebound/Keyframes和Lottie结合Ae输出动画代码，更受青睐。Lottie支持更多Ae样式，如蒙版、遮罩、修剪路径等。因此，Lottie是目前最高效可行的动态图标实现方式。

3.1 Lottie背景与上手步骤

　　Lottie是Airbnb开源的跨平台动画库，通过代码实现矢量动画。UI与前端通过交付json文件对接。若初次接触Lottie，推荐使用阿里的一站式动画平台犸良动画进行体验。

3.2 Lottie实现步骤：

1. 安装Ae和bodymovin：需Ae CC2014及以上版本和bodymovin插件。确保插件版本与前端解析包兼容。将bodymovin拖入ZXP Installer安装。
2. 导入图案：可直接在Ae中绘制或导入Sketch/Ai文件至Ae。Sketch可通过AEUX插件与Ae对接。
3. 制作动效并输出：确定合成文件尺寸，阅读Lottie支持的Ae参数文档，避免前端无法解析。完成制作后通过bodymovin导出动效。
4. 预览与交付：交付.json文件和（可选）images文件夹给前端人员。使用LottieFiles预览动效。

四、结语

　　本文总结了图标制作的整个流程，包括规范、位图/矢量/动效图标的制作要点以及Lottie动画的详细实现步骤。希望读者能结合实践灵活应用这些策略，发挥创造力设计出优秀的图标作品！