该如何做切图标注，才能让开发把你夸上天？

一个互联网产品从构思到落地，大致分为以下环节：发现商机 – 市场调研 – 头脑风暴 – 产品策划/功能设计 – 原型绘制 – 交互设计 – 项目立项 – 流向图绘制 – UI设计 – 切图标注 – 技术开发 – 产品测试 – 项目上线。

切图是指在设计稿里整理出技术开发所需要的素材或图片。合格的、严谨的切图可以大大减少技术人员开发的返工率，减少技术人员的开发工期，提升开发流畅度，从而减少项目人力成本，最终开发出有利于交互，拥有良好视觉感的产品。

切图标注作为连接 UI 设计到技术开发两者的工作模块，是不可或缺的。设计师需要熟悉工具、理解设计尺寸与切图倍数的关系，才能在切图时进行判断：目前的设计稿尺寸与切图单位是否正确匹配。

切图标注

如今，设计切图插件能够将设计稿里所选中的图层、图层组按不同开发规范宽度、倍数，进行合并裁剪切片。与传统切图方法「调整图像尺寸 – 选中切图图层/图层组 – 调整画布尺寸 – 导出web所用格式」相比，这一系列动作被进行了一键化处理，只需要在插件中选择好开发语言，保持文件夹位置便可一键标记或导出，极大地缩减了繁琐的操作流程。

蓝湖插件

蓝湖插件在设计稿做切片标记，上传至平台的画板便带有切图下载。

Cutterman插件

3种开发语言（iOS，Android，Web）：根据不同的项目选择不同的开发语言，下方小箭头可进行素材输出「倍数」选择。

倍数：插件在导出选中图层时以「@2x」和「XHDPI」为标准对设计稿进行等比放大缩小。如 750px 宽度的设计稿导出「@3x」和「@1x」时，导出的切图会分别放大 1.5 倍和缩小至 0.5 倍，然后进行图层导出。

导出选中图层：插件根据已选语言、倍数，对已选中的所有图层、图层组进行合并裁剪然后导出。裁剪大小为所有图层合并后总宽度高度。

固尺寸：插件导图已图、图组并，画或者图至固尺寸，图导。已图固尺寸，则被图，素被压缩。已图固尺寸，则被画，图素变，素尺寸变固尺寸。

设计稿尺寸与切图倍数

UI 需确稿尺寸切图，切图素供使。否则落图标变形，素低况。

端尺寸它应切图倍数

iOS：采 750×1334 ，@2x 切图 750×1334 辨率，并流辨率（@2x/@3x）。

稿750x1334px——切图倍数iOS@2x，iOS@3x

Android：采 720×1280 ，XHDPI 切图 720×1280 辨率，并流辨率（XHDPI/XXHDPI）

稿720x1280px——切图倍数XHDPI，XXHDPI

程序（它i6750px划）

稿750x1334px——切图倍数png24

端页、众链（程序统使i6，转）

稿750x1334px——切图倍数

设计稿尺寸与切图倍数对应关系

1. APP-iOS

2. APP-Android

3. 微信小程序

4. 手机端网页、公众号链接

5. 注项

必须确画尺寸切图， 750px 宽稿切 XHDPI，XXHDPI图，必须 720px  XHDPI，XXHDPI图。

关于 750px 设计稿上切@2x，@3x图时，只要所选图层是智能对象或者是矢量图层，就不用担心分辨率问题。

切图格式与大小

切图格式常用 PNG，这是因为 PNG 体积小（K值），最大程度减少安装包大小；无损压缩，保持素材清晰度；支持透明效果，只保留图层内容本身。也是由于 PNG 图片的特点，给切图带来了 3 个需要注意的知识点：

双数像素切图：750x1334px 与 720x1280px 的切图资源大小都必须为双数像素，才能保证开发时素材被高清显示。

实际切图与展示区域（桌面图标）：桌面图标/应用icon 会被运用在不同的位置，比如手机桌面，产品平台，手机系统列表……因此在输出桌面图标切图素材时，不需要对桌面图标切图进行圆角处理。

点击区域大小：画布大小≠素材大小。一般情况下素材分两种，装饰素材与可点击素材，装饰素材直接按图层贴边切图，点击素材需要考虑点击区域的位置与大小，适当调整素材的画布，再进行素材切图。

内存大小：为了方便用户使用产品时快速加载页面，需要对大素材或者图片进行压缩，常用的工具有ppduck、熊猫压图，都是业内较优秀的图片压缩工具，压缩出来的图片既保证了清晰度又减小的 K值。

切图分类

CSS盒子模型 ── 多状态切图

盒模页CSS思模，模（content）、距（padding）、框（border）、距（margin）4 属。控件息需盒状展示，程搭页先页画（盒），它矩形，切图矩形相匹，控件模，复粘贴。

同一类型的控件与它们所有状态的切图都需要统一尺寸。

动效切图gif

动效实现原理是由若干张图片连续播放，从而形成视觉影像，这若干张图片就是需要提供给工程师实现动效的序列切图。

切图命名与分组

1. 命名公式

位置_类别_描述_状态.png，如：导航_按钮_搜索_默认.png。

Example：nav_button_search_default.png

2. 切图命名禁忌

• 不可出现中文
• 不可出现英文字母大写
• 不可出现空格
• 不可用「-」符号，例如错误的 button-search，正确为 button_search。

3. 切图命名英文缩写

• 短词掉「音」形缩写；
• 较长的单词可取单词的头部几个字母形成缩写，如 normal 可写成 nor；
• 还有一些约定俗成的英文单词缩写，如 background 可写成 bg。

4. 类命

• 按钮：btn_xxx.png
• 图标：icon_xxx.png
• 图：pic_xxx.png或img_xxx.png
• 照片：pho_xxx.png

5. 常用状态

• 正常：normal
• 按下：pressed
• 选中：selected
• 禁：disabled
• 已访问：visited
• 悬停：hover

6. 切图组

项目-语言-

xxxAPP-iOS-2020.20.20

iOS：@2/@3切图一起放

xxxAPP-Android-2020.20.20

Android：每个尺寸分开单独放

项目切图模拟

案例一

切哪里？如下图所示：（粉红色遮罩为切图标注）

案例二

切哪？图示：（遮罩切图标注）

案例三

切哪里？如下图所示：（粉红色遮罩为切图标注）

欢迎关注作者的微信公众号：「大tip」