Files
jiapuapp/docs/design/A01_启动登录引导_设计记录.md
T
2026-07-13 14:47:28 +08:00

64 lines
7.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# A-01 启动 / 登录引导设计记录
> 状态:A-01 文字注册入口方案、四尺寸静态验收与本地 UI 已完成;A-02 双标签本地 UI 已完成。协议页去向、A-03 至 A-06 的设计、认证接口与 Android 运行时验收仍未完成,D2 继续进行中。
>
> 本页设计事实的唯一归档位置为本文件。旧的 `2026-07-13-a01-login-guide-design.md` 与 `2026-07-13-a01-login-guide.md` 仅保留为失效历史,不可作为实现或推进下一页的依据。
## 1. 已归档的美术锚点
- 文件:[`screens/A01-启动登录引导-效果稿-v1-显式协议.png`](screens/A01-启动登录引导-效果稿-v1-显式协议.png)
- 效果稿 v2[`screens/A01-启动登录引导-效果稿-v2-独立注册.png`](screens/A01-启动登录引导-效果稿-v2-独立注册.png),记录此前“四个独立按钮”的尝试;该入口结构已失效,不作当前方案依据。
- 当前效果稿 v3[`screens/A01-启动登录引导-效果稿-v3-文字注册入口.png`](screens/A01-启动登录引导-效果稿-v3-文字注册入口.png),体现本记录第 2 节的当前入口层级,也是 `pages/auth/entry.vue` 的运行时视觉源;不得再用 CSS 重画其中的家祠、云纹、标题、按钮框与山水。
- 用途:保留本轮已确认的“家祠卷轴”欢迎页美术方向,不作为可直接还原的代码布局图,也不作为功能图标资产。
- 画面方向:朱砂家祠红头、暖宣纸主体、古金细线与云纹、墨褐标题、两侧淡墨建筑/竹影与底部山水。登录欢迎页后续必须使用独立的红头/宣纸背景组合,不复用 G01 的列表页大山水底图。
## 2. 已确认的页面结构与交互
- 标题区保留“家谱 / 为家族留存可传承的记忆”,使用美术锚点中的朱砂家祠红头、暖宣纸、古金云纹、墨褐文字与淡墨建筑/竹影层次。
- 操作区只保留两个大按钮和一个文字入口:朱砂主按钮“登录”、古金描边按钮“微信登录”,以及其下方的“还没有账号?注册账号”。“注册账号”仅为朱砂红可点击文字,不再作为独立大按钮。
- 入口顺序:登录为主入口;微信登录为次入口;注册账号为辅助文字入口。
- 已勾选协议后,“登录”前往 `A-02`,且 `A-02` 内固定使用“账号密码登录 / 手机验证码登录”双标签切换,默认显示账号密码登录。微信授权中、取消与失败回跳状态仍归 `A-03`,在 A-03 设计完成前当前入口只提示“微信登录功能准备中”。
- 注册账号入口仍归 `A-04`;忘记密码仍归 `A-05`。这两页完成设计前,当前入口只提示页面准备中,不伪造跳转。
- 协议必须为用户主动勾选:初始未勾选,可分别打开《家谱用户协议》和《隐私政策》。不得使用“登录即表示同意”或任何默认同意文案;未勾选时登录操作应明确提示用户先确认协议。
## 3. 固定布局与状态边界
- 页面采用纵向滚动;`320 × 568` 下两个按钮、注册文字和协议行可以滚动,但任一按钮文字、注册文字、协议行和底部内容不得被系统导航区遮挡。
- A-01 的登录与微信功能图标均需采用独立本地透明 PNG;微信标志只使用官方或许可来源的原色透明 PNG,不自行重绘或改色。账号密码与手机号验证码的表单图标归 A-02 设计时确定。
- A-01 只设计欢迎、入口与协议未勾选提示。账号密码与手机号验证码表单均归 `A-02`,微信授权结果归 `A-03`,注册归 `A-04`,忘记密码归 `A-05`
- A-01 正常态必须展示两个按钮、注册文字入口和未勾选协议;点击任一需要授权的入口但未勾选协议时,仅提示“请先阅读并同意相关协议”,不视为用户已同意。
- 固定设计画布为 `750rpx` 宽。v3 原图尺寸为 `852 × 1846px`,运行时按宽度等比显示为 `750 × 1625rpx`;原图中的朱砂家祠、标题、按钮、注册文字、协议行和山水留白均为不可拆分的可见视觉层。
- 运行时只在 v3 对应位置叠加不可见热区:登录、微信登录、注册文字、协议勾选和协议文字。主按钮文案固定为“登录”,不得再替换为“账号密码登录”。
- 320 × 568 时页面允许纵向滚动;不可使用根容器 `overflow: hidden` 截断 v3 底部协议行或系统安全区。
- 仅作静态设计验证,不代表 uni-app 运行时验收;页面实现后仍须在 Android 320 × 568、360 × 640、360 × 800、412 × 915 上重新验收。
| 状态 | 触发 | A-01 可见结果 | 去向 |
| --- | --- | --- | --- |
| 初始未勾选 | 首次进入 | 两个按钮、注册文字与空复选框 | 留在 A-01 |
| 未同意协议 | 点击登录、微信登录或注册账号 | 提示“请先阅读并同意相关协议”,不跳转、不改变勾选状态 | 留在 A-01 |
| 登录已确认协议 | 点击“登录” | 结束 A-01 引导 | A-02,默认账号密码登录标签 |
| 微信已确认协议 | 点击“微信登录” | 提示“微信登录功能准备中” | 留在 A-01,等待 A-03 设计完成 |
| 注册已确认协议 | 点击“注册账号”文字 | 提示“注册页面准备中” | 留在 A-01,等待 A-04 设计完成 |
### A-01 资产清单
| 资产 | 用途 | 来源或生成提示 | 尺寸与验收 |
| --- | --- | --- | --- |
| `docs/design/screens/A01-启动登录引导-效果稿-v3-文字注册入口.png` | A-01 当前完整可见视觉源 | 已归档并由用户确认的 v3 效果稿;页面通过本地导入按宽度等比显示 | `852 × 1846px` PNG;当前 A-01 必须直接使用,不重绘拆分元素 |
| `static/assets/backgrounds/auth-ancestral-header-v1.png``auth-rice-paper-v1.jpg``auth-ink-scenery-v1.png` | 先前手工分层方案的保留资产 | 2026-07-13 内置图像生成 | 不删除;当前 A-01 不消费,后续页面若使用须另行设计确认 |
| `static/assets/icons/auth/login-outline-v1.png``static/assets/icons/auth/wechat-licensed-v1.png` | 先前手工按钮方案的保留图标 | 登录图标复用项目既有资产;微信图标来源与许可见旧记录 | 不删除;当前 A-01 的图标已包含在 v3 视觉源内;若后续单独使用微信图标,仍须保留 Icons8 署名链接 |
## 4. 静态设计验收与剩余缺口
- 静态设计验收已覆盖 320 × 568、360 × 640、360 × 800、412 × 915;四个尺寸均保持两个大按钮与单行文字注册入口。A-01 本地页的可见层以当前效果稿 v3 直接显示,防止运行时重新拼装后偏离该验收画面。
- 归档文件:[320 × 568](screens/A01-启动登录引导-栅格验收-320x568.png)、[360 × 640](screens/A01-启动登录引导-栅格验收-360x640.png)、[360 × 800](screens/A01-启动登录引导-栅格验收-360x800.png)、[412 × 915](screens/A01-启动登录引导-栅格验收-412x915.png)。
- 此结论只验证设计稿与固定栅格,不替代 uni-app 页面实现后的 Android 运行时验收。
- 仍未确定《家谱用户协议》与《隐私政策》的最终页面去向及返回路径;在这两页完成设计前,A-01 不得标记为完整设计完成。
- 页面实现阶段仍须按本记录在 Android 实机或同等运行环境复核四个尺寸的安全区、滚动与文字折行。
## 5. 推进约束
- `A-01``A-02` 的本地 UI 已按本记录及实现合同落地;A-02 的最终效果稿与 Android 运行时验收仍待补齐,不能据此推进 A-03。
- 只有确定协议页面的最终去向,并完成本文件第 4 节所述的运行时验收后,A-01 才能进入“设计完成”状态。
- 用户已于 2026-07-13 授权落地 A-01 欢迎入口与 A-02 双标签登录页的本地 UI;仍不接接口、不执行真实登录、不改 Android 打包配置。实现细节的唯一所有者见 `docs/superpowers/specs/2026-07-13-a01-a02-static-ui-implementation-design.md`