功能更新|涨姿势了!原来还可以这样切图!

MasterGo

官方 · 2022年06月13日

界面设计时,为了更好地与开发协作,UI 设计师们通常需要根据网页端、移动端不同的界面开发需求,单独制作各个参数的切图,并标注好尺寸和间距,再交付给开发完成 html + css 布局的静态页面。

「切图」作为 UI 设计师重要的输出物之一,不仅是一个体现设计师专业水准的重要标准,也是对设计态度最有力的表达,更是确保前端开发最大限度还原设计效果的关键。那么如何输出具有全局把控和细节专注的高质量切图呢?

本篇文章将从工具使用、输出类型、命名规范这三个方面解析「切图」的那些事儿。无论你是设计师还是工程师,如果你的工作中涉及到了切图,那么一定、一定要仔细往下看哦!

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

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

切图是一个流程性的工作,根据网页端、移动端不同的界面开发需求,设计师往往需要输出多套匹配不同设备型号的切图,命名后打包交付开发。这样一个相对较为繁琐的设计交付方式,在没有工具帮助的情况下,需要设计师花费大量精力在输出多套切图上,操作过程繁琐还容易出错,为后续开发工作增加不必要的工作量,甚至影响界面最终呈现效果。

工欲善其事,必先利其器。合理利用工具可以起到事半功倍的效果,不断为我们的设计工作提效。

面对繁琐切图流程所带来的一系列问题,相信你也和他们一样希望有一个工具能想你所想、帮你解放双手:

“可以自动导出不同设备尺寸的切图吗?”

“切图导出的分辨率可以调节吗?”

“希望能够批量导出需要的切图,这样我可以更快速、方便地交付给开发。”

如果你正在经历以上这些问题,那么请跟我一起继续往下看看 MasterGo 的切图功能是如何解决这些问题的吧!

更高效的交付方式

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

更畅通的协作体验

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

在 MasterGo 你可以像这样便捷、轻松地使用切图功能为你的设计交付提效。

  • 一键开启切图

设计界面,鼠标点击工具栏「容器」旁的下拉图标或使用快捷键 S,即可开始使用切图工具。并且还可以使用快捷键 Shift + S,快速显示和隐藏制作的切图。


1.png


  • 设置导出参数

切完图后,需要在右侧栏下方设置导出选项,MasterGo 支持 Android、iOS、Flutter 设备的尺寸、倍率、格式等不同类型的切图导出。


2.gif


btw,这里分享一个管理导出选项的小技巧,当我们想要调整或者删除某个导出设置时,可以选中该导出选项,并上下拖拽调整位置顺序,另外还可以点击“-”删除该导出选项。

  • 快速定位查看切图

MasterGo 提供了「切图列表」功能,如方图中演示的一样,你可以在切图列表中点击某个切图,在画布中快速定位并查看该切图相关的标注和应用方式。


3.gif


  • 批量导出所需切图

在切图列表中,你还可以选择一键快速导出所有切图,或者批量导出你需要的切图,在整个切图输出流程中,帮你更快速、方便地交付给开发。

4.gif


  • 关于切图使用的 Tips

切图的图层需要与图标图层创建一个编组,这样切图的背景就会是一个透明的图层,方便开发使用。


5.png


任何元素在设计页面设置了切图导出选项,标注模式下,都会有虚线提示,帮助研发快速定位切图位置


6.png


哪些需要输出为切图?

我们都知道合适、精准的切图可以确保设计效果图的高保真还原,并且降低工程师的开发工作量。

然而,切图时很多元素是不需要输出的,直接使用系统原生的设计元素修改参数即可。例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可,工程师会根据设计效果通过代码实现这种效果。

而那些代码无法实现的设计元素则需要通过切图的方式交付给开发,比如:

  • 图标切图输出

桌面应用图标和系统图标无法用代码写出来的,并且会被运用在不同的地方展示,在交付时需要把不同设备的尺寸全部输出切图。

  • 按钮切图输出

按钮也是需要切图输出的元素,并且不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图,比如点击状态、不可点击状态等等。

  • 图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。为方便开发同一类型的图片切图要保持尺寸一致,并且这些切图文件较大,需要控制切图文件的大小。

  • 动效元素切图输出

动效元素切图一般是指加载动效所需要的切图元素,如下拉加载动效就是由若干张切图连续播放形成的。这种切图要求要保证动效播放时的流畅自然,是需要设计师仔细斟酌的。

  • 可拉伸元素切图输出

可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素。这些元素通过瘦身压缩,可以极大地减小图片的大小提升用户使用速度。

这里需要注意的是,切图资源尺寸须为 8 或者 4 的倍数。

并且当图片或图标元素有阴影效果时,如果阴影有好几层、或者说是高斯模糊这种代码不好实现的效果,可以直接使用切图,如果是使用阴影做出来的简单投影效果,只需将参数告知前端开发即可。

切图命名规范是什么?

规范的切图命名会让开发更容易找到其所需要的文件,让设计师与开发之间的交付流程更顺畅。可以说规范的切图命名是一个设计师的基本修养。一般来说切图命名可以遵循以下规则:


7.png

未标题-2_画板 1.png


作为 UI 设计师需要掌握的基础知识之一,切图命名的规范的关键在于团队必须有一个统一的规则,以便提升协作效率。

但因为不同的团队情况不一,所以切图命名方式可能不尽相同,这里只提供一种方法与思路仅供参考,建议大家在切图之前多跟开发团队沟通,根据实际情况去制定切图命名规范。

好啦,本期关于切图的那些事儿就唠到这里啦,想要快速掌握切图技巧还是得多多练习哦!

AI 时代的企业级产品设计平台

免费使用