jiapuapp/docs/design/2026-07-13-A01-G01-A02-视觉审视.md

A01、G01 与 A02 视觉审视

日期：2026-07-13
方法：通过用户授权的 Chrome 调试端口捕获真实 360 × 800 页面画面，并逐张检查。
范围：只审视 A01、G01 两张已验收基准页与 A02 当前登录页；本记录不是用户最终验收。

1. 截图证据

页面	状态	截图
A01 启动／登录引导	用户已验收的认证基准	screens/runtime/2026-07-13/A01-360x800.png
G01 我的家谱	用户已验收的家谱基准	screens/runtime/2026-07-13/G01-360x800.png
A02 账号登录	当前实现，未验收	screens/runtime/2026-07-13/A02-before-360x800.png

2. A01、G01 共同的可继承规则

1. 完整资产承担外观。 朱砂页头、纸纹、主／次按钮、题签框、谱印框、云纹和分区线都有明确的图片资产；文字与交互位于图片之上。
2. 一屏只有一个视觉主角。 A01 是“家谱”标题与两枚操作按钮；G01 是当前家谱题签。其余山水、竹影和金线只托住主角。
3. 信息层级有节奏。 大号楷体标题、常规正文、弱化元信息分明；每一段间保留足够纸面，不把内容挤成普通管理表单。
4. 朱砂只表达关键动作或当前状态。 A01 的登录、G01 的当前谱印与选中 Tab 使用朱砂；古金负责边框、图标和分隔。
5. 同一类元素使用同一套成品。 A01 两枚按钮保持一致比例；G01 的当前题签、列表题签、谱印、快捷图标和底部导航形成连续的组件语言。
6. 背景不抢任务。 纸纹先提供可读底色，淡墨山水只落在空白和底部，不能穿过输入区或元信息。

3. A02 当前状态

可保留项

• 已有 A01 同源的纸纹、祠堂页头、谱印、淡墨背景和朱砂按钮皮肤。
• 账号密码／手机验证码双 Tab、真实 input、忘记密码入口、协议判断与 A05 跳转仍应保留。
• 360 × 800 下页面没有横向裁切，主按钮可见。

必须解决的可见问题

1. 登录面板是普通的细金线矩形。 它没有完整纸面、双线、角纹或题签结构，和 A01 的完整按钮、G01 的完整谱签不属于同一视觉系统。
2. 卡片内容过小且过密。 标题、双 Tab、标签、占位文本、忘记密码与协议提示都落在一张矮卡内，用户进入后感受到的是“填写控件”，不是“进入家谱”。
3. 按钮比例被压扁。 当前主按钮使用约 4.49:1 的 A01 皮肤，却放入更扁的容器，边角和纹样失去端正的卷轴比例。
4. 标题装饰没有成为层级。 单侧云纹和细小返回符号像零散点缀，无法支撑“登录家谱”作为当前任务标题。
5. 底部留白失衡。 表单卡结束后到山水背景之间有大块无任务留白，而面板内部反而拥挤；需要把留白放在卡片外、把可读空间还给表单。

4. A02 设计决策

• 继续使用“家祠卷轴 · 庄重留白”，不另起现代渐变、玻璃卡片或圆角后台表单画风。
• 认证头部与 A01 使用同一祠堂高度和谱印位置；头部以下先给清楚的“登录家谱”题签标题，再给完整不透明的认证面板资产。
• 认证面板只承载 Tab、输入、忘记密码与协议说明；面板自身纸纹、金边和角纹由一张完整不透明 PNG 提供。
• 主按钮只能按完整皮肤原比例显示；空间不足时缩小宽度或增加高度，不能纵向压缩图片。
• 淡墨山水放到卡片结束后的留白与底部，作为收束，不穿过输入行。

5. 可见性与无障碍风险

• A02 的弱提示和协议文字在 360 × 800 下偏小，后续实现要保证正文至少 24rpx，主要点击区至少约 44dp。
• 截图不能证明键盘焦点、读屏标签、错误提示朗读和真实 Android 字体回退；实施后仍需在 HBuilderX/Android 复核。
• 本次只验证了正常态，没有验证输入错误、验证码倒计时或网络失败态；这些状态保持现有功能边界，不在本轮扩展接口。

6. 下一步

先为 A02 建立完整认证面板和正确比例按钮的资产合同，再做 A02 四尺寸前后对比；用户确认 A02 后，才将它作为 A03–A05 的认证样板。