UI设计师如何切图？尺寸、格式与命名

UI 设计切图先确定哪些元素要作为资源交付，再约定逻辑尺寸、平台倍率和文件格式，最后检查透明背景、裁切边界与命名。普通文字、纯色背景和可由代码实现的控件不必全部切成图片。下面通过 Pixso 的导出设置与五类资源示例，把这套交付流程拆开说明。

把切图设置留在在线 UI 设计稿中，设计师和研发可以对照同一组图层、标注与资源。先做一个代表性图标的试导出，再批量处理其他资源，比到交付时才发现倍率或透明背景有误更省事。

1. Pixso切图功能

切图标注是设计师向开发交付设计稿的基本环节，常见对象包括图标、插画、照片和特殊图形。不是所有视觉元素都要转成图片：普通文字需要保留可读、可缩放的文字内容，简单圆角与纯色背景通常可以由代码绘制。先和研发约定资源边界，再使用 Pixso 的导出设置准备文件。

1.1 一图导出多尺寸

选择要导出的对象和图层，可以是单个图层或对象、一组对象或画布上的所有内容、画布中的一部分，然后在面板右下角的导出设置控制Pixso导出资源的方式，包括比例和格式设置。

你可以在右侧面板的“导出”部分查看、添加和删除导出设置。如果已经添加了导出设置，则可以使用键盘快捷键导出您的选择，MacOS:「Shift Command E」 ；Windows：「Shift Ctrl E」。

• iOS：先按界面中的逻辑尺寸设计，再为位图准备所需的 @2x、@3x 资源。倍率描述每个逻辑点对应多少像素，不由手机屏幕的宽度直接决定。

• Android：布局通常使用 dp 等与密度无关的单位，位图再按目标密度输出。mdpi 为基准，xhdpi 是 2 倍，xxhdpi 是 3 倍；不同屏幕宽度的布局适配要另外处理，不能仅靠切图倍率完成。

以逻辑尺寸为 24 × 24 的搜索图标为例，iOS 的 24 pt 在 @2x 下需要 48 × 48 px，在 @3x 下需要 72 × 72 px；Android 的 24 dp 在 xhdpi、xxhdpi 下对应的像素尺寸也分别是 48 和 72。原图层若已经按 2 倍尺寸制作，再导出 2 倍会重复放大，先确认设计文件采用的基准。

Apple 的图像倍率说明与Android 的像素密度指南都将逻辑尺寸与像素资源区分开；设计交付也要保留这两个值，而不只写“高清图”。

1.2 根据用途选择格式

设计切图导出的格式有以下四种：

• 导出为 PNG：无损位图格式，可保留透明背景；与其他位图一样具有确定的像素宽高。无损压缩不会补回低分辨率原图缺失的细节。

• 导出为 JPG：有损压缩的位图格式，常用于照片等连续色调内容，不支持透明背景。它和 PNG 都有固定像素尺寸；区别不在于是否存在宽高。

• 导出为 SVG：用路径等信息描述矢量图形，适合简单图标和图形。交付前要检查字体、遮罩、滤镜和嵌入图片；导出了 SVG，不代表文件中的每个对象都变成了可任意放大的矢量。

• 导出为 PDF：适合传递页面文档或与研发约定的矢量资源。仍需检查字体、效果和页面尺寸，不能保证在所有查看器或打印设置中都完全一致。

1.3 高效协作不用等

作为集原型、设计、协作、交付与资源管理于一体的平台，Pixso 支持为图层设置导出，也可以使用切片工具圈定区域。研发成员具备相应文件权限和席位后，可从设计稿查看标注与资源。属性或代码信息用于参考和交接，仍需结合项目的布局、组件和交互实现。

切片范围要包含实际需要的图形，也要检查阴影和外描边是否被裁掉。若图标四周留有透明边距，标注的是完整资源尺寸还是可见图形尺寸，要向研发说清楚；否则同样是 24 点图标，放入界面后可能看起来偏小或没有对齐。

设计稿中的图层修改后，研发应重新打开对应内容查看最新属性。已经下载到本地或放进代码仓库的切图不会随设计稿自动替换，仍需重新导出并更新资源。交付时附上本次变更的资源名，可以避免只更新了设计稿却漏掉线上图片。

2. 切图输出类型

如上所说，开发人员可以通过标注面板查看和复制图层属性值，如文本图层、字体粗细和行高、颜色值、对象阴影和描边值。那么，到底什么时候需要设计切图呢？下面按五类常见资源说明何时需要切图：

2.1 应用型图标设计切图

应用图标会出现在桌面、应用市场和设置列表等位置，需要按对应平台的图标规范准备资源。不要直接截取手机桌面中已经带圆角的显示结果当作源文件；平台会处理各自的遮罩和呈现方式。下图是 Telegram APP 图标 的界面效果与方形源图对照，可以看到“显示结果”和“交付原图”的差别。

2.2 功能型图标设计切图

功能图标应先确定界面中的逻辑尺寸，再输出相应倍率的位图。同一逻辑尺寸下，@3x 的像素宽高是 @2x 的 1.5 倍，这不代表按钮在界面中要变大 1.5 倍。下图是 银行业&金融类图标 的 @2x、@3x 资源对照；导入工程后，两者应占用一致的逻辑尺寸。

2.3 图片类设计切图

如引导页、提示页和 banner 中的插画或照片，有时要导出完整图片，有时只需交付局部元素。全屏背景要先约定裁切方式和主体安全区域，不能只适配一台手机的分辨率。如果页面由图片与纯色背景组成，只需导出图片，背景色由代码实现；如果背景是单个元素重复平铺，可只交付这一单元，并说明平铺方向。

2.4 可拉伸元素切图

可拉伸资源需要把需要保留的边角与允许拉伸的中间区域区分开。iOS 可以通过可调整图像的边距约定实现，Android 常见 Nine-patch（点九）资源；平铺与拉伸并不是同一种显示方式。交付前和研发一起确认拉伸区域，避免按钮变宽后圆角、描边或装饰图案也被拉变形。

2.5 动效元素设计切图

加载动画等动效可以用按序播放的图片帧交付，也可以由代码或其他动画资源实现。若采用序列帧，应约定帧尺寸、帧序、播放时长、循环方式和透明背景，确保连续播放时主体不会抖动或位置漂移。

例如，12 帧的加载动画如果每帧裁掉不同的透明边缘，虽然单张看起来正常，连续播放时中心却会来回移动。先让所有帧共用同一画布和中心位置，再输出带连续序号的文件；不要用每张图“裁到最紧”的方式代替统一边界。

3. 切图命名规范

设计切图命名是 UI 设计师交付资源的基本技能。团队遵守统一规则，后续查找和替换会更清楚。更新资源时可以保留稳定文件名，但仍需确认文件是否覆盖、缓存是否更新以及引用路径是否一致，不能把同名文件等同于已经完成上线替换。

3.1 通用类型设计切图标注命名规则

• 命名格式：组件_类别_功能_状态@2x.png

• 示例：tabbar_icon_home_default@2x.png

中文对应的是：标签栏_图标_主页_默认@2x.png

3.2 模块特有设计切图标注命名规则

• 命名格式：模块_类别_功能_状态@2x.png

• 示例：mail_icon_search_pressed@2x.png

对应的中文为：邮件_图标_搜索_按下@2x.png。这里的 pressed 是按下状态，默认状态应另用 default；两者不要共用同一个导出名。

文件名较长时，可以为团队常用词建立缩写表，但缩写应能区分模块、功能与状态，不要只追求最短。下图提供了常用词示例，正式交付时选用团队已经约定的一套，避免同一批资源混用 icon、ic 和 img。

这组示例采用 iOS 位图命名。Android 项目可能通过资源目录区分密度，Web 项目也可能直接使用矢量资源；不要把 @2x 后缀强加到所有平台。提交前让研发用一组资源完成接入，再按相同规则批量输出。

4. 切图技巧总结

Pixso 可以把切图设置与设计稿放在同一协作流程中。交付时，产品、设计、运营与研发分别确认内容、资源和实现要求，不必把每一处属性都重新抄写一遍。

• 产品经理：确认页面内容、交互状态与本次交付范围，避免研发拿到图片后还要猜按钮的行为。

• 设计师：确定资源边界、倍率和格式，检查透明背景、阴影、命名及状态是否齐全。

• 运营：核对活动图片的文案、有效期和裁切区域，提供需要保留的主体与文字安全范围。

• 开发：确认平台资源格式、接入方式和缓存策略，对照标注实现布局，再检查实际页面中的清晰度与对齐。

交付前先把一组默认、按下状态的图标放进真实页面，观察清晰度、透明边缘和视觉尺寸。代表性资源接入正确后，再导出其他资源；后续修改只需明确指出变更文件名和状态，减少重复确认。