43 lines
3.0 KiB
Markdown
43 lines
3.0 KiB
Markdown
# UI 外发版 10.09 图片资源
|
|
|
|
来源：用户提供的 `UI外发版10.09.psd`。按 Photoshop 图层原样导出，未重新生成或重绘素材。
|
|
|
|
## 文件位置
|
|
|
|
- `pages/`：10 个画板的原尺寸 PNG，宽 1080px。包含登录、启动、授权弹窗、我的报告、档案填写、拍照弹窗、三视图拍照及长报告。
|
|
- `pages-overview.jpg`：全部页面缩略总览，按 PSD 原始画板顺序排列。
|
|
- `assets-overview.jpg`：独立切图总览。
|
|
- `manifest.json`：页面与切图的尺寸、文件名、图层索引、边界、可见状态及 SHA-256；同时保存完整图层树及文字，便于后续还原。
|
|
- `../../h5/assets/img/ui-20261009/`：新版页面使用的独立图片，与旧版素材分开存放。H5 使用去除原生顶栏的 `*-h5.jpg` 衍生背景。
|
|
|
|
## 前端素材对应
|
|
|
|
| 文件 | 用途 |
|
|
| --- | --- |
|
|
| `bg-splash.jpg` | 启动页原始照片，不含独立标题、Logo 与按钮 |
|
|
| `bg-profile.jpg` / `bg-login.jpg` | 档案页 / 登录页背景，按画板裁剪，保留设计里的叠色 |
|
|
| `bg-report.jpg` / `bg-history.jpg` | 长报告 / 我的报告页纯背景，按画板裁剪 |
|
|
| `skin-0-dry.png` … `skin-4-mixedoily.png` | 五档肤质插画；也导出了隐藏状态中的变体 |
|
|
| `product-25.png` / `product-35.png` / `product-50.png` | 三档产品图，分别取对应产品组中的主视觉图层 |
|
|
| `brand-*.png` / `product-badge.png` | 品牌标志与产品标志 |
|
|
| `icon-*.png` | 关闭、返回、下拉、相册、切换相机、快门、微信、游客图标 |
|
|
| `score-ring-*.png` | 设计稿中的评分环参考素材；实际评分仍应动态绘制 |
|
|
| `camera-mask-front.png` / `camera-mask-right.png` / `camera-mask-left.png` | 三步拍照轮廓蒙版，保留画板坐标与透明区域 |
|
|
| `camera-guide-front.png` / `camera-guide-right.png` / `camera-guide-left.png` | 对应三步的眼睛与鼻梁虚线定位叠层，与蒙版使用相同画板坐标 |
|
|
| `sample-*.png` | 设计稿内检测示意图，仅供视觉参考，不代替用户真实检测图 |
|
|
|
|
照片使用高质量渐进 JPG；其他素材使用 PNG 保留透明通道。切图按原图层尺寸输出，不强行放大，不将文字与按钮烘焙进背景。整页预览保留设计稿原有系统状态栏和重复/隐藏图层状态。
|
|
|
|
`sample-lines.png` 来自隐藏的备选示意图层，设计文件内各分类存在重复示意图，文件名不表示图片已经过该项目评分引擎的真实检测。产品图按主视觉独立导出，卡片圆角和裁剪需由前端容器实现。
|
|
|
|
注意：PSD 的画板名「左面」实际文案为第 2 步「右脸出镜」，「右面」实际文案为第 3 步「左脸出镜」。切图按文案中的用户脸部方向命名，清单保存了对应图层路径。
|
|
|
|
## 重新导出
|
|
|
|
```bash
|
|
python -m pip install psd-tools Pillow aggdraw
|
|
python tools/export_psd_assets.py '/absolute/path/UI外发版10.09.psd'
|
|
```
|
|
|
|
重新导出会更新本版本目录内的导出文件，不会覆盖 `h5/assets/img/` 下原有同名线上图片。
|