切图规范 ​

序言：工作中切图的目的是跟工程师团队协同开发项目，那么在切图的过程中，首先应该保证输出的东西能够满足工程师对设计图的高保真还原需求。 其次，切图输出应该尽可能降低工程师的开发工作量，避免因切图输出而导致不必要的工作。

然而作为一个优秀的设计师或高级开发人员是需要知道切图的基本规则。比如文字、卡片背景、线条和一些标准的集合图形是不需要切图的，而效果图片，banner，复杂图形等是需要切图的。以下将详细介绍切图的规则和方法。

图标类的切图 ​

• 保持每张图标尺寸一致。首先上下或左右卡边切图，其次保证每张图宽高为方形尺寸（特殊情况除外）。

• 尺寸尽量为双数。因为1px是手机或者电脑能够识别的最小单位，换句话说就是1像素不能在屏幕显示的时候会被分为两份，那么屏幕在缩小或放大图片的时候就会出现边缘模糊。如图所示：

• 格式说明。电脑和手机网页尽量选用svg格式。以下情况除外：1.有背景层特殊图svg渲染不出来；2.小程序端底部导航强制要求为png格式。

不同状态的切图 ​

在切图过程中，不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图。比如鼠标划过状态，或者点击状态，以及不可点击状态。

注：图例按钮仅为说明情况，一般情况情况下按钮不用切图。

圆角切图 ​

此类切图只需要提供直角的图标或图片即可，前端代码或者手机系统会自动生成圆角效果。比如：

• 内容部分（请看图片说明）

• 系统（软件）图标导出为直角

切图范围说明 ​

主要是指设计图内需要切图部分的方法和规则说明。

• 全屏切图类（需要去除顶部状态栏，或者需要交互的按钮和展示的文字）

• 局部切图类

动画元素切图 ​

动画元素切图一般是指在网页中展示动效所需要的切图元素，具体分以下情况：

• 简单图标类（GIF图），一般情况由设计图导出gif图生成。如下图：

• 复杂动画类（序列切图），此类图片尺寸比较大，代码难以实现，而且gif效果比较差，则由若干张切图连续播放形成的，这些图片按照序号排序播放我们页把他们叫做序列切图。这种切图要求要保证动效播放时的流畅自然，是需要设计师一点点制作并导出不同的图片而成。如下：

• 其他情况如果不确定怎么做，可由设计师和开发人员进行商讨解决方案，如：做为视频格式导出，或者开发人员代码实现等。

优化导出的图片 ​

为了提升图片加载速度，尽量降低图片文件大小，规则如下：

• 普通单色图标类，或者色彩单调结构简单，尽量选用选用svg格式。

• 不透明的图片不推荐使用png的格式，可以选用jpg格式进行储存，因为jpg文件体积比较小。

• 使用ps导出图片的时候，选择web所用格式（快捷键为ctrl+shfit+alt+s）进行储存。

格式配置选择：gif选用256色、png为24色、jpg品质一般在60-80之间。

• 集成雪碧图。如果项目对加载速度有要求，则需要把用到的多张图片合并到一张图片中，不仅可以减小图片的总大小，而且可以减少连接服务器的消耗。

命名规范 ​

所有命名只能为小写英文字母，较短的单词可通过去掉“元音”形成缩写，较长的单词可取单词的头几个字母形成缩写 ，此外还有一些约定成俗的英文单词缩写

• 常见界面、控件、功能、状态命名集合：

• 以iOS为范例的切片文件命名规范如下（web端和安卓不需要@2x、@3x倍数）：

案例介绍 ​

整理一些常见的案例，便于大家区分是否需要切图。

• 不需要切图的案例：

• 需要切图的案例（需要去除文字和简单色块的内容）

推荐工具 ​

• PS插件 Cutterman

Cutterman能够让你只需要点击一个按钮，就自动输出你需要的各种各样的图片，输出支持IOS 平台的单倍图、双倍图，还可以自己缩放、压缩大小，支持多个图层合并、单独输出，以及固定尺寸输出。