上一篇认识了切图的主要方式和格式，文章链接：

这一篇，就针对切图中常见的几个问题来做出解释，来看看具体的切图实例。

首先第一个要讨论的肯定是关于图标的切图了，作为UI切图占比最高的类型，图标是最不应该出问题的一部分。

在我们图标分享的课程中提过，

文章链接：

课程链接：

图标本身的视图区域和图形尺寸是不同的，前者必然大于后者。对于布局和开发来说，只需要关注它的视图尺寸。

所以任何图标都需要添加一个透明的视图背景，用于在选中时可以清晰的看到它的边缘并用于对齐和排版。

当我们进行图标切图时，就一定要保证图标本身是带有完整视图区域的。但往往因为设计过程中包含大量的更改，或操作的不规范，导致图标的编组丢失，然后程序员就糊里糊涂的按图形尺寸导出切图，导致同级图标中很多尺寸不一致，实现的界面布局就东倒西歪。

想要避免这些问题，我的建议就是把图标编组后全部组件化，确保设计布局上的严谨性。同时，将这些组件的父级组件全部置入到同一个画板中（设计规范的画板）。

这么做的好处，一方面只要在画布中全选它们，再进行导出就能一次性完成图标的切图。另一方面就是方便我们做检查，包括图标本身格式的准确性，以及图标不同状态的完整性。

即使一定要通过蓝湖、Codesign、Zeplin 等工具让开发自己切图，我也建议上传这个画板让它们直接在这个画板中导出。

投影也是一个非常常见的问题，尤其在移动端设计中，我们经常会设计一些带有投影的视觉元素，不管是图标还是按钮。但带有投影的元素，在设计稿中的尺寸和导出的尺寸是不一致的。

因为在设计软件中，投影本身并没有被记入图层的长和宽之中，而导出时则会将阴影所扩散的所有区域都一起覆盖，最终这个切图文件的实际尺寸就大了非常多，自然在开发布局中间距的参数就无法和设计稿中的对齐，造成一连串的问题。

但也不代表重新计算间距就能解决切图带投影的问题，如果多个带有投影的切图元素并排，那么图层肯定有上下排序，就会出现上层的切图投影覆盖在下层的切图图形上。

要避免这个问题，就必须使用代码来编写投影。在我们导出带有投影的切图前，就需要先关闭投影导出，确保导出图形和软件中选中的尺寸一致。

但这还没结束，代码中实现的投影效果和设计稿中的投影是不一致的，尤其在移动端，即使开发中使用相同的设计参数实现效果也不一样。这是因为系统的投影扩散曲线和设计软件是不一致的，这在我之前的投影分享中有提过。

确保开发实现的效果最终和设计稿一致（或极为接近）也是切图的一部分，所以你需要和开发沟通，并根据他们做出来的效果给出参数调整反馈。

全屏切图指的就是需要全屏覆盖展示的图片，最常见的就是启动闪屏中的广告图。

全屏切图的主要矛盾是要适配多机型，不同机型的屏幕比例不同，所以如何确保不同机型的显示正常？

这应该是个非常基础的东西，但是今年到现在已经好几个人问过我这个问题了，最离谱的还有同学的开发要求他导出点9图来实现多机型适配……

在 iOS 之前的官方规范中有过说明（更新后没掉了），直译过来很奇怪，叫信箱模式 (Letterboxing) 和邮筒(Pillarboxing) 模式。信箱模式就是缩放到覆盖全屏，邮筒模式则是缩放到贴紧屏幕边缘（类似视频全屏）。

全屏的图像展示就是信箱模式，将原图像进行缩放，放大到完全覆盖屏幕窗口的边缘为止。如果有超出的部分，则直接裁切掉。当我们使用全屏切图的时候也要遵循一样的逻辑，就是提前设计并导出一张大图，让它在不同的屏幕比例中隐藏掉边缘的部分。

这个尺寸应该以什么为标准可以和程序员核对，常用的有 720p 和 1080p，不需要使用过大的尺寸。同时，在设计过程中主体物尽量确保在画面的 2/3 区域内，确保在不同的比例下边缘被隐藏也能正确显示出来。

不管你用哪个尺寸，都得独立常见一个画板出来，而不是使用你项目的普通画板尺寸，同时导出的文件只需要使用 1x 的 JPG 即可，避免图像文件的体积过大，占用不必要的网络资源或硬盘空间。

毛玻璃效果是个很常见的UI视觉效果，在iOS 系统中就有大量使用透明毛玻璃的场景和组件。

很多设计师在设计过程中也会添加毛玻璃，在软件中实现使用的是 “背景模糊” 效果。但发现导出的时候这个图层只有透明度但不能实现模糊。因为图层脱离软件的环境，那么自然这个效果就消失了。直接把这个图形丢进开发环境，实现的效果也只有普通的透明度。

解决这个问题的方式有两种，一种是放弃使用特殊的背景模糊。另一种，就是在导出切图的时候，直接关闭带有模糊的这个图层，让开发在实现它的时候额外做一层毛玻璃层至于这个切图的下方，然后使用相同的模糊参数……

你看，这是一个非常蛋疼的实现方法，这里还没有讨论不同系统对毛玻璃效果实现的差异。如果没有绝对的必要，就尽量放弃在特殊切图中应用毛玻璃的效果。

响应式广告大图，就是网页中适配响应式效果的广告图，常见于网站的顶部广告图或者全屏背景图，比如下面的案例。

相信看到这个你们已经会想到前面提的信箱模式了，只要做张图进行缩放不就行了？

对也不对，信箱模式的缩放是必要条件，但网页设计中切图的最大阻力就是对少数极限情况的匹配。比如这张图像我们一般会导出 1080p 的 JPG 切图，它的文件体积已经不小了。

而现在很多显示器的宽度是不止 1920px的，还有2560、3440、5120 等，要适配这些显示器，光靠一张1080p 切图强行放大是非常勉强的，而做4K以上的切图那整个网站的图片读取可能就要等非常久的时间。

所以，为了解决这样的问题，在一开始的设计方案上就会做出调整，让广告图本身的边缘使用纯色，并给出一个相同颜色的背景，那么在浏览器宽度极大的时候，图片本身达到最大值就不会继续放大，而超过的区域会有衔接上的背景色，就能符合正常显示的需要。

而没有考虑到这个问题的网站，在高分辨率模式下就会有空白区域，看起来非常不专业。

如果是轮播广告图，要实现这样的方案就等于每张图的背景色是不同的，而这个背景色显然用16进制代码就能实现而不用我们切个纯色背景图出来。所以这就又增加一个问题，需要后台添加一个功能，每次上传一张广告图还需要手动设置背景色（也有自动识别的，但是问题更多）。

最后一个案例，就是一些复杂的边框图形了。最常见的就是大屏项目中，即使使用3D为主的主视觉区域，也会包含大量的普通二维图形。

这些模块想必有相关经验的同学都没少见，站酷、画板、即时社区等都有大量的素材和案例。

这种图形作为模块背景，是不可能用代码写出来的，所以肯定得切图，但光把图1：1 切出来有用吗？

大概率没用，因为很多大屏项目是有响应式需求的，当页面发生尺寸变化的时候，模块也会发生尺寸的调整，所以如何保证这个背景切图能有效的进行缩放？

根据图形的类型和场景，实现的方法有很多种，这里就举例其中一种。如果对安卓切图足够有经验的同学应该知道 .9 图，即通过横竖的某一像素点进行延长，确保图形的任意拉伸，在网页中这个逻辑也是可用的（实现得比安卓更早）。

设计师要在一开始时设计一个样式主要集中在左右两侧，中间可以横向拉长的模式，然后在切图的过程中切出左右两个部分和中间的一个像素（为了让大家看清我拉长了），并合并成雪碧图（也叫Sprite精灵图）。

通过这种做法，前端的实现就是在这个视图区域左右引入相关的图形，并在中间使用那条竖线进行重复 （repeat-x 水平重复）。如果高度上也要修改，那就需要切出四个角，和一条额外的横线，加入高度重复的效果……

所以如果实现难度超过一定的范畴，成熟的设计师就肯定要规避这种复杂的样式，转用更容易被代码实现的样式，减少高光、异形、纹理的使用。

结尾

最后再重复一遍上一篇说的，切图是把切图文件有效交付给程序员进行开发的过程，我们是要保证设计稿被有效落地的，同时还要关注实现它们的效率，而不是设计稿丢给程序员完不管不问。

这些和切图有关的认知和知识储备也是一个设计师最基础的素养之一，很多同学一直在纠结如何成为高级设计，但依旧对这些核心技能不屑一顾，那是永远成长不起来的，所以建议大家好好在项目中积累对应经验。

特殊的切图方式远远不止我们提到的这些，剩下的就需要大家自己发挥了。

新一期B端产品设计课程还在招生中，扫描下方二维码加我报名课程～

课程介绍：

想要变强的同学拉到文章底部加我二维码，开启变强之路！