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

其实，图标的距离是根据外部轮廓进行计算的。虽然这个轮廓我们肉眼不可见，但它包含的内在规律可以帮助我们忽略一些不必要的小问题。

所以，要让标注有效，就一定不要偷懒只把图标置入画布中，而没有透明矩形背景。

2. 图标的画布

现在有很多帮助我们进行标注和切图的协作工具，比如蓝湖、Zeplin 等。我们只要将设计稿上传，程序员可以自行获取图标对应的切图。

在裁切一些特定元素时很好用，但通过线上页面导出图标的方法，是非常不牢靠的。我们说过，一个应用中可能出现多种规格的图标，所以合理的图标切图，要根据不同的规格进行导出和整理(如下图)，而不是让程序员自己在线上工具中下载，这样不仅操作起来困难，而且图标间不同的状态难以被轻易获取。

所以，要在项目设计过程中，创建不同规格的画布(Symbol)并将它们分类排列，不仅利于我们对以后图标的调用，也方便在最后批量导出切图到对应文件夹中。

3. 图标的命名

涉及到切图的导出，我们也就不得不提图标命名的规范了，我之前写过一篇关于命名相关的文章中有比较详细的提到图标命名的方法，大家可以扩展阅读：《万字干货!可能是最全面的UI 设计师文件命名规范》。

下面我们简单讲讲图标的命名规则。有很多新手和刚入职场的 UI 设计师会不明就里的强调图标一定要用英文命名，并且各种收集常见的英文命名词汇，我首先要指出这种做法是错误的。

因为涉及到整个应用的图标系统时，会出现大量寓意「抽象」的图标。比如在我上方案例中，有一个启动图标的中文名是「中二」，那么这个词应该如何翻译?即使不受制于英文水平的发挥，但是你写的英文不代表开发人员能看得懂，而大量抽象词汇的堆积最后导致命名无法成为有效的索引条件，因为没人看得懂，开发需要查找一个图标的时候依旧是通过缩略图而不是命名。

所以，在内部没有具体的命名规范，亦或是程序员没有特殊要求的情况下，我更建议使用中文命名系统，因为国内多数程序员的习惯会将获取的图标进行二次命名。

（编辑：西安站长网）

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