Files
juzi/design/ui-20261009

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 步「左脸出镜」。切图按文案中的用户脸部方向命名,清单保存了对应图层路径。

重新导出

python -m pip install psd-tools Pillow aggdraw
python tools/export_psd_assets.py '/absolute/path/UI外发版10.09.psd'

重新导出会更新本版本目录内的导出文件,不会覆盖 h5/assets/img/ 下原有同名线上图片。