rain
43 lines
3.0 KiB
Markdown
43 lines
3.0 KiB
Markdown
# A01 参考图拆分素材重做设计
|
|
|
|
## 目标
|
|
|
|
以 `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` 为唯一视觉真值，修正当前 A01 在 412 × 915 运行截图中与参考图不一致的红头、场景、标题、分隔中结和按钮边框。保留既有真实 DOM、协议状态与本地登录跳转，不接接口、不把整张设计图作为页面内容。
|
|
|
|
## 方案选择
|
|
|
|
1. 继续使用泛生成装饰素材：已验证会产生粗亮的 L 型角花和错误云纹，拒绝。
|
|
2. 从已确认的参考图拆分独立素材并由 DOM 组装：可以保留参考图中的金线、卷角和家祠细节，同时保留按钮、协议和点击逻辑。采用此方案。
|
|
3. 直接将 412 × 915 图整页铺底：会破坏响应式与交互，且违背 A01 的既有实现约束，禁止。
|
|
|
|
## 视觉组件与所有权
|
|
|
|
| 组件 | 唯一来源 | 页面使用方式 |
|
|
| --- | --- | --- |
|
|
| 红头与谱印 | 参考图顶部 412 × 139 区域 | `auth-header-reference-v2.png` 作为独立头图；移除额外谱印叠层 |
|
|
| 宣纸场景 | 参考图正文的建筑、竹影、山水，清除前景控件后形成独立场景层 | `auth-ink-scenery-v2.png` 覆盖正文，不含标题、按钮或协议文案 |
|
|
| 品牌标题及两侧祥云 | 参考图的标题装饰 | 可缩放透明 PNG，保留原有墨褐字形和古金云纹；不依赖运行环境字体 |
|
|
| 分隔中结 | 参考图上下分隔线的中心云结 | 单独透明 PNG，保留 CSS 细线 |
|
|
| 两类按钮边框 | 参考图中对应按钮的边缘、双描线与四角卷纹 | 主/次按钮各一张透明边框 PNG，按钮底色、图标、文字和点击仍为 DOM |
|
|
|
|
原有 `auth-button-corner-v1.png`、`auth-divider-knot-v1.png`、`auth-title-cloud-v1.png` 是不符合参考图的泛生成资产；本次完成后不得再由 A01 引用。
|
|
|
|
## 布局与交互
|
|
|
|
- 保留已接近参考图的固定纵向锚点：红头 139px、标题区起点、两按钮间距、注册入口和协议行位置。
|
|
- 标题采用参考字形素材，按钮文字及协议文案保持可读、可点击的 DOM 文本。
|
|
- 协议复选框与文案继续为单一水平行，保留现有未同意拦截和 `agreed=1` 跳转。
|
|
- 在窄屏时维持纵向滚动和安全区；所有新图层按页面宽度缩放，不写死页面宽度。
|
|
|
|
## 验收与测试
|
|
|
|
1. 先更新 A01 合同测试，要求 v2 素材被引用，并明确拒绝 v1 泛生成装饰；运行测试确认失败。
|
|
2. 生成或拆分 v2 素材，校验 PNG 尺寸、透明边角和可见像素；更新 `entry.vue` 后使合同与编译审计通过。
|
|
3. 在 HBuilderX/Android 获取无浏览器边框的 412 × 915 截图：检查红头底部瓦当、场景位置、标题比例、两个按钮边框与协议行。
|
|
4. 复核 320 × 568 可滚动性和协议安全区；未获得两张运行图不得宣称视觉验收通过。
|
|
|
|
## 范围外
|
|
|
|
- A02 及后续认证页面、真实登录、接口、Android 打包配置。
|
|
- 整页设计图铺底、未授权的字体下载、与本次视觉差异无关的组件重构。
|