在日常设计中，我们会经常跟开发做对接，每次版本的更新迭代我们设计更换不同的图标，给到开发的时候他们去替换还要重新一个个的找到原来的然后在替换上去，这是很没有效率的，或者是新入职接到别人的文件，乱糟糟的图标命名，不仅自己看不懂给到开发他们也懵。

那么我们要怎么样来对接开发的图标才是最高效的呢？下面我梳理了我在工作中跟开发对接的流程。

本文目录

1.图标的命名格式

2.图标切片的理解

3.批量导出图标的技巧

4.总结

一、图标命名的格式

为了更好的对接开发，我们在给图标命名的时候就要了解开发的命名规则，下面简单说几个开发里面不能用的一些规则。

1.不能有空格，在开发的程序里面是不允许有空格的。

2.不能有大写（大写其实是这样的有些开发的语言可以有大写，有些语言不能有大写为了统一我们还是不要有大写）

3.不能有各种花里胡哨的标点符号，这个非常的关键，因为有的符号在开发的代码里面是有别的用途的，为了避免冲突。唯一能用的符号是/和_那我们为什么要用这两个符号呢，这是为了让图标更加能够一目了然。

这里重点说一下这个图标按用途来命名，如果在今后的工作中不论你是版本更新还是迭代，如果你需要修改某个图标的话，你如果是用用途来命名的话你把图标直接给到开发，开发是非常容易修改的，只需要替换覆盖到他的icon库就好了。

如果不是以图标的用途来命名的话，下次需要改icon的话你就要从新给这个icon一个新的名字，这样跟开发对接的时候他还要在新打一个新图标的名字，这样不仅效率变低还非常的麻烦。

二、图标切片的理解

切片又分为两种，一种是内嵌切片，所谓的内嵌切片就是把切片内嵌到画板里面了，他的大小是跟着形状或者是画板的。还有一种是独立切片或者可以说是图层切片，这种独立切片可以随意更改他切片的大小，它在调整大小的时候不会影响图标的大小。

因为每个图标的长宽比都是不一样的，内嵌切片他就会根据你图标真实的大小切，这样交付开发的时候大小参差不齐会很麻烦。而用独立切片先定一个大小，然后根据大小每个图标在切图导出，这样导出来的图标大小都是一样的。

三、批量导出图标的技巧

这里说一些上传蓝湖的一些小技巧，设计稿上传蓝湖后，开发在测量元素边距会点到切图内的边距，所以我们可以在蓝湖的右上角有个设置按钮。打开里面的切图置顶功能，这样开发测量的时候就不会点到切图里面了。

在我们页面很多的情况下，就要用到批量导出切图了，这时候我们可以在蓝湖按住键盘Shift+鼠标左键框选所有页面。右键下载切图选择自己要的格式，这样就能把所有界面的切图全部导出了。

四、总结

为了达成快速的对接开发，切图的命名逻辑是非常重要的，当然这个命名只是一个公式，具体看自己如何定。开发重点是关注图的距离大小尺寸然后是名字，只要名字是对的，开发把所有图标上传图标库，然后去调用就很方便。剩下的就是借助一些辅助工具，蓝湖就能很好的将所有切图快速的导出，而且还能自动的标注。

当然在实际工作中我们还会遇到很多问题，提高效率交付开发还有很多方式方法等着我们去挖掘，本篇只是说一下我自己工作中的流程。如果还有遗漏知识点没讲到还望指教，我也是在学习的路上。

Powered by Froala Editor