认识达内从这里开始

我们在前几期的文章中给大家简单介绍了ui设计师在日常工作中会用到的一些设计元素等内容，而本文我们就继续来学习一下，静态图标设计应用分析。

1、静态图标

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

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

2、位图图标

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

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导出位图切图为例：

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

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

2)注意切图文件大小

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

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

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

3、矢量图

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

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

在线矢量图标库有很多，国内比较流行的是阿里巴巴矢量图标库-iconfont⁴;本地对接就是直接将文件发送给前端人员，他们会自行进行项目文件的管理与调用。

如果.svg切图输出后，与设计稿中样式不符，请注意排查以下三点：

svg不支持渐变颜色填充;

svg不支持描边，请将所有的描边轮廓化。Sketch中可通过“图层-轮廓化”(快捷键⌥⌘O);Ai中可通过“对象-路径-轮廓化描边”;

要确保一组图标的文件尺寸一致，需在图标下方增加一个透明方形，和图标一同导出。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。