72 lines
5.3 KiB
Markdown
72 lines
5.3 KiB
Markdown
# 慧遇书院官网 P0-P2 界面优化验收
|
||
|
||
- source visual truth path: `artifacts/ui-audit-2026-08-12/01-home-desktop.png`、`02-about-desktop.png`、`03-teacher-desktop.png`、`04-home-mobile.png`、`05-about-mobile.png`、`06-admin-desktop.png`
|
||
- implementation screenshot path: `artifacts/ui-audit-2026-08-12/09-home-desktop-final.png`、`13-teacher-desktop-final.png`、`14-home-mobile-final.png`、`12-mobile-menu-final.png`
|
||
- desktop viewport: 1440 × 1000 CSS px，截图同尺寸，device density 由浏览器默认值保持一致
|
||
- mobile viewport: 390 × 844 CSS px，截图同尺寸，device density 由浏览器默认值保持一致
|
||
- state: 首页首屏、人物区进入视口、移动端首屏、移动端导航展开、后台登录
|
||
|
||
## Full-view comparison evidence
|
||
|
||
- 桌面首屏保持原有山水与莲花主视觉、左侧标题和顶部导航构图；品牌显示统一为“慧遇书院 / HUIYU ACADEMY”。
|
||
- 移动端标题收敛到 55.38px，顶部栏 70px，页面宽度无溢出；首屏信息仍完整呈现。
|
||
- 首页移动端总高度从审查时约 12159px 降至 10901px，课程与区块密度得到收敛。
|
||
|
||
## Focused region comparison evidence
|
||
|
||
- 人物区：标题统一为 58px，正文宽度扩大；渐显结束时卡片透明度 0.98，文字在进入视口过程中保持可读。
|
||
- 导航：桌面链接点击高度 44px，移动菜单链接高度 48px；展开后锁定页面滚动，关闭按钮和焦点轮廓清晰。
|
||
- 关于区：指标保持三列对齐，数字动画缩短至 620ms，卡片边界和阴影可辨识。
|
||
- 后台登录：页面标题与 Logo 均读取已发布品牌配置，显示“慧遇书院”。
|
||
|
||
## Required fidelity surfaces
|
||
|
||
- Fonts and typography: H2 统一为最高 58px，人物标题不再单独放大；中文标题和副标题字距收紧，小字对比度提高。
|
||
- Spacing and layout rhythm: 桌面区块使用 104-120px 流式间距，移动端统一为 68px；卡片内部间距和移动端图片高度同步压缩。
|
||
- Colors and visual tokens: 保留浅蓝、暖白、深蓝体系；统一卡片阴影和边框，正文灰蓝提高对比度。
|
||
- Image quality and asset fidelity: 保留真实品牌图形、卢慧肖像及既有生成素材；没有使用占位图、手绘 SVG 或 CSS 假素材。
|
||
- Copy and content: 代码、Mock 内容、导航、CTA、文章标题与后台标题中的“慧愈科技”已清零；品牌动态读取后台配置。
|
||
- Accessibility and interaction: 焦点轮廓强化，桌面/移动点击目标达到 44px/48px，保留 reduced-motion，390px 无横向溢出。
|
||
|
||
## Comparison history
|
||
|
||
1. Earlier P0: 新旧品牌名称混用；人物正文在动画过程中接近透明。
|
||
- Fix: 清理旧品牌硬编码并让导航/后台标题读取品牌配置；渐显初始透明度提高、动画缩短，人物遮罩动画缩短至 720ms。
|
||
- Post-fix evidence: 页面正文不包含“慧愈科技”，后台标题为“后台管理登录｜慧遇书院”，人物区最终截图文字清晰。
|
||
2. Earlier P1: 标题层级跨度大、区块留白过多、导航点击目标小、移动页过长。
|
||
- Fix: 统一 H2、正文、英文眉题字号；收敛桌面和移动区块间距；导航点击高度扩展；移动课程卡和图片压缩。
|
||
- Post-fix evidence: 桌面 H2 主要区块均为 58px；桌面导航 44px；移动标题 55.38px、顶部栏 70px、总高 10901px。
|
||
3. Earlier P2: 阴影边框不统一、按钮反馈简单、辅助文字偏淡。
|
||
- Fix: 新增统一 card shadow token、按钮光泽反馈、无触摸 hover 回退、辅助文字对比度提升。
|
||
- Post-fix evidence: 桌面与移动浏览器截图中卡片层级稳定，按钮与链接交互状态一致。
|
||
|
||
## Verification
|
||
|
||
- `npm test`: 6 tests passed
|
||
- `npm run typecheck`: passed
|
||
- `npm run test:smoke`: 21 sitemap routes、health、headers、robots、static cache passed
|
||
- Docker: container healthy
|
||
- Browser console errors/warnings: 0
|
||
- Desktop and mobile horizontal overflow: 0
|
||
|
||
## Findings
|
||
|
||
- 无剩余可执行 P0/P1/P2 问题。
|
||
- 后台完整登录后业务页仍建议在拿到正式管理员凭据后做一次真实发布/恢复流程复核；不影响本轮视觉优化验收。
|
||
|
||
## 首屏高清背景专项验收（2026-08-12）
|
||
|
||
- 原因：旧首屏默认图只有 1672×941，且前端放大至 1.07 倍；在 2× DPR 屏幕上会发生明显插值模糊。
|
||
- 修复：重制并输出 3344×1882 高清母版，提供 AVIF（约 91 KB）与 WebP（约 173 KB）两种生产格式；默认缩放降至 1.035，保留轻量视差效果。
|
||
- 运行时证据：首页实际加载 `hero-bg-v3.avif`，自然尺寸 3344×1882；1280×720、DPR 2 环境下无横向溢出。
|
||
- 视觉检查：山体、水面、莲花和日光边缘清晰，标题与导航对比度正常，首屏构图未偏离既定设计方向。
|
||
|
||
## 陪伴团队窄屏专项验收（2026-08-12）
|
||
|
||
- 原因：原两列卡片在 760–1100px 区间仍保持双列，每张卡片同时保留 210px 图片，文字列宽被压缩至单字宽度。
|
||
- 修复：1100px 以下改为单列卡片；520px 以下改为图片在上、文字在下，并为文字容器增加最小宽度保护和中文标题禁用逐字断行。
|
||
- 运行时证据：820×900 下卡片宽 658px、文字列宽 370px，标题与角色均保持单行，无横向溢出。
|
||
- 视觉检查：窄屏卡片图片、标题、角色和简介层级清晰，卡片之间留白一致。
|
||
|
||
final result: passed
|