为了方便新入坑的UI设计狮和前端开发攻城狮能更顺畅的看完这篇文章，首先，先来简单科普一下到底什么是切图（老油条可直接忽略）？

通俗的说，切图就是把设计稿切成一片片的，然后前端攻城狮经过div+css功能最大限度的还原设计图，也就是要把零碎的图片整合成一张完整的图片。那为什么要切图，UI设计狮做完设计稿后交给攻城狮撸代码不就完事了？实际上一张完整的设计稿是由不同的元素组成的，比如说，Logo、背景图、图标、文本等等，而部分元素，前端攻城狮是无法使用代码实现效果的，因此，需要将其单独切出来使用。

好了，其它的就不多赘述了。想了解更多的相关知识，大家自行去脑补。以一句话来描述其重要性，切图是实际开发过程中必不可缺的一步，切图资源的输出将直接决定最终产品的效果。既然这么重要，到底是谁负责切图呢？是UI设计狮还是开发攻城狮？

我们经常会看到UI设计狮和前端攻城狮之间的撕逼大战。UI设计狮说：“我们都已经输出了高保真效果图了，切图那种脏活累活不应该是攻城狮自己去摆平吗？”攻城狮说：“设计狮切图更加专业，我们开发人员的主职是专注于代码。”.......这种争论终将无法得到定论，毕竟公说公有理，婆说婆有理。

以小编个人经验，切图是设计狮和攻城狮都必须掌握的技能。作为设计狮的你，自己的设计稿只有自己才知道该以什么形式去展现；此外，自己生的孩子不该自己养吗？作为攻城狮的你，万一哪一天UI设计狮不能来上班了，你们就罢工了吗？你要始终相信一句话：“技多不压身”。那么作为设计狮或是攻城狮的我们，切图这种脏活累活，我们就得默默承受吗？

当然不是，看到这里的你有福了，小编接下来给大家推荐一款帮你轻松高效输出自动切图及标注的神器-摹客idoc。从此解放你的双手，告别手工，让攻城狮也可以像设计狮一样切图。下面带领大家一起来尝鲜摹客idoc亮点功能。

自动切图

针对不同的场景，切图的规范也会不一样。UI设计狮只需要在设计稿中标记需要切图的元素，在导入到摹客idoc中后，即可下载各种倍率的切图，方便适配各种平台。如：IOS @1×、@2×、@3×；Android mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi；Web @1×、@2×等；支持PNG及SVG格式。

智能标注

将Sketch、PS、XD中做的设计原稿导入到摹客idoc中后，便可轻松查看智能标注。此外，还可显示百分比标注及一次选择多个图层并智能标注。所有的样式代码都可自动导出。

放大镜

设计稿元素太多，自动标注密密麻麻看不清？在idoc中支持局部放大，在放大标注信息的同时，不会导致标注模糊不清，而且还可以随意放大倍数。

查找相同元素

支持一键查找页面中的任何重复元素（如文本、颜色、边距、宽度等），一次查找，就可全部看清。

文档管理

支持多种附件文档，支持任何类型文件的上传共享，并支持多种产品文档的直接在线预览，包括Axure、Justinmind、Mockplus的原型演示、office文档预览、图片文件预览、pdf和文本文件预览。还同时支持分组，团队协作更方便。

以上是摹客idoc的部分功能，怎么样？作为设计狮或是攻城狮的你，还怕切图吗？还怕团队协作沟通难吗?是不是想立即来体验一下这款神器呢？赶紧来试试吧！