面向 UI/UX 设计师的 Retina 高分辨率屏幕图片适配完全指南，涵盖设计决策、Figma 交付规范、团队协作要点
面向 UI/UX 设计师，聚焦设计决策、资源交付和团队协作
整理自 Apple Developer 文档、MDN Web Docs、web.dev 等权威来源
Apple 在 2010 年 iPhone 4 上首次引入 Retina 显示屏，核心原理是在相同物理面积内塞入更多像素。用一个指标来衡量：DPR（Device Pixel Ratio，设备像素比）。
简单理解：
| DPR | 代表设备 | 你需要知道的 |
|---|---|---|
| 1x | 老款外接显示器、低端笔记本 | 占比越来越少，但仍需兼顾 |
| 2x | MacBook、iPad、大部分 Android 手机/平板 | 主流，必须覆盖 |
| 3x | iPhone X 及之后全部 iPhone | 手机屏幕小，2x 图通常够用 |
关键结论：准备 1x 和 2x 两套图就够了。 3x 设备屏幕物理尺寸小，2x 图在上面的视觉差异肉眼几乎察觉不到。Amazon、淘宝等主流电商也是这个策略。
不是所有图片都需要高分辨率版本。核心原则是：用户会直接注视的元素，优先保证清晰。
Apple 官方文档明确建议：在用位图之前，先考虑能否用矢量替代。
| 格式 | 体积 | 透明 | 动画 | 推荐场景 |
|---|---|---|---|---|
| AVIF | 最小 | ✅ | ✅ | 首选格式（如浏览器支持） |
| WebP | 较小（比 JPEG 小 25-34%） | ✅ | ✅ | 主力格式 |
| JPEG | 中等 | ❌ | ❌ | 照片类，兼容性兜底 |
| PNG | 较大 | ✅ | ❌ | 需要透明通道 |
| SVG | 极小 | ✅ | ✅ | 图标、logo、插画 |
设计师需要关注的：
选中元素 → 右侧面板 Export 区域 → 添加导出项：
| 导出项 | 倍率 | 后缀 | 说明 |
|---|---|---|---|
| 第 1 项 | 1x | （空） | 标准分辨率 |
| 第 2 项 | 2x | @2x | 高分辨率 |
格式选择：
两种常见命名风格：
name@1x.jpg / name@2x.jpg — 直观，Apple 官方推荐name-400w.jpg / name-800w.jpg — 更灵活，适合响应式按用途分类/
├── icons/
│ ├── icon-cart.svg ← 矢量图标，不需要倍率
│ ├── icon-cart@1x.png ← 如果必须用位图
│ └── icon-cart@2x.png
├── products/
│ ├── shoe-hero-400w.jpg ← 按宽度命名
│ └── shoe-hero-800w.jpg
└── banners/
├── home-banner@1x.jpg ← 按倍率命名
└── home-banner@2x.jpg
和开发约定好用哪种，保持一致即可。
如果你在维护设计系统，建议在组件文档中标注：
在 Figma 中始终按 1x（CSS 像素）设计。 例如：
如果你的设计稿里用了一张 400px 宽的产品图：
包含文字的位图（如 Banner、活动图）在低分辨率下文字会明显模糊。建议：
高分辨率图片 = 更大的文件 = 更长的加载时间。设计时需要考虑：
| 信息 | 为什么重要 |
|---|---|
| 哪些图需要 2x | 开发需要知道哪些图要做分辨率适配 |
| 图片的显示尺寸（CSS 像素） | 开发需要配置正确的尺寸属性 |
| 图片的宽高比 | 防止加载时布局跳动 |
| 是否需要艺术指导（Art Direction） | 手机和桌面用不同裁切时，开发需要额外处理 |
| 格式优先级 | AVIF → WebP → JPEG 的降级顺序 |
有 CDN（如阿里云 OSS、Cloudinary、imgix）的话，工作流会简单很多：
以电商为例，按投入产出比排序：
| 优先级 | 页面 / 元素 | 建议 |
|---|---|---|
| 🔴 P0 | Logo、品牌图标 | SVG 优先，位图必须 2x |
| 🔴 P0 | 首页 Hero Banner | 2x + WebP/AVIF + 预加载 |
| 🔴 P0 | 产品详情页主图 | 2x + 支持缩放查看原图 |
| 🟡 P1 | 产品列表缩略图 | 2x + 懒加载 |
| 🟡 P1 | 搜索结果图 | 2x + 懒加载，优先保证速度 |
| 🟢 P2 | 文章/内容配图 | 视内容重要性决定 |
| 🟢 P2 | 装饰性背景 | 1x 通常就够 |