第 1 章 · 输出规范：格式、命名、切图
考点梳理
1.1 格式（“3 种”）
| 格式 | 特点 | 典型场景 |
|---|---|---|
| PNG | 透明/无损（大文件） | 图标/Logo/透明元素 |
| JPEG | 压缩/有损（小文件） | 图片/背景/照片 |
| SVG | 矢量/无损（无限缩放） | 图标/动画/Logo |
选择口诀：“要透明选 PNG，要小选 JPEG，要无限缩放选 SVG”（“3 种各归位”）。
1.2 图标规范（“3 种”）
| 规范 | 内容 | 典型值 |
|---|---|---|
| 尺寸 | 16/24/32/48px（“4 档”） | 24px 是 App 图标主流 |
| 颜色 | 单色/双色/品牌色 | 状态色：成功绿/警告黄/错误红 |
| 圆角 | 0/4/8px（“3 档”） | 8px 是 App 图标主流 |
记忆锚：“图标 24px 主流，圆角 8px，状态色红黄绿”。
1.3 命名规范（“3 种”）
| 规范 | 内容 | 典型例子 |
|---|---|---|
| 前缀 | 类型前缀（ic-图标/bg-背景/btn-按钮） | ic-home.png |
| 层级 | 模块_子模块_元素（_ 分隔） | nav_header_menu.png |
| 状态 | 后缀标状态（_normal/_pressed/_disabled） | btn-submit_pressed.png |
记忆锚：“前缀类型 + 下划线分层 + 后缀标状态”——“开发看到名字就知道怎么用”。
1.4 切图规范（“3 种”）
| 规范 | 内容 | 典型值 |
|---|---|---|
| 尺寸 | 按 @1x/@2x/@3x 切 | iPhone：@2x（2 倍）/ @3x（3 倍） |
| 格式 | 按内容选（透明 PNG/图片 JPEG/矢量 SVG） | 图标 SVG 优先 |
| 压缩 | TinyPNG/图片压缩（“肉眼无差 + 体积减半”） | JPEG 质量 80% 左右 |
记忆锚："@2x/@3x 是 App 标配，图标 SVG 优先，压缩到肉眼无差"。
1.5 平台（“3 种”）
| 平台 | 设计宽度 | 单位 | 典型断点 |
|---|---|---|---|
| Web | 1920/1440/1280 | px | 3 档（PC 端） |
| App | iPhone 390×844 / Android 412×915 | pt/dp | 2 种（移动） |
| 小程序 | 750rpx（设计稿 750 宽） | rpx | 1 种（微信/支付宝） |
记忆锚：“Web 1440 主流，App 390/412，小程序 750rpx”。
rpx 换算（小程序必会）：
rpx = px × 750 / 屏宽
（iPhone 390pt 屏：1px ≈ 1.92rpx，设计稿直接按 750 宽画）
🧠 记忆工具箱
口诀速记
- 格式：“透明 PNG 小 JPEG 矢量 SVG”（“3 种各归位”）；
- 图标：“24px 主流，圆角 8，红黄绿”；
- 命名：“前缀类型下划线，后缀状态要标清”；
- 切图："@2x @3x App 标配，SVG 图标优先切"；
- 平台：“Web 1440 App 390，小程序 750”。
场景锚点
- 输出规范想象"“交作业”"：你不是学生（不需要写作业），你是"交付工"（“打包 + 贴标签”）——“格式 = 作业纸类型（透明用 PNG），命名 = 作业标签（开发按标签找），切图 = 装订（@2x/@3x 别糊）”——“标签贴错 = 开发找不到 = 延期”。
⚠️ 易错提醒
- PNG vs SVG：图标优先 SVG（无限缩放不糊）——“PNG 切 3 倍图 = 体积大 + 缩放糊”；
- JPEG 有损：文字/锐利边缘别用 JPEG（会产生摩尔纹）——“文字用 PNG/SVG”；
- 命名混乱 = 开发噩梦：
icon.png/icon2.png/icon_1.png= 延期主因——“命名规范是交付质量的一半”； - rpx 不是 px：小程序设计稿直接按 750 宽画（别按 375 画再翻倍）——“750rpx 设计稿 = 标准做法”；
- @2x/@3x 必切：只切 @1x = App 端糊（iPhone 高清屏）——"@3x 是 iPhone 标配"。