界面设计时，为了更好地与开发协作，UI 设计师们通常需要根据网页端、移动端不同的界面开发需求，单独制作各个参数的切图，并标注好尺寸和间距，再交付给开发完成 html + css 布局的静态页面。
「切图」作为 UI 设计师重要的输出物之一，不仅是一个体现设计师专业水准的重要标准，也是对设计态度最有力的表达，更是确保前端开发最大限度还原设计效果的关键。那么如何输出具有全局把控和细节专注的高质量切图呢？
本篇文章将从工具使用、输出类型、命名规范这三个方面解析「切图」的那些事儿。无论你是设计师还是工程师，如果你的工作中涉及到了切图，那么一定、一定要仔细往下看哦！
名词定义 -「切图」是指添加了导出项的图层，通过设置倍率、前缀/后缀的方式生成和导出 png、jpg、webp、pdf 等不同类型图片。
切图是一个流程性的工作，根据网页端、移动端不同的界面开发需求，设计师往往需要输出多套匹配不同设备型号的切图，命名后打包交付开发。这样一个相对较为繁琐的设计交付方式，在没有工具帮助的情况下，需要设计师花费大量精力在输出多套切图上，操作过程繁琐还容易出错，为后续开发工作增加不必要的工作量，甚至影响界面最终呈现效果。
工欲善其事，必先利其器。合理利用工具可以起到事半功倍的效果，不断为我们的设计工作提效。
面对繁琐切图流程所带来的一系列问题，相信你也和他们一样希望有一个工具能想你所想、帮你解放双手：
“可以自动导出不同设备尺寸的切图吗？”
“切图导出的分辨率可以调节吗？”
“希望能够批量导出需要的切图，这样我可以更快速、方便地交付给开发。”
如果你正在经历以上这些问题，那么请跟我一起继续往下看看 MasterGo 的切图功能是如何解决这些问题的吧！
我们预设了 iOS、 Android、Flutter 设备的尺寸、倍率、前后缀、格式等参数。向开发交付设计稿时，无需再手动一个个切图并且设置参数导出，使用 MasterGo 切图功能，一图即可精准匹配多设备、多尺寸使用需求，从而避免因繁琐切图流程而导致的多余的工作量，帮助设计师们更高效、精准地交付设计稿。
不久前，MasterGo 切图工具上新了「切图列表」及「批量导出切图」功能，设计师交付设计稿后，工程师可以通过「切图列表」快速定位切图以及查看相关标注和应用方式，同时，还可以一键快速导出所有切图，或者批量导出你需要的切图，设计交付无缝衔接，在 MasterGo 上的协作体验更加畅快。
在 MasterGo 你可以像这样便捷、轻松地使用切图功能为你的设计交付提效
设计界面，鼠标点击工具栏「容器」旁的下拉图标或使用快捷键 S，即可开始使用切图工具。并且还可以使用快捷键 Shift + S，快速显示和隐藏制作的切图。
切完图后，需要在右侧栏下方设置导出选项，MasterGo 支持 Android、iOS、Flutter 设备的尺寸、倍率、格式等不同类型的切图导出。
btw，这里分享一个管理导出选项的小技巧，当我们想要调整或者删除某个导出设置时，可以选中该导出选项，并上下拖拽调整位置顺序，另外还可以点击“-”删除该导出选项。
MasterGo 提供了「切图列表」功能，如方图中演示的一样，你可以在切图列表中点击某个切图，在画布中快速定位并查看该切图相关的标注和应用方式。
在切图列表中，你还可以选择一键快速导出所有切图，或者批量导出你需要的切图，在整个切图输出流程中，帮你更快速、方便地交付给开发。
切图的图层需要与图标图层创建一个编组，这样切图的背景就会是一个透明的图层，方便开发使用。
任何元素在设计页面设置了切图导出选项，标注模式下，都会有虚线提示，帮助研发快速定位切图位置。
我们都知道合适、精准的切图可以确保设计效果图的高保真还原，并且降低工程师的开发工作量。
然而，切图时很多元素是不需要输出的，直接使用系统原生的设计元素修改参数即可。例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可，工程师会根据设计效果通过代码实现这种效果。
而那些代码无法实现的设计元素则需要通过切图的方式交付给开发，比如：
桌面应用图标和系统图标无法用代码写出来的，并且会被运用在不同的地方展示，在交付时需要把不同设备的尺寸全部输出切图。
按钮也是需要切图输出的元素，并且不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图，比如点击状态、不可点击状态等等。
图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。为方便开发同一类型的图片切图要保持尺寸一致，并且这些切图文件较大，需要控制切图文件的大小。
动效元素切图一般是指加载动效所需要的切图元素，如下拉加载动效就是由若干张切图连续播放形成的。这种切图要求要保证动效播放时的流畅自然，是需要设计师仔细斟酌的。
可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素。这些元素通过瘦身压缩，可以极大地减小图片的大小提升用户使用速度。这里需要注意的是，切图资源尺寸须为 8 或者 4 的倍数。并且当图片或图标元素有阴影效果时，如果阴影有好几层、或者说是高斯模糊这种代码不好实现的效果，可以直接使用切图，如果是使用阴影做出来的简单投影效果，只需将参数告知前端开发即可。
规范的切图命名会让开发更容易找到其所需要的文件，让设计师与开发之间的交付流程更顺畅。可以说规范的切图命名是一个设计师的基本修养。一般来说切图命名可以遵循以下规则：
作为 UI 设计师需要掌握的基础知识之一，切图命名的规范的关键在于团队必须有一个统一的规则，以便提升协作效率。
但因为不同的团队情况不一，所以切图命名方式可能不尽相同，这里只提供一种方法与思路仅供参考，建议大家在切图之前多跟开发团队沟通，根据实际情况去制定切图命名规范。
好啦，本期关于切图的那些事儿就唠到这里啦，想要快速掌握切图技巧还是得多多练习哦！
Powered by Froala Editor
将伟大的想法变为现实
59
作品
197
粉丝
1
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册