feat(h5): apply second customer UI feedback and homepage refinements
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
# 12 日第二批：明确项修改
|
||||
|
||||
依据用户提供的 `12 日第二批.docx`（正文与 6 张截图）、随后补充的首页高清批注图及最新 `UI外发版10.09.psd`。原第 3 张首页截图仅 73×160 像素，未猜测；收到高清图后补齐下面两项。
|
||||
|
||||
## 已修改
|
||||
|
||||
### 首页高清批注
|
||||
|
||||
- 将三行口号中的中文「以我为始 自有表现」独立为 700 字重，英文继续使用 400 字重，保留三行断句与位置。PSD 对应中文 `0/4` 为 Demibold、英文 `0/5` 为 Regular，确实有粗细区别。
|
||||
- 放大底部「肌肤状态检测」到 24 CSS px、700 字重，与原始 Logo 约 26 CSS px 的可见高度对齐；Logo 保持原图宽高比。Logo 与文字均固定 CSS px，不再因屏宽缩放 Logo 而让二者比例失衡。
|
||||
- 首页继续使用系统字体表达字重区别，不提前下载约 5 MB 的完整 MiSans 字体；不改动或子集化字体。系统字体字形的细微差别仍依手机系统而定。
|
||||
- 在 320、375、390、414、480 五种屏宽验证：品牌行不溢出，口号仍三行，登录状态不遮挡口号，首屏不新增字体或检测引擎请求。
|
||||
|
||||
### 拍照展示
|
||||
|
||||
- 去掉人脸外轮廓的白色描边，以及原来无脸呼吸/合格变绿的轮廓描边；保留明暗镂空、五官虚线、扫描提示和「保持不动」反馈。
|
||||
- 视频由 85% 缩小预览恢复为铺满视口，避免外侧矩形取景边界；镜像仍保留。屏幕人脸中心坐标的缩放系数同步为 1，距离、姿态、光线判定阈值不变。
|
||||
- 对 PSD 导出的折线轮廓做最大 2 CSS px 的局部圆角化，使用二次曲线、不过冲、不改变轮廓坐标系。镂空与扫描裁切使用同一份平滑轮廓。原始 `CameraGeometry` 不修改。
|
||||
- 原始视频抓帧、上传图片、报告图片处理与评分/推荐逻辑不变。
|
||||
|
||||
### 准备捕捉提醒
|
||||
|
||||
原来仅在补光抓拍瞬间请求 30 ms 震动，改为首次满足检测条件、开始「保持不动」时请求 `[70, 40, 70]` 两次短震动。连续合格 450 ms 后仍按原流程自动抓拍，不增加倒计时。抖动重试时最多每两秒请求一次，每步重置。
|
||||
|
||||
实时相机的手动快门模式仍在点击抓拍时请求提醒；自动模式不会在抓拍瞬间再重复震动。
|
||||
|
||||
API 不存在、返回 false 或抛出异常时安全跳过，不能因震动失败卡住拍摄。此处没有接入未经验证的微信私有接口，也不声称所有 iPhone/微信环境均可震动。振动接口存在浏览器、用户激活和系统设置限制，实效必须在手机微信上测试；参见 [MDN Navigator.vibrate](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate)。保留原有文字、语音和补光反馈。
|
||||
|
||||
### 字重
|
||||
|
||||
直接读取 PSD 字体元数据，明确区分而非将所有文字一起加粗：
|
||||
|
||||
| 位置 | PSD 图层 | 原始字体 |
|
||||
| --- | --- | --- |
|
||||
| 协议弹窗标题 | `1/3/0` | MiSans-Demibold |
|
||||
| 拍照引导弹窗标题 | `4/7` | MiSans-Demibold |
|
||||
| 正/右/左拍照步骤 | `5/3`、`6/2`、`7/2` | MiSans-Demibold |
|
||||
| 综合评分、肌龄 | `8/12/2`、`8/12/3` | MiSans-Demibold |
|
||||
| 三维度数字 | `8/12/7/2`、`8/12/7/9`、`8/12/7/13` | MiSans-Demibold |
|
||||
| 报告标题、三维度大标题 | `8/13`、`8/9/17`、`8/10/20`、`8/11/17` | MiSans-Semibold |
|
||||
| 护理建议、产品区大标题 | `8/2/0/1/0`、`8/1/3` | MiSans-Semibold |
|
||||
|
||||
项目原来只有 Regular、Semibold，数字和部分提示还使用 Regular 字重。现从[小米官方字体包](https://hyperos.mi.com/font/zh/download/)增加完整的原始 Demibold 文件（4994364 字节），未转换、未子集化、未修改字形；SHA-256 为 `7afe3737efaf6a137db0ef4857fbe4033a8802756485ebc7f008e96a4bdedcf2`。保留字体归属声明。
|
||||
|
||||
Demibold 使用独立 CSS 字体族，仅应用于本轮明确需要它的位置，避免影响原有正文、Tab 和其他 Semibold 元素。报告大标题按原始 Semibold 字形显示，不能承诺所有原本已经正确加载 Semibold 的标题都会额外变粗。
|
||||
|
||||
字体样式注册提前到打开协议/拍照引导弹窗时，解决首次协议弹窗尚未注册项目字体的问题。继续 `font-display: swap`，不阻塞交互；登录、首页和账号恢复仍使用系统字体，不在首屏请求完整字体或模型。新增完整字体约 5 MB，在需要的页面下载并缓存；弱网下载完成前仍可能短暂显示回退字体。固定字号与产品两行断句保持不变。
|
||||
|
||||
## 验证与状态
|
||||
|
||||
```bash
|
||||
node h5/test/customer-feedback-second.js
|
||||
H5_ARTIFACT_DIR=/tmp/juzi-feedback-second-final-20261012 node h5/test/customer-feedback-second.mjs
|
||||
node h5/test/customer-feedback.js
|
||||
H5_ARTIFACT_DIR=/tmp/juzi-feedback-second-regression node h5/test/customer-feedback.mjs
|
||||
node h5/test/recommendation.js
|
||||
node h5/test/analyze-timeout.js
|
||||
node h5/test/login-performance.mjs
|
||||
node h5/test/e2e-browser.mjs
|
||||
H5_ARTIFACT_DIR=/tmp/juzi-feedback-second-ui-20261012 node h5/test/ui-20261009.mjs
|
||||
```
|
||||
|
||||
专项测试覆盖三种轮廓的有界曲线和无原始数据修改、异常输入回退、震动缺失/拒绝/抛错容错、抓拍前触发及频率限制、原有 450 ms 自动抓拍时机；浏览器核验实际渲染字体（不仅是 CSS 数值）、五种屏宽的全屏预览与固定字号、三种状态均无轮廓描边、五官引导保留、登录首屏无大字体/模型请求。专项浏览器测试拦截会话并使用本地合成视频流，不写入后端账号、报告，也不调用收费检测。
|
||||
|
||||
已完成本地开发及验证，首页高清图的两处批注也已补齐；本轮尚未提交 Git、推送或部署公网。真实手机震动实效仍待确认。
|
||||
Reference in New Issue
Block a user