90 lines
8.3 KiB
Markdown
90 lines
8.3 KiB
Markdown
# 第三轮反馈：PSD 对齐、验收及上线记录
|
||
|
||
日期：2026-10-12。依据 `new_feedback/第三轮反馈20261012` 的客户会话、四张批注及新版 `UI外发版10.09.psd`。本轮已完成本地开发、Git 提交及生产部署；按此前约定未推送 origin，由用户自行推送。
|
||
|
||
## 已完成
|
||
|
||
| 范围 | 实现 |
|
||
| --- | --- |
|
||
| 首页/引导背景 | 直接导出 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
|
||
```
|
||
|
||
## 生产部署及只读验收
|
||
|
||
- 功能提交：`c7b085e795f21565a9802896041b447970f44ab9`（`feat(h5): align third feedback with latest PSD and scanning screen`）。
|
||
- 部署目标：`ubuntu@1me.xajuzi.com:/home/ubuntu/juzi`；页面为 <https://1me.xajuzi.com/state/>。部署前确认服务器工作区干净，与本地基线 `f3e7eac` 一致，通过 Git bundle 快进更新，不覆盖服务器私有配置或用户数据。
|
||
- 因后端启动时加载 `report-ui.js`，同步代码后重启 `juzi-h5.service`，保证前后端使用同一版本。服务 `active`、自动重启次数 `NRestarts=0`，健康接口返回 `ok:true`；检查时最近 15 分钟没有 systemd 错误级日志。
|
||
- 线上首页、两个 JS 模块、新 CSS 及八份新素材均返回 200，与本地逐文件 SHA-256 一致，并带有 `Cache-Control: no-cache`。
|
||
- 线上第三轮浏览器专项全部通过：五种宽度弹窗/断行/产品排版、三款产品、三张照片推进至扫描页、白色人脸和黄色扫描区、六种视口、装饰图标、取消/迟到响应、失败重试和成功报告、字体及扫描图失败降级；没有页面 JS 异常。检查了线上首页、等待画面和产品卡截图。
|
||
- 线上第二轮浏览器回归也通过：首屏不请求完整字体/人脸引擎、协议字体实际加载、全屏相机和三种圆角轮廓/五官辅助线、报告数字及标题的真实 PSD 字体、五种宽度无溢出；没有页面 JS 异常。
|
||
- 访问控制检查：未登录报告接口、后台页面和统计接口均返回 401；私有身份文件和 `server.js` 返回 404；微信登录配置仍启用。
|
||
- 生产浏览器回归使用内存中的登录/分析响应及本地示例图片，不提交真实检测、不调用收费 Face++、不创建或改动线上账号和报告；不能替代真实手机微信授权及摄像头验收。
|
||
|
||
仍需用户在真实手机微信中做最终视觉/相机验收。客户反馈原件及 PSD 未修改、未纳入提交；服务器凭据、环境配置、已有照片和报告保持不动。
|