40 lines
2.5 KiB
Markdown
40 lines
2.5 KiB
Markdown
# 首页设计还原 QA
|
||
|
||
## 对照基准
|
||
|
||
- 设计源：用户在当前对话提供的桌面首页设计图，红色文字和箭头作为替换与结构调整标注。
|
||
- 实现基线：原首页 `index-modern.html` 的品牌色、字体、卡片质感和 `public/js/page-effects.js` 交互。
|
||
- 桌面审查截图：`artifacts/homepage-final-review-full.png`，CSS 视口 1440 × 2200，DPR 1。
|
||
- 移动审查截图：`artifacts/homepage-final-review-mobile.png`，CSS 视口 500 × 1600，DPR 1。
|
||
- 页面状态：未登录初始状态。
|
||
|
||
## 结构对照
|
||
|
||
- 页面沿用原首页 1280px 宽屏容器，顺序为双层导航、首屏、四个主入口、第一条九格广告栏、六个内容入口、推荐与友情链接、第二条九格广告栏、页脚。
|
||
- 已删除设计图没有的家谱广场、文章列表、姓氏百科、相关推荐大卡、下载大区块。
|
||
- “我的家谱”是独立强调入口，链接 `profile-families.html`，承担查看、新建和管理全部家谱。
|
||
- 红色标注按替换文案处理；被替换的旧标题没有在同一卡片中保留。
|
||
|
||
## 视觉与交互对照
|
||
|
||
- 保留原首页的暖纸色、朱红渐变导航、宋体标题、黑体正文、宽屏留白、圆角卡片、层次阴影与半透明面板。
|
||
- 首屏按设计图重组为正文、二维码、原有蓝色家谱封面、祠堂和家族记忆图片。
|
||
- 保留原首页的 `tilt-card` 指针倾斜、按钮磁吸、图片悬停缩放、移动菜单和 reduced-motion 行为。
|
||
- 桌面页脚链接与备案信息已恢复居中，不受原全局链接布局影响。
|
||
- 主入口图片按左侧内容定位，避免服务、视频和相册标题被居中裁切；入口区、内容卡和广告栏已压缩无效留白。
|
||
- 两组九格广告栏均使用项目已有广告图片，不再显示文字占位块。
|
||
- 页脚链接区改为完整浅色横条，消除了深色背景在两侧提前露出的断层。
|
||
|
||
## 响应式与可访问性
|
||
|
||
- 1120px 以下主入口和广告栏分栏；720px 以下首屏、入口和内容卡改为单列。
|
||
- 浏览器导航结构专项检查通过，移动断点继续沿用原首页规则。
|
||
- 图片提供替代文本；二维码入口、导航、广告位和内容卡均使用链接语义；焦点样式沿用公共样式。
|
||
|
||
## 剩余差异
|
||
|
||
- P3：设计图右下角为多人家族合影，仓库没有对应素材，当前继续使用原有家族记忆图片。
|
||
- P3：原首页交互动效在截图中不可见，但已通过复用原脚本和交互类保留。
|
||
|
||
final result: passed
|