UI设计师避坑：设计素材与切图用JPG还是PNG？格式选择与实战指南

在UI设计与前端交付的日常协作中，你是否经常遇到这些令人抓狂的场景：开发抱怨“切出来的图标边缘有一圈白边”、“全屏背景图太大导致首屏加载白屏”、“文字截图放大后糊成一团”。很多时候，设计师会将这些画质或性能问题归结为非科学推测，但实际上，这90%是因为对 jpg和png区别 的底层逻辑理解不够，仅凭直觉在选择 UI切图格式。

做过几年电商视觉与设计交付，见过太多因为切图格式选错而导致的设计还原翻车。本文讲透 JPG 与 PNG 的核心差异，并提供具体到参数和快捷键的实战操作指南，帮你避开切图交付的坑。

---

拨开迷雾：JPG 与 PNG 的核心底层区别

很多设计师对这两者的认知仅停留在“PNG支持透明，JPG不支持”。这只是表象，真正的区别在于它们的压缩算法与色彩深度，这直接决定了它们在UI界面中的表现。

核心参数要点对照表

对比维度	JPG (JPEG)	PNG (PNG-24/PNG-8)
压缩算法	有损压缩（基于离散余弦变换，丢弃人眼不敏感的高频细节）	无损压缩（基于DEFLATE算法，像素数据100%还原）
透明度支持	❌ 不支持（透明区域默认填充白色或黑色）	✅ 支持 Alpha 通道（256级半透明）
色彩深度	24位（约1677万色）	PNG-24为24位+8位Alpha；PNG-8为8位（256色）
边缘表现	锐利边缘（如文字、线条）会出现“蚊式噪点”和伪影	边缘极其锐利，完美保留像素级细节
文件体积	较小（复杂图像下优势明显）	较大（尤其是包含大量纯色和透明通道时）

核心结论：JPG 擅长处理色彩过渡丰富的连续色调图像（如照片）；PNG 擅长处理色彩数量少、边缘锐利、需要透明背景的图形（如UI控件、图标）。

---

UI 切图实战：什么时候必须用 PNG？

适用场景

1. UI 控件与图标：按钮、开关、Tabbar 图标等需要透明背景且边缘锐利的元素。
2. 包含文字的截图：任何带有小字号文本的界面截图，用 PNG 才能保证文字不发虚。
3. 扁平化插画与几何图形：色块分明、色彩过渡不复杂的矢量感插图。

【具体可操作步骤】Figma/Sketch 导出 PNG 规范

1. 选中目标图层：确保切图容器（Frame/Group）尺寸紧贴内容，不要留出多余的透明像素，这会无谓增加文件体积。
2. 设置导出倍率：
   • 移动端（iOS/Android）：通常需要导出 @2x 和 @3x。
   • Web 端：通常导出 @1x 和 @2x（用于 Retina 屏幕）。
3. 快捷键呼出导出面板：
   • Figma：Shift + Cmd + E (Mac) / Ctrl + Shift + E (Win)
   • Sketch：Cmd + Shift + E (Mac)
4. 格式选择：在下拉菜单中选择 PNG。如果导出的是纯单色图标（如底部导航栏Icon），可尝试选择 PDF 或 SVG（后文会提）。

真实限制与常见失败原因

• 渐变断层（Banding）：如果你在 PNG-8（256色）格式下导出带有细腻渐变的图形，会出现明显的色阶断层。避坑方法：在 Figma/Sketch 中默认导出 PNG-24，或者在 Photoshop 中存储为 Web 格式时，务必选择“PNG-24”并勾选“透明度”。
• 体积失控：一张 1080x1920 的 PNG 全屏背景图可能高达 2-3MB，直接拖垮 App 启动速度。避坑方法：全屏背景图绝对不要用 PNG，请往下看 JPG 的用法。

---

UI 切图实战：什么时候该用 JPG？

适用场景

1. 摄影照片与实景图：电商商品图、用户头像、文章封面图。
2. 全屏背景图：App 启动页（Splash Screen）的复杂背景、网页 Hero Section 的大图。
3. 不需要透明度的复杂纹理：如拟物化设计中的皮革、木纹材质。

【具体可操作步骤】JPG 导出与压缩参数控制

1. 质量滑块设置：在 Photoshop 的“存储为 Web 所用格式”或第三方压缩工具中，JPG 质量设置在 75% - 85% 是黄金区间。在这个区间内，文件体积会骤降 50% 以上，但肉眼几乎看不出画质损失。
2. 去除元数据：导出时务必勾选“清除元数据（EXIF）”，这能额外节省几 KB 到几十 KB 的体积。
3. 配合压缩工具：设计软件自带的 JPG 压缩算法通常不是最优的。建议导出后，使用 TinyJPG 或 Jpegmini 进行二次压缩，通常能在不改变视觉质量的前提下再减小 30% 的体积。

真实限制与常见失败原因

• 文字边缘伪影：JPG 的有损压缩会在高对比度的锐利边缘（如黑底白字）周围产生模糊的“蚊式噪点”。避坑方法：只要切图中包含清晰的文字或细线条，坚决不用 JPG。
• 世代损失（Generation Loss）：JPG 每次打开并重新保存，都会重新进行一次有损压缩，导致画质呈指数级劣化。避坑方法：永远保留 PSD/Figma 源文件，需要修改时从源文件重新导出，绝对不要在 JPG 文件上反复“打开-修改-另存为”。

---

进阶避坑：超越 JPG 与 PNG 的现代格式选择

除了 JPG 和 PNG，现代前端交付里还有两种格式值得设计师掌握，很多场景下比传统二选一更省体积、更灵活：

1. SVG（可缩放矢量图形）：
   • 适用：所有单色或色彩简单的线性/面性 Icon、Logo。
   • 优势：无限放大不失真，体积极小（通常只有几KB），且前端可以通过 CSS 直接修改颜色和添加动效。
2. WebP：
   • 适用：替代大尺寸的 JPG 照片和复杂的 PNG 插画。
   • 优势：在同等画质下，WebP 的体积比 JPG 小 25%-34%，比 PNG 小 26%。目前主流浏览器和 Android/iOS 客户端均已原生支持。

---

常见切图交付失败原因排查清单

在交付前，请对照以下清单进行自查：

• 白边/黑边问题：导出的半透明 PNG 图标在深色/浅色背景下是否有脏边？（详见下方 FAQ1）
• 倍率命名规范：是否严格按照开发要求命名？（如 icon_home@2x.png，而不是 icon_home 2.png）
• 多余透明像素：切图边界是否紧贴图形？（多留 10px 透明边缘，在 iOS 开发中会导致点击热区偏移或布局计算错误）
• 色彩空间：是否统一使用了 sRGB 色彩空间？（如果使用 Display P3 导出，在普通显示器上会出现色差发灰）

---

FAQ：UI 切图高频问题解答

Q1：为什么我导出的 PNG 图标，在开发实现的深色背景上边缘有一圈白边/灰边？

原因：这是经典的“预乘 Alpha（Premultiplied Alpha）”问题。设计软件在渲染半透明边缘时，默认混合了白色背景。 解决：在 Figma 中，选中图层，在右侧面板的导出设置旁，确保没有勾选异常的混合模式；在 Photoshop 中导出时，取消勾选“杂边（Matte）”或将其设置为与目标背景一致的颜色。更彻底的解法是让前端使用 SVG 格式，或在代码层面处理预乘 Alpha。

Q2：开发嫌弃切图太大影响加载，怎么在保证画质的前提下压缩？

解决：

1. 格式降级：检查是否误用了 PNG 存储照片，改为 JPG 或 WebP。
2. 尺寸裁剪：如果图片在 UI 中最大只显示 300x300，不要导出 1000x1000 的 @3x 图，按实际物理像素的 2-3 倍导出即可。
3. 工具压缩：使用 TinyPNG / TinyJPG 或 ImageOptim 进行无损/视觉无损压缩。

Q3：视网膜屏幕（Retina）下，JPG 和 PNG 的倍率应该怎么选？

解决：

• PNG（UI控件/图标）：必须提供 @2x 和 @3x，否则在 iPhone 等高分屏上边缘会发虚。
• JPG（照片/背景图）：通常提供 @2x 即可。因为 JPG 本身文件较大，提供 @3x 会导致体积翻倍，而人眼在照片上很难分辨 2x 和 3x 的差异，性价比极低。

---

理解 jpg和png区别 并不是为了死记硬背理论，而是为了在每一次点击“Export”时，都能做出对画质和性能最平衡的决策。优秀的 UI 设计师，不仅要对像素负责，更要对最终产品的加载体验负责。

行动建议：今天下班前，打开你最近的一个项目，抽查 5 张已导出的切图，检查它们的格式选择、倍率命名和文件体积，用本文的规范进行一次复盘与优化吧！