在UI设计流程中，切图是连接设计稿与开发实现的关键环节，其质量直接影响最终产品的视觉效果和交互体验，切图并非简单的“截图”，而是需要遵循规范、兼顾效率与准确性的系统性工作,以下是关于UI如何切图的详细步骤与注意事项。
切图前的准备工作：明确需求与规范
切图前需与产品经理、开发人员充分沟通，明确以下几点：
- 设计稿确认：确保设计稿是最终版本，包含所有视觉元素（图标、按钮、背景图等）及标注（尺寸、间距、颜色值等），避免后期反复修改导致切图作废。
- 开发需求：了解开发对图片格式、尺寸、命名的要求，iOS端常用@2x、@3x倍图，Android端可能需要dp单位的适配；部分区域可能需要九宫格图片（.9.png）实现拉伸适配。
- 切图工具选择：常用工具包括Photoshop（PS）、Sketch、Figma、Adobe XD等，PS适合处理复杂图片和手动切图，Sketch/Figma/XD则支持自动切图和导出，效率更高，尤其适合协作场景。
切图的核心步骤：从设计稿到图片资源
确定切图范围与分类
根据设计稿中的元素类型，切图通常分为三类：
- 图标（Icon）：包括功能图标（如“返回”“设置”）、装饰图标等，需保证线条清晰、边缘锐利，支持多尺寸适配。
- 界面元素（UI Element）：如按钮、输入框、标签页等，需切出完整状态（默认、点击、禁用等）及必要的分割部分。
- 背景图（Background）：包括全屏背景、卡片背景等，需考虑重复平铺（如纯色、纹理）或特定拉伸（如渐变、大图）。
按倍率切图适配不同屏幕
为适配高分辨率屏幕，需根据设备像素比（DPR）切图。
| 设备类型 | DPR | 常用倍率 | 示例尺寸（以设计稿100x100px为例） |
|----------|------|----------|----------------------------------|
| 标准屏 | 1 | 1x | 100x100px |
| 高分屏 | 2 | @2x | 200x200px |
| 超高分屏 | 3 | @3x | 300x300px |
设计稿中若已标注“@2x”“@3x”，需按倍率放大后切图；未标注则需与开发确认默认倍率。
使用工具精准切图
- 手动切图（PS为例）：
- 使用“矩形选框工具”选中目标区域，按“Ctrl+C”复制，新建画布（尺寸与选区一致，背景透明），粘贴后保存。
- 注意：切图时需保留图层原始分辨率，避免缩放导致模糊；图标边缘需对齐像素网格（PS中可开启“对齐”功能）。
- 自动切图（Sketch/Figma为例）：
- 选中图层，点击“导出”按钮，设置格式（PNG/JPG/SVG）、尺寸（选择“2x”“3x”倍率）、命名规则（如“icon_back@2x.png”），批量导出。
- 优势：支持切片命名、导出预设，减少重复劳动；Figma还可生成开发可直接使用的代码片段（如CSS代码）。
特殊切图处理技巧
- 九宫格图片（.9.png）：用于需要拉伸的背景（如按钮长按状态），在PS中使用“九宫格切片工具”标记拉伸区域（上下左右各留1px黑边），导出为“.9.png”格式。
- 透明背景图片：图标、部分背景需保留透明度，导出时选择PNG-24格式（支持透明通道），避免JPG格式（不支持透明）。
- 矢量图形优先：图标、logo等尽量使用矢量格式（如SVG），无限缩放不失真，减少多倍率切图工作量；若必须位图，需保证原始尺寸足够大（如@3x图标不小于192px）。
切图后的优化与管理
图片压缩与格式选择
- 格式选择：
- PNG：支持透明、色彩丰富，适合图标、界面元素；
- JPG：不支持透明，适合照片、复杂背景图，可压缩减小体积；
- WebP：新兴格式，压缩率高于PNG/JPG，需确认开发是否支持。
- 压缩工具：使用TinyPNG、ImageOptim等工具压缩图片，平衡画质与文件大小（一般压缩至原体积的50%-70%，无明显画质损失即可）。
规范命名与文件夹管理
- 命名规则：采用“模块_功能@倍率.格式”格式，如“btn_login_pressed@2x.png”“tab_home_selected@3x.png”，避免使用中文、空格或特殊字符。
- 文件夹结构：按模块（如“icon”“btn”“bg”）或页面（如“首页”“个人中心”）分类存放，便于开发查找。
/assets /icon /common /function /btn /primary /secondary /bg
文档交付与沟通
- 切图完成后，需提供切图清单（包含文件名、尺寸、路径、用途说明），使用Markdown或表格形式同步给开发；
- 对于特殊处理（如九宫格、透明背景），需额外标注说明，避免开发误用。
相关问答FAQs
Q1：为什么切图时图标边缘会模糊？如何解决？
A：模糊原因通常是未对齐像素网格或缩放导致，解决方法：在PS中开启“视图>对齐>对齐到像素”，切图时确保选区边缘与像素网格重合；矢量图标直接导出位图时，需设置足够大的原始尺寸（如@3x图标按设计稿3倍大小导出）。
Q2：自动切图工具（如Figma）导出的图片尺寸与设计稿不符，怎么办？
A：首先检查Figma的“导出设置”中是否勾选了“缩放放图像”或调整了尺寸倍率；其次确认设计稿本身是否使用非标准尺寸（如非整数像素），需将设计稿元素对齐到网格（Figma中可开启“像素网格”）；最后与开发沟通确认是否需要手动调整尺寸参数。
