验收20%
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
# A01 分层 PSD 与正式 PNG 资产设计
|
||||
|
||||
## 决策
|
||||
|
||||
A01 不再以 Figma 作为设计与资产生产环节。重新建立一份真正分层的 PSD，将它作为 A01 美术资产的唯一源文件；正式 PNG 必须从 PSD 的对应图层或图层组直接导出，密码登录和验证码登录代表图也必须由同一份 PSD 组装导出。
|
||||
|
||||
现有两张选定效果图只保留为风格、构图和状态参考，不再作为必须反向拆分的扁平像素真值：
|
||||
|
||||
- `docs/design/screens/handoff/2026-07-15/A01-visual-source-password-selected-v2-841x1870.png`
|
||||
- `docs/design/screens/handoff/2026-07-15/A01-visual-source-sms-selected-v1-841x1870.png`
|
||||
|
||||
新的最终视觉真值是用户确认后的 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 之外的相邻页面、路由和资产调整。
|
||||
- 清理、删除、覆盖现有候选资产或用户未提交修改。
|
||||
@@ -0,0 +1,100 @@
|
||||
# 家谱 APP 纯代码资产流水线设计规格
|
||||
|
||||
> 日期：2026-07-15
|
||||
> 当前试点：A01 登录页
|
||||
> 状态：等待用户复核规格，尚未开始实现
|
||||
|
||||
## 1. 目标
|
||||
|
||||
建立一条不依赖 Photoshop、Figma 或人工反向切图的资产生产链。复杂国风位图只在缺失时由 ImageGen 生成一次原始母图；之后的透明处理、裁切、缩放、组合、预览和运行资产导出全部由代码完成。整页设计预览与 uni-app 使用的独立 PNG 必须来自同一批源像素和同一份布局清单。
|
||||
|
||||
首轮只验证 A01，不修改其他 52 页。成功标准不是脚本能够输出图片，而是 A01 的代码预览、独立资产、uni-app 真实运行画面和验收规划中的页面合同能够形成可重复验证的闭环。
|
||||
|
||||
## 2. 当前版本范围
|
||||
|
||||
- 基础版本固定使用当前浅色国风主题。
|
||||
- 深色与跟随系统整体延期到下一版本，不阻塞本轮 53 页验收。
|
||||
- 下一版本增加主题时必须另建全局主题合同，并对已冻结页面执行影响分析和真实截图回归。
|
||||
- 当前只做页面样式、视觉状态和 Android 兼容性，不对接接口，不宣称 Mock 状态代表功能通过。
|
||||
|
||||
## 3. 保留现场
|
||||
|
||||
- 现有 `docs/design/assets/a01-vnext/`、PSD、Photoshop 脚本、候选图片和历史证据全部保留。
|
||||
- 不删除、不移动、不覆盖旧实验文件。
|
||||
- Photoshop 生产链停止扩展，新流水线不得引用 Photoshop COM、JSX 或 PSD 作为运行依赖。
|
||||
- 旧文件是否归档必须等 A01 新流水线和真实页面通过后另行决定。
|
||||
|
||||
## 4. 唯一所有者与目录边界
|
||||
|
||||
新流水线使用以下边界：
|
||||
|
||||
```text
|
||||
design-pipeline/
|
||||
manifests/ 页面、状态、图层、尺寸和导出合同
|
||||
sources/ 经确认的原始母资产，只读输入
|
||||
scripts/ Node.js 渲染、切图、校验和报告脚本
|
||||
generated/ 可再生成的设计预览、联系表和检查报告
|
||||
static/assets/ 用户确认后进入页面的正式运行资产
|
||||
docs/design/screens/ 真实运行截图证据，不作为页面资源
|
||||
```
|
||||
|
||||
页面清单是坐标、状态、源文件、目标文件、尺寸和复用关系的唯一机器可读所有者。脚本和页面不得重新硬编码同一套资产规则；uni-app 页面只消费已确认的正式运行资产及必要布局常量。
|
||||
|
||||
## 5. 技术结构
|
||||
|
||||
- Node.js：命令入口、清单读取、状态遍历、输出隔离和失败报告。
|
||||
- Sharp/libvips：Alpha、裁切、合成、缩放、PNG 优化、尺寸与体积检查。
|
||||
- JSON：页面画布、图层顺序、资产槽位、状态差异和导出规格。
|
||||
- ImageGen：只生成缺失的完整复杂位图母资产；不生成带表单文字的整页截图，不重绘现有 `brand-seal.png`。
|
||||
- uni-app：最终页面实现与真实交互状态；不把整页设计预览当运行资产。
|
||||
|
||||
## 6. A01 首轮输出
|
||||
|
||||
同一次构建必须生成：
|
||||
|
||||
1. A01 独立透明 PNG 资产及尺寸、Alpha、SHA256 和文件体积报告。
|
||||
2. 密码登录与短信验证码登录的 412×915 代表图。
|
||||
3. 复杂状态联系表，至少覆盖密码隐藏、密码显示、短信默认和短信倒计时。
|
||||
4. 320×568、360×640、360×800、412×915 四尺寸布局预览。
|
||||
5. 可供 A01 契约测试读取的生成清单。
|
||||
|
||||
代码预览必须覆盖 A01 当前合同：现有 `brand-seal.png`、现有锁图标、保留中心瞳孔的闭眼图标、消息气泡加且仅加三点的短信图标、忘记密码位于密码横线下方，以及密码／短信两种独立状态。
|
||||
|
||||
## 7. 验收边界
|
||||
|
||||
- 代码生成图只用于选择和定位视觉问题，不计为真实运行证据。
|
||||
- A01 实施后必须从真实路由进入，获取当前浅色国风主题的运行截图。
|
||||
- 内部检查四档尺寸、默认字号与约 1.3 倍字号、状态栏、安全区、软键盘、返回手势和图片解码表现。
|
||||
- 320×568 下品牌区、登录方式、当前表单、登录按钮、微信入口、注册、忘记密码和协议入口必须同屏可见且不依赖纵向滚动。
|
||||
- 默认只向用户展示一张代表图；密码／短信等复杂状态使用一张联系表。
|
||||
- H5 截图是候选证据，最终仍需 Android/HBuilderX 真机或模拟器复核。
|
||||
- 用户明确确认前，A01 保持 `[~]`，不得写成已验收或冻结。
|
||||
|
||||
## 8. 性能与工程约束
|
||||
|
||||
- 正式 PNG 按实际显示槽位输出，不让页面解码无必要的超大位图。
|
||||
- 同一公共资产只保留一个正式来源；页面状态不得复制公共背景和按钮像素。
|
||||
- 脚本拒绝覆盖已存在的版本化输出，失败时保留旧结果并返回非零退出码。
|
||||
- 生成目录与正式运行目录严格分离；只有用户确认的资产才进入 `static/assets/`。
|
||||
- 不使用整页截图作为运行资产，不用 CSS 或手写 SVG 假造完整卷轴、宗祠、牌匾、按钮和装饰面。
|
||||
- 所有可见提示继续使用项目自定义组件，禁止以原生 UniApp 提示作为最终视觉。
|
||||
|
||||
## 9. 测试与证据
|
||||
|
||||
- 先建立纯代码流水线契约测试并确认因入口和清单缺失而失败。
|
||||
- 最小实现后验证清单、源文件、四尺寸输出、状态输出、PNG 尺寸、Alpha、文件体积和哈希。
|
||||
- A01 页面实施前先更新页面契约测试并确认 RED，实施后恢复 GREEN。
|
||||
- 运行受影响测试、运行时 smoke、真实截图人工复核和 `git diff --check`。
|
||||
- 不执行 `git add`、commit、push、reset、checkout、上传、worktree 或多代理。
|
||||
|
||||
## 10. 推广门槛
|
||||
|
||||
A01 只有同时满足以下条件，纯代码流水线才可推广：
|
||||
|
||||
1. 同一清单能够稳定重复生成全部 A01 候选资产和预览。
|
||||
2. 独立 PNG 与设计预览来自相同源像素，不再需要人工反向切图。
|
||||
3. A01 真实运行截图与选定预览达到用户认可的视觉一致性。
|
||||
4. 四档尺寸、约 1.3 倍字号、软键盘、安全区和 Android 复核有真实证据。
|
||||
5. 用户明确确认 A01 基础版本通过。
|
||||
|
||||
未达到推广门槛时，只修正 A01 流水线和页面，不修改其他页面。
|
||||
Reference in New Issue
Block a user