从零开始画图标系列：图标应用详解

命名的格式可以分成 3 级，格式大致为：「模块_名称_状态@1x」，比如下面的案例：

• 设置_钱包_高亮@1x.png
• 动态_评论_默认@1x.png
• 登录_按钮_点击@2x.png

当然，这不是唯一准确的命名方式，我们可以根据实际场景自由调整，但大家要牢记，图标的命名是为了方便我们查找、检索。

最后，图标 Symbol 的命名，要和图标的命名保持一致，这样才能起到事半功倍的效果。

4. 图标的格式

上一章启动图标的导出格式，会根据不同设备、场景导出不同的尺寸，并且使用 PNG 的格式。不要担心，工具图标虽然也面临设备不同的问题，但不需要导出这么多的规格。下面讲讲两种图标的导出类型。

位图格式

最常用的导出格式就是位图 PNG 格式，因为显示器显示倍率的不同，所以我们要导出 1x、2x、3x 三种倍率规格的图片，即设计了 16pt 的图标的话，我们需要导出 16pt、32pt、48pt 三种尺寸。并在导出的文件名后缀上标有 @1x、@2x、@3x 的标注。

这个规格对于 iOS 还是 Android 都是通用的，虽然还有 3x 以上的设备，但是那些设备只要调用 3x 的规格即可。

虽然后面会提图标可以使用矢量格式导出，但对于使用了渐变、投影或者拟物风格的图标，必须使用位图的格式，否则无法完整记录图形的细节元素。

矢量格式

导出 3 种规格的图标很麻烦，而且位图占用的空间往往较大。所以，iOS 和 Android 为了优化这个问题，在之前的系统更新中都默认支持了矢量格式的切图文件：

• iOS 使用 PDF 的 1x 切图
• Android 使用 SVG 的 1x 切图

当然，如果使用矢量格式导出，那么切记在分类文件夹的时候，要将 iOS 和 Android 分开保存，而不是混合在一起。

结尾

相信这已经是全网最完整最详细的图标教学了，希望各位能有所收获，并能掌握入门图标设计的正确姿势。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!