标题涨姿势了！原来还可以这样切图！正文界面设计时，为了更好地与开发协作，UI 设计师们通常需要根据网页端、移动端不同的界面开发需求，单独制作各个参数的切图，并标注好尺寸和间距，再交付给开发完成 html + css 布局的静态页面。「切图」作为 UI 设计师重要的输出物之一，不仅是一个体现设计师专业水准的重要标准，也是对设计态度最有力的表达，更是确保前端开发最大限度还原设计效果的关键。那么如何输出具有全局把控和细节专注的高质量切图呢？本篇文章将从工具使用、输出类型、命名规范这三个方面解析「切图」的那些事儿。无论你是设计师还是工程师，如果你的工作中涉及到了切图，那么一定、一定要仔细往下看哦！

01 

如何利用工具简化切图流程？

名词定义 -「切图」是指添加了导出项的图层，通过设置倍率、前缀/后缀的方式生成和导出 png、jpg、webp、pdf等不同类型图片。

切图是一个流程性的工作，根据网页端、移动端不同的界面开发需求，设计师往往需要输出多套匹配不同设备型号的切图，命名后打包交付开发。这样一个相对较为繁琐的设计交付方式，在没有工具帮助的情况下，需要设计师花费大量精力在输出多套切图上，操作过程繁琐还容易出错，为后续开发工作增加不必要的工作量，甚至影响界面最终呈现效果。工欲善其事，必先利其器。合理利用工具可以起到事半功倍的效果，不断为我们的设计工作提效。面对繁琐切图流程所带来的一系列问题，相信你也和他们一样希望有一个工具能想你所想、帮你解放双手：“可以自动导出不同设备尺寸的切图吗？”“切图导出的分辨率可以调节吗？”“希望能够批量导出需要的切图，这样我可以更快速、方便地交付给开发。”如果你正在经历以上这些问题，那么请跟我一起继续往下看看 MasterGo 的切图功能是如何解决这些问题的吧！

更高效的交付方式

我们预设了 iOS、 Android、Flutter 设备的尺寸、倍率、前后缀、格式等参数。向开发交付设计稿时，无需再手动一个个切图并且设置参数导出，使用 MasterGo 切图功能，一图即可精准匹配多设备、多尺寸使用需求，从而避免因繁琐切图流程而导致的多余的工作量，帮助设计师们更高效、精准地交付设计稿。

更畅通的协作体验

不久前，MasterGo 切图工具上新了「切图列表」及「批量导出切图」功能，设计师交付设计稿后，工程师可以通过「切图列表」快速定位切图以及查看相关标注和应用方式，同时，还可以一键快速导出所有切图，或者批量导出你需要的切图，设计交付无缝衔接，在 MasterGo 上的协作体验更加畅快。在 MasterGo 你可以像这样便捷、轻松地使用切图功能为你的设计交付提效