feat(h5): align third feedback with latest PSD and scanning screen
This commit is contained in:
@@ -0,0 +1,78 @@
|
||||
# 第三轮反馈：PSD 对齐及本地验收
|
||||
|
||||
日期：2026-10-12。依据 `new_feedback/第三轮反馈20261012` 的客户会话、四张批注及新版 `UI外发版10.09.psd`。本轮完成本地开发，不包含 Git 提交、推送或生产部署。
|
||||
|
||||
## 已完成
|
||||
|
||||
| 范围 | 实现 |
|
||||
| --- | --- |
|
||||
| 首页/引导背景 | 直接导出 PSD 中三行口号、Logo 与中文组合，保留原始字形、字重及可见高度比例；首页两个按钮的静态文字也从 PSD 导出，不再依赖手机系统字体。 |
|
||||
| 介绍弹窗 | 完全采用用户确认的 PSD 原文，按原稿校准弹窗位置、标题、正文、勾选区及按钮；服务端保存和回看保持不变。 |
|
||||
| 拍照引导 | 固定设计稿的两行断句、字号及文本栏；弹窗固定约 308×313 CSS px，320px 窄屏也能完整展示，不机械缩小文字。 |
|
||||
| 产品卡 | 使用 Semibold 原字体，标题约 14.47px、名称约 11.57px；校准左侧约 26.74px 留白、品牌标识及纵向位置。右图按 PSD 白卡的实际可见区域导出，不再二次居中裁切。 |
|
||||
| 生成报告等待 | 三张照片拍完后显示 PSD 原始黑底、白色人脸、黄色扫描区和「检测中…」。相册/翻转图标仅是图片内容，不可点击、不可聚焦；保留明确取消、返回、失败恢复及请求完成后的报告跳转。 |
|
||||
|
||||
产品仍只展示算法推荐的一款；没有修改评分、肤龄、推荐规则、三视角顺序或自动拍摄阈值。历史报告保留原推荐和原文案，仅按已有产品档位更新展示图片的裁切，不回写历史数据。
|
||||
|
||||
用户确认的弹窗原文：
|
||||
|
||||
> 我们将采集您的面部影像，为您生成专属肌肤分析与状态管理方案。所有数据严格保密，仅用于本次检测分析。
|
||||
|
||||
引导正文的 PSD 断点（包括「确/保」之间的换行）：
|
||||
|
||||
```text
|
||||
为使测试结果更准确，请关闭美颜/滤镜、并确
|
||||
保光线充足均匀。
|
||||
```
|
||||
|
||||
## 原稿与导出可追溯性
|
||||
|
||||
- 新 PSD 为 7330×16411、11 个顶层分组，新增第 9 号「扫描」，原「登录」变为第 10 号。旧导出器改为按唯一名称定位「登录」，拒绝缺失或重名，避免切图串页。
|
||||
- 本轮选择性导出脚本：`tools/export_third_feedback_assets.py`。运行方式：
|
||||
|
||||
```bash
|
||||
python3 tools/export_third_feedback_assets.py 'new_feedback/第三轮反馈20261012/UI外发版10.09.psd'
|
||||
```
|
||||
|
||||
- 原 PSD SHA-256：`c7698f5900adc7476286818450d928e8fa2ce2e58cda09375ff2b861629fd58f`。
|
||||
- `design/ui-20261012/manifest.json` 记录源文件校验、图层路径、原始坐标、字体及变换矩阵、输出尺寸和逐资源 SHA-256。测量包含文字图层的缩放，不直接把原始 FontSize 当最终字号。
|
||||
- 另读取矢量路径确定原稿圆角：弹窗 25 个设计像素、按钮 20px、产品卡 15px（375px 基准分别约 8.68/6.94/5.21 CSS px），不是继续沿用旧版估计值；产品卡宽高按 984×503 的原稿比例校准。
|
||||
- 八份前端资源位于 `h5/assets/img/ui-20261012/`；PNG/无损 WebP 均来自 PSD，不使用生成式替代图、不改人物或产品包装。原 10.09 资源和字体文件保留不动。
|
||||
- 扫描页须整体合成，保留跨图层剪贴依赖，再裁掉 248px 微信原生顶栏；单独导出图标组会漏掉人脸。导出器及浏览器测试都检查白色人脸、黄色下半脸像素。
|
||||
- 原稿预览保存在 `design/ui-20261012/page-{0,1,4,9}.webp`，仅用于核对，不将整个交互页面替换为背景截图。微信原生导航由宿主提供，不叠加进 H5。
|
||||
- 等待画面保持原始长宽比，异形屏用黑色留白适配；额外的「取消」为保留已有功能的必要入口。不新增虚构百分比、扫描动画或固定长时间等待，沿用原有至少 1.2 秒防闪及 150 秒请求预算。
|
||||
- 扫描图未加载或加载失败时仍显示「检测中…」文字并可取消，不留下无提示黑屏；正常加载后仅展示原稿文字，不重复叠字。
|
||||
- 静态品牌图规避系统字体差异；其余动态文字使用完整原始 MiSans，保留 `font-display: swap`。小字号开启几何精度渲染，减少浏览器将小数像素字宽取整造成的断行偏差；不同系统的文字抗锯齿仍可能有细微区别。
|
||||
|
||||
## 本地验证
|
||||
|
||||
已通过以下检查，未调用收费 Face++ 或改动线上账号、照片、报告：
|
||||
|
||||
- 第三轮专项：源资源校验/PSD 字体与原文、320/375/390/414/480px 弹窗和产品排版，三款推荐产品、固定断行、字体失败降级、短视口及等待页六种尺寸；实际三张上传推进、装饰图标、键盘焦点、取消/迟到响应、失败重试、成功进入报告。
|
||||
- 第二轮专项：全屏相机、三种圆角轮廓、五官辅助线、震动安全降级、450ms 自动抓拍条件、协议及报告实际字体、首屏无大字体/模型请求。
|
||||
- 原反馈回归：报告图放大、三个维度独立滑动切换、上下滚动、七张真实数据可视化及皱纹/毛孔文案。
|
||||
- 推荐规则 126 个用例、原算法 86 条断言，以及 150 秒超时/迟到回调单测。
|
||||
- 隔离服务器的报告持久化：后台/H5/CSV 一致、最新五份报告、用户隔离、历史快照不回写，包含旧图片路径升级展示的验证。
|
||||
- 登录及模拟微信：隔离 HTTPS `/state/` 回调、Secure cookie、账号切换、跨设备同账号和不同账号隔离；不是对真实手机授权的替代验收。
|
||||
- 登录性能回归：150ms 延迟、约 2Mbps 下载及 4 倍 CPU 降速下冷启动约 **1.64 秒**、资源 **264610 字节**；新增扫描图约 11.7KB，在进入档案/相机后才加载，不竞争登录首屏。
|
||||
- 切图映射 3 个单测、JS/Python 语法及 diff 空白检查。按项目约定执行 `graphify update .`（AST 更新，无付费语义提取）。
|
||||
|
||||
主要复验命令：
|
||||
|
||||
```bash
|
||||
python3 tools/test_export_psd_assets.py
|
||||
H5_ARTIFACT_DIR=/tmp/juzi-third-final node h5/test/customer-feedback-third.mjs
|
||||
node h5/test/customer-feedback-second.js
|
||||
node h5/test/customer-feedback-second.mjs
|
||||
node h5/test/customer-feedback.js
|
||||
node h5/test/customer-feedback.mjs
|
||||
node h5/test/recommendation.js
|
||||
node h5/test/regression.js
|
||||
node h5/test/analyze-timeout.js
|
||||
node h5/test/report-persistence.mjs
|
||||
node h5/test/accounts.js
|
||||
node h5/test/login-performance.mjs
|
||||
node h5/test/wechat-browser.mjs
|
||||
```
|
||||
|
||||
仍需部署后在真实手机微信中做最终视觉/相机验收。当前线上版本未改变；客户反馈原件及 PSD 未修改、未自动纳入提交。
|
||||
Reference in New Issue
Block a user