这篇文章倾注了作者丰富的职业心得，相信对您的工作实践大有裨益。文章中提到了若干文档和插件，您可以在文末找到获取这些资源的免费途径。

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

图标实际上遍布于界面的多个区域，然而鉴于本期内容主要聚焦于标签栏，我计划以标签栏中较为普遍的图标设计风格为基础sketch导出svg图标，提炼出一套图标设计与实施的方法。这些方法在图标制作的全过程中具有普遍适用性，大家能够触类旁通。

01 标签栏图标规范

1.1 图标样式

图标的具体样式与风格往往具有强烈的个人主观性，网络上有众多教程传授设计各式各样图标的方法，因此在此不再详述。我主要目的是对基础标签栏图标常见的样式变化进行归纳总结。

经过对众多应用程序的调研，我发现APP的标签栏设计风格出现了多样化趋势，主要可归纳为五种类型。在这其中，“从线形向面形转变”的设计模式占据了相当大的比例。

在调研所使用的应用程序中，那些涉及线性图标的程序，其描边的粗细被统一规定在1至2个像素的范围内。

1.2 图标视觉大小

iOS定义了一套标签栏图标的尺寸规范：

iOS所规定的尺寸并非图标文件最终呈现的尺寸，而是设计师在绘制图标时，依据不同图标形态所参考的尺寸标准，其宗旨在于确保图标在视觉上呈现统一的大小。

为何iOS会针对不同的图标造型设定不同的图标尺寸呢？这是因为一个50像素乘以50像素的正方形区域相较于一个同尺寸的圆形区域，其面积更大，从而在视觉上显得更大。为了确保图标在视觉上的统一性，正方形图标需要进行一定的面积缩减处理。（矩形图标亦是如此。）

于是，众多平台纷纷发布了图标辅助网格的相关规范。实际上，若严格遵循“面积相等”的原则，从理论上讲，所有图标网格均应依据以下推理公式推导得出——以标准图标网格为例。

然而，现实情况却是，各个平台的图标辅助网格所推荐的尺寸不尽相同。这主要是因为，尽管我们有时会依据“面积相等”的原则来规范图标的视觉尺寸sketch导出svg图标，但在实际应用中，视觉上仍可能存在不协调之处。因此，设计师最终仍需依据个人主观判断进行细微调整。

好的设计之成，源于理性设计理论的深刻理解和设计师自身情感的巧妙融合，这种碰撞不可或缺。

1.3 图标输出尺寸

苹果公司规定，标签栏图标的标准输出尺寸应为31点乘以28点；同时，安卓系统则明确要求标签栏图标的输出尺寸应为24dp乘以24dp。

我们在运用图标网格解决了图标视觉大小不一致的问题后，发现各个形状的图标尺寸实际上各不相同。为了便于前端实施，我们在生成切图文件时，必须确保每个图标文件的输出尺寸保持一致。面对这一挑战，我们该如何应对呢？

因此，我们将所有图标安置于与其体积略微超出的统一规格容器之内。这样的设计使得图标与容器之间的空白像素得以存在，从而有效避免了图标放置后边缘像素可能出现的截断问题。鉴于此，我们将这一空白区域命名为“安全边距”。

关于安全边距的规定：各平台对图标的安全间距有统一标准，一般设定为2dp；而在iOS系统中，会依据不同的图标应用场景，提供多样化的图标网格及相应的安全间距²。

02 静态图标

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

实现静态图标的过程较为简便，我们需与前端团队协商，以确定本项目交付的标签栏图标文件所采用的格式。若为位图，则推荐提供.png格式的文件；若为矢量图，则推荐提供.svg格式的文件。

2.1 位图图标

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

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

在此需要强调的是，我所说的倍率均指“绝对倍率”，这一概念极其重要。

“绝对倍率”这一概念涉及的是：在针对原始设计稿的@1x尺寸进行输出时，所有倍率的计算基准。若你采用@2x的绘图模式，为了维持“绝对倍率”的稳定性，你所设置的切图输出倍率应调整为@0.5x、@1x或@1.5x。

若你在@2x分辨率中进行绘图，却仍旧采用@1x/@2x/@3x的切片进行输出，那么你所得到的文件实际尺寸将会变为@2x/@4x/@6x。

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

因此，若您在日常生活中所采用的是原生导出工具，那么您的切片设置需依据您的绘图尺寸来设定，具体可参考下表内容。

若您平时操作的是软件，并采用裁剪图片功能，系统将自动识别您当前的绘图区域，并依据其宽度（在横屏模式中为高度）来调整基准分辨率。这样，无论您选择输出1倍率、2倍率还是3倍率的裁剪图片，都无需进行额外的换算。但需注意，这一功能的前提条件是您的当前画布设置为“自动识别”。

若你在@2x的条件下绘制图形，坚决忽视“绝对倍率”这一概念，并且未向前端同事明确指出需手动调整切片尺寸，那么你制作的所有切片尺寸实际上都是设计稿中图标尺寸的两倍。即便前端同事亲自帮你调整了切片尺寸，每张切片所包含的像素数据量仍远超项目实际需求，这无疑是在无谓地增大切片文件的大小。

2）注意切图文件大小

务必注意，在公司的网络项目里，用户从服务器端下载的任何流量单位均需公司承担费用，因此，众多项目经理对线上文件尺寸的控制尤为重视。正因如此，压缩和切割图像成为了UI设计师不可或缺的技能之一。

尽管图标文件通常仅占几KB，但随着项目规模的扩大，细微之处累积起来也可能变得不少，因此在实际操作中，对于每一张切图，我都会亲自进行一次压缩处理。

这里向大家推荐一个能够有效减小.png文件体积，同时几乎不会造成画质损失的免费在线平台³。

2.2 矢量图

位图在进行切图处理时，常常遇到交付的倍率图数量庞大、图像容易发生失真、文件体积难以掌控等挑战。然而，这些问题在矢量图的处理中均得到了有效解决。目前，.svg矢量图在项目中的应用日益广泛，变得越发流行。UI设计既可以在中完成，也可以在中制作。

一般与前端人员对接有在线图标库对接与本地文件对接两种。

矢量图标资源库众多，其中在国内颇受欢迎的是阿里巴巴的矢量图标库；本地对接流程则是将文件直接传递给前端工作人员，他们负责对项目文件进行管理和调用。

若.svg图片输出结果与设计图样存在差异，请务必关注以下几点：

svg不支持渐变颜色填充；

SVG格式不兼容描边效果，因此需将所有带有描边的图形轮廓化处理。在中，可以通过执行“图层”菜单下的“轮廓化”命令（快捷键为O）来实现；而在Adobe 中，则需选择“对象”菜单中的“路径”选项，然后点击“轮廓化描边”。

为确保图标尺寸统一，须在图标正下方添加一个透明方形，并将其与图标一并输出。

03 动态图标

为了增强用户的使用感受和产品的娱乐性，带有动态效果的微交互式标签栏图标逐渐受到了广泛的欢迎。

动效在前端落地的方法其实有很多：

因此，经过综合考量，我们得出结论：在实现落地标签栏的动态图标功能上，目前最为高效且实际可行的方案依然是使用动画技术。

3.1 的背景

这是一个开源的、适用于多个平台的动画库。在表现上，它呈现为一张图片，但其背后是通过代码实现的，因此属于矢量图形。即便是设计得非常复杂的动画，其文件体积也能控制得非常小巧。

UI与前端对接是通过交付一个json代码文件。

若这是你初次涉猎，那么尝试阿里打造的一站式动画平台——犸良动画⁵，将是一次极佳的体验。该平台底层技术基于预设动画效果，而这些效果已被阿里二次封装。你可在其中自由调整元素与参数，随后尝试导出你的首个json文件。

3.2 如何上手

以下是实现动画效果的UI与前端对接流程的详细步骤指南。在深入掌握这些信息之前，建议您查阅官方发布的详细说明文件⁶。

步骤一：安装Ae和

制作动画，首先你必需两个工具：Ae和插件。

Ae的最低版本需求是Ae。鉴于众多设计师的反馈，在汉化版本的Ae中存在不少问题，因此随后的教程将以Ae英文版为基础。若您已将Ae汉化，建议在制作动画时暂时解除汉化设置。

随后进行获取。插件自更新以来，版本种类繁多，但并不保证最新版本就适合您当前的项目需求，这是因为前端所依赖的解析包可能无法正确解读您使用最新插件生成的json文件。

一旦选定方案，开发团队将查阅相关资料，因此UI设计师只需与前端协同，确认恰当的插件版本。在最终审查阶段，务必验证当前动画能否在项目所需的所有运行环境中顺畅播放，这样才能证明UI所采用的插件与前端所用的解析包版本是相互匹配的。

获取后，将其导入至ZXP ⁸软件中，该软件便会自动识别并安装插件至Ae。

安装完成后，就可以在AE的“窗口-扩展”中看到啦~

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

若你技艺高超，自然能够在Ae软件中直接绘制图案动画。然而，若你仍旧倾向于先在其他应用程序中完成基础图案的绘制，之后再在Ae中进行动画制作，那么你就必须掌握如何将图案导入至Ae的方法。

Adobe公司旗下拥有Ai和Ae两款工具，因此Ae具备了对.ai格式文件的完美解析能力。若您在Ai中进行图形设计，可以将其直接保存为.ai格式，随后在Ae中进行打开使用。

若您所用的文件，可先将其导出为.svg格式，随后用Ai软件打开该.svg文件，将其转换并保存为.ai格式，最终在Ae中进行编辑处理。

自然，存在一些能够直接与Ae相连的插件，比如AEUX（其前身）。安装时需在Ae中一并部署AEUX插件，它负责信息传输，而Ae则负责接收。关于具体的使用步骤，官方教程中已有详细说明，此处便不再一一阐述。

步骤三：制作动效并输出

与静态图标处理方式相似，为确保图标在落地时视觉大小保持一致，动效图标组输出的文件尺寸应保持一致。因此，在制作动画前，需明确合成文件的尺寸。官方建议：鉴于输出的是矢量动画，建议以@1x格式输出动效，这样前端人员在不同屏幕上放大时，动画不会出现失真现象。

在着手制作之前，务必要仔细研读相关的Ae参数文档¹⁰，以免您辛勤制作的动态效果在前端无法得到正确解析。特别指出，在原生环境中，对Ae表达式是无法进行解析的。

完成制作动效后，就可以通过导出动效了。

步骤四：预览与交付

导出作业后，你会在指定的文件夹里找到一个.json文件，此外，若你的动态效果中包含了位图，系统还会额外创建一个文件夹。这些文件都是你必须提供给负责前端开发工作的同事的。

.json文件里所保存的动画效果相关代码，对于UI设计方面并不需要过分关注，然而，其中有两个具体信息是你务必掌握的。这些信息对于你与前端进行对接交流以及获取文件内容至关重要。

在进行UI自检动效的预览或相关人员需查看动效时，可通过拖拽.json文件至预览界面进行查看。同时，iOS用户还可以下载相应的APP，通过扫描预览页上的二维码，便能在移动设备上实现动效的预览。

04 总结

我已经将整个图标制作的步骤详尽地梳理完毕。首先，需关注图标设计的规范；接着，在制作位图、矢量图以及动态图标时，需留意诸多细节；在此过程中，我几乎将自己在实际项目中遇到的所有问题都一一告知了大家。至于富有创意的部分，就由你来发挥吧！

文中提及的所有文档链接以及插件资料，我已经悉数打包并整理完毕！请记得前往公众号界面后台进行领取哦~

本期福利

为了方便你我他

阿叶已经把文中提到的资源上传至百度网盘

公众号内回复「图标落地」即可获得！

——

同时也希望大家转发和在看哦，你们的支持就是我的动力！

如有侵权请联系删除！