119 lines
7.6 KiB
Markdown
119 lines
7.6 KiB
Markdown
# A01 分层 PSD 与正式 PNG 资产设计
|
||
|
||
## 决策
|
||
|
||
A01 不再以 Figma 作为设计与资产生产环节。重新建立一份真正分层的 PSD，将它作为 A01 美术资产的唯一源文件；正式 PNG 必须从 PSD 的对应图层或图层组直接导出，密码登录和验证码登录代表图也必须由同一份 PSD 组装导出。
|
||
|
||
现有两张选定效果图只保留为风格、构图和状态参考，不再作为必须反向拆分的扁平像素真值：
|
||
|
||
- `docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd`
|
||
- `docs/design/assets/a01-vnext/source/a01-psd-manifest.json`
|
||
|
||
新的最终视觉真值是用户确认后的 PSD 组装效果。只有这样，设计稿与页面才能使用同一批美术资产，避免重新生成导致的偏差。
|
||
|
||
## 目标与成功标准
|
||
|
||
- 交付一份可以显示、隐藏、移动和单独导出各资产层的 PSD。
|
||
- 宗祠、卷轴、宣纸、边框、按钮皮肤和功能图标均为独立、干净的图层或图层组。
|
||
- PSD 中不以整页截图冒充分层设计，也不从扁平截图硬裁被遮挡或带文字的脏资产。
|
||
- PSD 导出的正式 PNG 具有明确尺寸、Alpha 属性、拉伸规则和页面用途。
|
||
- 密码与验证码代表图由正式 PNG 和独立内容层重新组装，不进行第二次美术生成。
|
||
- 412 × 915 为像素校准基准；页面使用同一批 PNG 后，在该尺寸对齐资产比例与位置。
|
||
- 320 × 568、360 × 640、360 × 800、412 × 915 使用同一资产体系，依靠分片、平铺和真实布局适配，不压缩整张卷轴。
|
||
|
||
## PSD 结构
|
||
|
||
PSD 采用 412 × 915 的三倍工作画布，即 1236 × 2745 像素。页面布局仍以 412 × 915 逻辑尺寸记录，正式位图按三倍密度保留细节；导出时在清单中同时记录源像素尺寸和页面显示尺寸。
|
||
|
||
图层组固定如下：
|
||
|
||
1. `00-参考`
|
||
- 密码效果图，仅作锁定参考，不导出。
|
||
- 验证码效果图，仅作锁定参考，不导出。
|
||
2. `10-背景`
|
||
- 页面底色。
|
||
- 宗祠红色头图，不含 Logo、文字和卷轴，也不生成空牌匾、替代牌匾或新的 Logo 底座。
|
||
3. `20-卷轴`
|
||
- 顶部卷轴杆与卷边。
|
||
- 可纵向平铺或延展的无字宣纸主体。
|
||
- 左边框。
|
||
- 右边框。
|
||
- 底部卷轴杆与收口。
|
||
- 四角回纹及其他可独立复用的装饰。
|
||
4. `30-品牌与标题装饰`
|
||
- `brand-seal` 独立层，唯一来源为 `static/assets/foundation/transparent/brand-seal.png`。
|
||
- `brand-seal` 直接叠放在宗祠中央；宗祠背景只为它保留干净的视觉空间，不重画或补画牌匾。
|
||
- 标题两侧装饰和分隔纹样。
|
||
5. `40-公共控件皮肤`
|
||
- 主按钮左端、中部可延展纹理、右端，或经过验证的九宫格皮肤。
|
||
- 微信按钮边框和必要装饰，不包含按钮文字。
|
||
6. `50-密码登录`
|
||
- 手机图标。
|
||
- `a01-icon-lock-v1` 密码锁。
|
||
- 睁眼图标。
|
||
- 保留中心瞳孔的闭眼图标。
|
||
- 忘记密码为独立内容层，不烧入卷轴或输入区资产。
|
||
7. `60-验证码登录`
|
||
- 与密码状态共用同一个手机图标层实例。
|
||
- 消息气泡加且仅加三个点的验证码图标。
|
||
- 获取验证码及倒计时为独立内容层，不烧入输入区资产。
|
||
8. `70-内容与标注`
|
||
- 标题、Tab、输入文字、横线、按钮文字、注册与协议等用于代表图组装和定位。
|
||
- 这些内容不作为页面位图导出；页面中仍由真实 uni-app 组件渲染。
|
||
|
||
密码登录与验证码登录通过图层组显示和隐藏形成两种独立状态，共用 `10` 至 `40` 的全部公共资产，不复制背景和卷轴。
|
||
|
||
## 资产生产规则
|
||
|
||
- 新资产直接以单个图层所需的内容生成或编辑，不让 ImageGen 生成带完整页面、文字或其他控件的混合图。
|
||
- 为提高速度，相关结构允许先生成一张干净母图，再由 Photoshop 分层拆出正式 PNG；母图只能包含同一资产族，不能退回生成完整登录页面。
|
||
- 剩余生成收敛为三类母图：完整无字卷轴、无字按钮与装饰板、四枚功能图标板。宗祠头图使用已选候选裁剪，不再重新生成。
|
||
- 卷轴母图同时提供顶部、底部、左右边框和无字宣纸区域；按钮母图拆为左端、可延展中段和右端；图标板中的四枚图标必须彼此完全分离。
|
||
- 透明资产必须检查真实 Alpha、边缘杂色、白边、阴影截断和透明区域中的脏像素。
|
||
- 不透明纹理必须检查接缝、重复感和拉伸后失真；宣纸主体优先使用可平铺纹理。
|
||
- 卷轴和按钮不得作为整张长图跨尺寸压缩。端部、边框与中部延展区域必须分开。
|
||
- 图标在目标显示尺寸下检查可读性，不以大图缩略预览代替小尺寸验收。
|
||
- 除用户明确指定的 `brand-seal` 和 `a01-icon-lock-v1` 外，当前 A01 新视觉使用的新资产不得偷偷回退到旧候选文件。
|
||
- 候选资产只保存在设计候选目录；通过单项验收后才复制为新的版本化正式文件，不能覆盖现有未提交资产。
|
||
|
||
## PSD 与 PNG 导出契约
|
||
|
||
每个可导出的图层或图层组使用最终 PNG 文件名作为图层名。导出结果分为：
|
||
|
||
- 不透明背景类 PNG：宗祠头图等。
|
||
- 透明结构类 PNG：卷轴端部、边框、装饰和按钮切片。
|
||
- 透明图标类 PNG：手机、眼睛和短信气泡等。
|
||
- 代表图：密码隐藏、密码显示、验证码默认、验证码倒计时；代表图只用于设计对比，不能被页面引用。
|
||
|
||
每个导出文件必须同时记录：PSD 图层名、文件路径、像素尺寸、页面显示尺寸、Alpha 属性、平铺或拉伸规则、引用状态和验收结果。该记录后续写入 A01 设计记录与 P00 资产清单，避免同一规则在多个临时文件中重复定义。
|
||
|
||
## 制作工具边界
|
||
|
||
2026-07-15 已实际检测到正在运行的 Adobe Photoshop 2021：
|
||
|
||
- 可执行文件：`E:\Program Files (x86)\Photoshop\Adobe Photoshop 2021\Photoshop.exe`
|
||
- ProductVersion：`22.0`
|
||
- COM ProgID：`Photoshop.Application.150`
|
||
- ExtendScript 目录：`E:\Program Files (x86)\Photoshop\Adobe Photoshop 2021\Presets\Scripts`
|
||
|
||
后续实现使用项目内 PowerShell 启动脚本调用已注册的 Photoshop COM，再由项目内 ExtendScript 按资产清单建立命名图层、图层组、PSD 和 PNG 导出结果。脚本、清单与结果均保存在项目允许的目录内，不向 Photoshop 安装目录写文件，也不上传项目资产到第三方服务。
|
||
|
||
工具只是容器生成方式，不改变本规格中的图层结构和导出契约。任何自动化脚本都必须关闭自己创建的临时文档，不能关闭、覆盖或保存用户原先在 Photoshop 中打开的文档。
|
||
|
||
## 验收流程
|
||
|
||
1. 先建立空白分层结构和资产槽位，不修改 A01 页面代码。
|
||
2. 每次只制作一个资产类别，输出透明底检查图和深浅底联系表，由用户确认后再进入下一类。
|
||
3. 使用通过检查的图层组装密码和验证码两种 412 × 915 代表图，检查公共区域是否完全一致。
|
||
4. 用户确认 PSD 组装效果后，冻结 PSD 与导出 PNG 的文件哈希。
|
||
5. 随后才允许进入页面实现：先更新 A01 资产合同测试，再让页面引用同一批正式 PNG。
|
||
6. 页面完成后获取四档 H5 真实运行截图，并补做 Android/HBuilderX 真机或模拟器复核；没有这些证据不得宣称 A01 完成或验收通过。
|
||
|
||
## 范围外
|
||
|
||
- Figma 文件继续制作或同步。
|
||
- 将整张设计图铺成页面背景。
|
||
- 接口对接、真实短信、真实微信授权和登录业务实现。
|
||
- A01 之外的相邻页面、路由和资产调整。
|
||
- 清理、删除、覆盖现有候选资产或用户未提交修改。
|