从零开始画图标系列：图标应用详解
|
其实，图标的距离是根据外部轮廓进行计算的。虽然这个轮廓我们肉眼不可见，但它包含的内在规律可以帮助我们忽略一些不必要的小问题。
所以，要让标注有效，就一定不要偷懒只把图标置入画布中，而没有透明矩形背景。 2. 图标的画布 现在有很多帮助我们进行标注和切图的协作工具，比如蓝湖、Zeplin 等。我们只要将设计稿上传，程序员可以自行获取图标对应的切图。 在裁切一些特定元素时很好用，但通过线上页面导出图标的方法，是非常不牢靠的。我们说过，一个应用中可能出现多种规格的图标，所以合理的图标切图，要根据不同的规格进行导出和整理(如下图)，而不是让程序员自己在线上工具中下载，这样不仅操作起来困难，而且图标间不同的状态难以被轻易获取。
所以，要在项目设计过程中，创建不同规格的画布(Symbol)并将它们分类排列，不仅利于我们对以后图标的调用，也方便在最后批量导出切图到对应文件夹中。
3. 图标的命名 涉及到切图的导出，我们也就不得不提图标命名的规范了，我之前写过一篇关于命名相关的文章中有比较详细的提到图标命名的方法，大家可以扩展阅读：《万字干货!可能是最全面的UI 设计师文件命名规范》。 下面我们简单讲讲图标的命名规则。有很多新手和刚入职场的 UI 设计师会不明就里的强调图标一定要用英文命名，并且各种收集常见的英文命名词汇，我首先要指出这种做法是错误的。 因为涉及到整个应用的图标系统时，会出现大量寓意「抽象」的图标。比如在我上方案例中，有一个启动图标的中文名是「中二」，那么这个词应该如何翻译?即使不受制于英文水平的发挥，但是你写的英文不代表开发人员能看得懂，而大量抽象词汇的堆积最后导致命名无法成为有效的索引条件，因为没人看得懂，开发需要查找一个图标的时候依旧是通过缩略图而不是命名。 所以，在内部没有具体的命名规范，亦或是程序员没有特殊要求的情况下，我更建议使用中文命名系统，因为国内多数程序员的习惯会将获取的图标进行二次命名。 命名的格式可以分成 3 级，格式大致为：「模块_名称_状态@1x」，比如下面的案例：
当然，这不是唯一准确的命名方式，我们可以根据实际场景自由调整，但大家要牢记，图标的命名是为了方便我们查找、检索。 最后，图标 Symbol 的命名，要和图标的命名保持一致，这样才能起到事半功倍的效果。
4. 图标的格式 上一章启动图标的导出格式，会根据不同设备、场景导出不同的尺寸，并且使用 PNG 的格式。不要担心，工具图标虽然也面临设备不同的问题，但不需要导出这么多的规格。下面讲讲两种图标的导出类型。 位图格式 最常用的导出格式就是位图 PNG 格式，因为显示器显示倍率的不同，所以我们要导出 1x、2x、3x 三种倍率规格的图片，即设计了 16pt 的图标的话，我们需要导出 16pt、32pt、48pt 三种尺寸。并在导出的文件名后缀上标有 @1x、@2x、@3x 的标注。
这个规格对于 iOS 还是 Android 都是通用的，虽然还有 3x 以上的设备，但是那些设备只要调用 3x 的规格即可。 虽然后面会提图标可以使用矢量格式导出，但对于使用了渐变、投影或者拟物风格的图标，必须使用位图的格式，否则无法完整记录图形的细节元素。 矢量格式 导出 3 种规格的图标很麻烦，而且位图占用的空间往往较大。所以，iOS 和 Android 为了优化这个问题，在之前的系统更新中都默认支持了矢量格式的切图文件：
当然，如果使用矢量格式导出，那么切记在分类文件夹的时候，要将 iOS 和 Android 分开保存，而不是混合在一起。 结尾 相信这已经是全网最完整最详细的图标教学了，希望各位能有所收获，并能掌握入门图标设计的正确姿势。 （编辑：威海站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
