208 lines
13 KiB
Markdown
208 lines
13 KiB
Markdown
# 规划
|
||
|
||
> 电脑或 GPT 更换时，先阅读：[项目交接记录](交接记录.md)。
|
||
|
||
> 状态：执行中
|
||
> 建立日期：2026-07-11
|
||
> 唯一适用端：Android `uni-app`（HBuilderX 打包）
|
||
> 执行原则：**先完成全部页面设计，再开始逐页实现；每完成一项，立即在本文件勾选。**
|
||
|
||
## 1. 本轮边界
|
||
|
||
- 只做手机 Android 用户端；不做 iOS、H5、PC 管理端、后台管理端、官网。
|
||
- 范围覆盖思维导图中的 Android 用户端：登录、家谱、家族、消息、我的，以及必要的空白、加载、异常、权限状态。
|
||
- 现有 uni-app 页面与接口代码保留为临时功能骨架，但**不计入任何页面设计完成项**，也不再决定最终视觉样式。
|
||
- 在“设计验收”完成前，暂停新增业务接口、真实账号联调和打包工作。
|
||
- 接口暂未提供的视频、邀请码、多管理员分级等功能：本轮可完成其页面视觉和无数据状态；真实功能接入留到接口阶段。
|
||
|
||
## 2. 视觉方向（已确定）
|
||
|
||
### 2.1 风格名称
|
||
|
||
**家祠卷轴**：喜庆而庄重。以宣纸的温度承载家族记忆，以朱砂表达礼序和重要操作，以古金表达传承；避免网红化、过度卡片化和大面积高饱和红色。
|
||
|
||
### 2.2 颜色与材质
|
||
|
||
| 用途 | 色彩 | 规则 |
|
||
| --- | --- | --- |
|
||
| 页面底色 | 宣纸暖白 `#F6F0E5` | 不使用绿色背景。 |
|
||
| 主操作 / 选中 | 朱砂 `#A33B2B` | 仅用于主按钮、当前状态、关键提醒。 |
|
||
| 标题 / 主要文字 | 墨褐 `#342A24` | 不使用偏绿的深色。 |
|
||
| 细分隔 / 装饰 | 古金 `#B58A4B` | 只做细线、印记、等级，不做大色块。 |
|
||
| 容器 | 纸白 `#FFF9EE` | 用轻边线或极浅阴影分层。 |
|
||
| 次级文字 | 暖灰褐 `#7A6958` | 保持正文可读性。 |
|
||
|
||
### 2.3 固定组件规则
|
||
|
||
- 顶部为简洁的家祠题签式标题栏；可回退页面保留清晰返回区，不能让装饰挤压标题。
|
||
- 底部导航固定为“家谱 / 家族 / 我的”，通知作为右上角入口，不单独占 Tab。
|
||
- 家谱树中的人物使用竖式人物牌位；姓名、字辈、关系与在世状态层次清楚，不能用装饰遮挡信息。
|
||
- 所有功能图标均使用透明背景 PNG，统一由 `static/icons/` 管理；不用网络图标字体，不混用不同画风。
|
||
- 图片内容优先使用用户上传的真实照片；没有照片时使用统一的纸纹占位图，不使用 AI 人像。
|
||
|
||
## 3. Android 老机型与小屏兼容（必须验收）
|
||
|
||
### 3.1 尺寸与排版
|
||
|
||
- 以 `320 × 568`、`360 × 640` 为关键小屏；`360 × 800`、`412 × 915` 为常规屏进行核对。
|
||
- 布局使用流式纵向滚动；不以单一固定页面高度承载内容，不让底部按钮压住表单。
|
||
- 一行中可能出现长姓名、长家谱名、长地址时必须截断或换行，不允许文字重叠。
|
||
- 关键正文不小于 `24rpx`，主要按钮高度不小于 `88rpx`，所有可点击区域不小于约 `44dp`。
|
||
- 双列内容在 `320px` 宽度下自动折为单列；人物树、照片墙等横向内容提供明确的横向滚动区域与边缘提示。
|
||
- 顶部、底部均预留系统状态栏和 Android 三键/手势导航空间；无安全区能力的设备也要有保底内边距。
|
||
|
||
### 3.2 性能与技术限制
|
||
|
||
- 不使用全屏大尺寸背景图、视频背景、复杂滤镜、毛玻璃和持续动画。
|
||
- 不依赖 `flex gap`、复杂 CSS Grid 或只在新 WebView 支持的视觉效果；以 Flex、边距和基础圆角为主。
|
||
- 首屏图标为小尺寸透明 PNG；列表图片按缩略图加载，避免一次性渲染大量高清图。
|
||
- 家谱树按层级或视区呈现，不在低端机一次渲染无边界的全部成员节点。
|
||
- 表单、弹窗、图片预览都要可关闭、可返回，并在键盘弹起时保持提交按钮可见。
|
||
|
||
### 3.3 兼容验收方式
|
||
|
||
- 每个页面设计完成后，先按 `320 × 568` 检查：标题、长文案、表单、底部操作、横向内容五项均不得重叠。
|
||
- 全部页面实现后，以 Android 真机或模拟器覆盖上述四组尺寸，记录在本文件“最终验收”中。
|
||
- 这里的“兼容”指页面尺寸、性能和交互可用性；具体最低 Android 系统版本在最终 HBuilderX 打包配置阶段按实际 SDK 再确认。
|
||
|
||
## 4. 页面设计的完成标准
|
||
|
||
一页只有同时满足以下四项，才能标记为“设计完成”：
|
||
|
||
1. 有明确的正常态布局、字体层级、颜色、图标、间距与操作层级。
|
||
2. 有该页需要的空数据、加载、失败、无权限或审核中状态。
|
||
3. 标明每个主要点击入口的去向、返回路径和确认操作。
|
||
4. 已按 `320 × 568` 小屏规则检查，无重叠、无被底部导航遮挡的内容。
|
||
|
||
## 5. 全量页面清单与完成状态
|
||
|
||
### 5.1 设计基础与通用状态
|
||
|
||
- [x] P-00 锁定 Android 端范围、家祠卷轴视觉方向与透明 PNG 图标规则。
|
||
- [x] P-01 锁定老机型 / 小屏适配原则与验收尺寸。
|
||
- [x] P-02 设计系统：颜色、字号、间距、圆角、按钮、标签、列表、表单、弹窗、空状态。见 [D1 安卓视觉规范与页面壳](design/D1_安卓视觉规范与页面壳.md)。
|
||
- [x] P-03 公共页面壳：顶部题签、返回栏、三 Tab、右上角通知入口、安全区与底部操作栏。见 [D1 安卓视觉规范与页面壳](design/D1_安卓视觉规范与页面壳.md)。
|
||
- [x] P-04 通用状态：首次加载、列表加载、网络失败、空数据、无权限、审核中、删除确认、操作成功提示。见 [D1 安卓视觉规范与页面壳](design/D1_安卓视觉规范与页面壳.md)。
|
||
- [ ] P-05 生成并验收项目 Logo、导航、通知与公共操作的透明 PNG 图标资产。见 [D1 安卓视觉规范与页面壳](design/D1_安卓视觉规范与页面壳.md)。
|
||
- [ ] P-06 生成并验收祠堂红头、宣纸纸纹、山水 / 竹影等项目内背景资产。见 [D1 安卓视觉规范与页面壳](design/D1_安卓视觉规范与页面壳.md)。
|
||
|
||
### 5.2 账户与首次使用
|
||
|
||
- [ ] A-01 启动 / 登录引导页。
|
||
- [ ] A-02 账号密码登录页。
|
||
- [ ] A-03 手机验证码登录页。
|
||
- [ ] A-04 注册页与服务协议确认。
|
||
- [ ] A-05 忘记密码 / 重设密码页。
|
||
- [ ] A-06 账号受限、登录失败与未完成注册状态。
|
||
|
||
### 5.3 家谱：创建、加入与管理入口
|
||
|
||
- [x] G-01 信息层级与谱印施工：元信息图标、谱印框、快捷入口、列表双层信息和新建云纹已实现并通过资产/编译审计；待 HBuilderX 同尺寸截图验收，故完整 G-01 仍未勾选。
|
||
- [ ] G-01 我的家谱列表（已创建、已加入、搜索入口、通知入口）。
|
||
- [ ] G-02 无家谱空状态（创建家谱 / 搜索加入）。
|
||
- [ ] G-03 创建家谱表单（名称、地域、简介、公开范围）。
|
||
- [ ] G-04 创建成功后的始祖录入页。
|
||
- [ ] G-05 家谱总览（名称、编号、地域、成员数、管理员、公开状态、快捷入口）。
|
||
- [ ] G-06 公开家谱搜索与筛选页。
|
||
- [ ] G-07 家谱搜索结果与家谱简介页。
|
||
- [ ] G-08 申请加入表单、提交成功与审核中页。
|
||
- [ ] G-09 我的申请记录页。
|
||
- [ ] G-10 管理员申请审核列表与审核确认页。
|
||
- [ ] G-11 家谱设置、公开范围与成员访问说明页。
|
||
- [ ] G-12 字辈诗列表、详情与管理员维护页。
|
||
|
||
### 5.4 世系树、成员与亲属关系
|
||
|
||
- [ ] T-01 世系树总览（缩放、横向移动、分支切换、当前人物定位）。
|
||
- [ ] T-02 世系树小屏提示与无成员 / 数据加载失败状态。
|
||
- [ ] T-03 成员档案详情（基本资料、代际、关系、照片、人生记录入口）。
|
||
- [ ] T-04 新增直系亲属页（父母、配偶、子女的不同上下文）。
|
||
- [ ] T-05 编辑成员资料页。
|
||
- [ ] T-06 编辑亲属关系页与关系冲突提示。
|
||
- [ ] T-07 成员目录与搜索页。
|
||
- [ ] T-08 成员去世、隐私隐藏、无编辑权限等特殊状态。
|
||
|
||
### 5.5 家族：动态、谱文、相册与影像
|
||
|
||
- [ ] F-01 家族首页 / 家族动态流。
|
||
- [ ] F-02 发布动态页（文字、图片、可见范围）。
|
||
- [ ] F-03 动态详情、评论、点赞与删除确认页。
|
||
- [ ] F-04 谱文分类与文章列表页。
|
||
- [ ] F-05 谱文详情页。
|
||
- [ ] F-06 新建 / 编辑谱文页。
|
||
- [ ] F-07 相册列表页。
|
||
- [ ] F-08 相册详情与照片墙页。
|
||
- [ ] F-09 图片预览、上传照片与上传失败状态。
|
||
- [ ] F-10 视频列表、详情、发布入口与“接口尚未开放”状态。
|
||
|
||
### 5.6 家族：人物、礼仪与档案
|
||
|
||
- [ ] R-01 人物录列表页。
|
||
- [ ] R-02 人物录详情与新增 / 编辑页。
|
||
- [ ] R-03 贺礼列表页。
|
||
- [ ] R-04 新增贺礼、贺礼详情与删除确认页。
|
||
- [ ] R-05 礼仪活动列表（婚礼、升学、生日、其他）。
|
||
- [ ] R-06 礼仪详情页。
|
||
- [ ] R-07 新建 / 编辑礼仪活动页。
|
||
- [ ] R-08 成长日志列表、详情与新增 / 编辑页。
|
||
- [ ] R-09 人生事列表、详情与新增 / 编辑页。
|
||
- [ ] R-10 备忘录列表、详情与新增 / 编辑页。
|
||
- [ ] R-11 功德记录列表、详情与新增 / 编辑页。
|
||
|
||
### 5.7 消息与个人中心
|
||
|
||
- [ ] N-01 消息中心（生日、贺礼、礼仪、应用通知、点赞评论、推广反馈分类）。
|
||
- [ ] N-02 消息详情、已读状态与空消息状态。
|
||
- [ ] M-01 我的首页（头像、身份、所属家谱、快捷入口）。
|
||
- [ ] M-02 个人资料查看 / 编辑页。
|
||
- [ ] M-03 安全设置页。
|
||
- [ ] M-04 修改密码页。
|
||
- [ ] M-05 修改手机号页。
|
||
- [ ] M-06 帮助中心与搜索页。
|
||
- [ ] M-07 意见反馈页（文字、图片、联系方式）。
|
||
- [ ] M-08 应用推广页。
|
||
- [ ] M-09 VIP 权益、套餐与订单状态页。
|
||
- [ ] M-10 关于我们、服务协议、隐私政策与退出登录确认页。
|
||
|
||
## 6. 设计推进顺序（开发前必须全部完成）
|
||
|
||
| 阶段 | 交付内容 | 状态 |
|
||
| --- | --- | --- |
|
||
| D1 | P-02 至 P-06：统一设计系统、Android 页面壳、公共图标与背景资产 | 进行中（P-02 至 P-04 已完成；P-05、P-06 资产生成中） |
|
||
| D2 | A-01 至 A-06：账户与首次使用全套页面 | 未开始 |
|
||
| D3 | G-01 至 G-12：家谱创建、加入、总览与管理全套页面 | 进行中（G-01 视觉壳已施工，待 HBuilderX 小屏预览验收；其余页面未开始） |
|
||
| D4 | T-01 至 T-08：世系树、成员、关系编辑全套页面 | 未开始 |
|
||
| D5 | F-01 至 F-10、R-01 至 R-11：家族内容全套页面 | 未开始 |
|
||
| D6 | N-01 至 N-02、M-01 至 M-10：消息与个人中心全套页面 | 未开始 |
|
||
| D7 | 全量小屏复核、视觉一致性复核、页面流程复核 | 未开始 |
|
||
| D8 | 逐页实现 uni-app、接入接口、Android 打包验证 | 未开始（D7 完成后才可开始） |
|
||
|
||
## 7. 页面流转主线（设计时必须保持一致）
|
||
|
||
1. 登录 → 我的家谱为空 → 创建家谱 → 录入始祖 → 家谱总览 → 世系树 → 成员档案 / 新增亲属。
|
||
2. 登录 → 搜索公开家谱 → 查看简介 → 申请加入 → 审核中 → 管理员审核 → 进入家谱总览。
|
||
3. 家族 Tab → 动态 / 谱文 / 相册 / 人物录 / 礼仪 / 档案 → 详情 → 发布或编辑（取决于权限）。
|
||
4. 任一页面的通知入口 → 消息中心 → 相应业务详情。
|
||
5. 我的 → 个人资料 / 安全 / 帮助 / 反馈 / VIP / 关于与协议。
|
||
|
||
## 8. 本轮执行纪律
|
||
|
||
- 每次只推进一个设计阶段；阶段内的每个页面完成后，更新本文件对应复选框。
|
||
- 未有高保真设计和小屏检查的页面，不得开始其业务开发。
|
||
- 已确认的视觉规范是代码还原依据；若实现与设计不一致，以设计为准修正实现。
|
||
- 参考图是视觉锚点；核心材质、层级、比例、选中效果必须逐项一比一核对，不能只保留“红色中国风”的笼统印象。
|
||
- 设计稿不得保留无业务意义的横线、破折号或模拟字符；颜色差异必须有可见且明确的业务含义。
|
||
- 后续每一个页面新增的功能图标，必须同步生成、保存并验收透明 PNG 实体资产；未生成资产的页面不得标记为“设计完成”。
|
||
- 功能图标必须遵循线上成熟标准的 24dp 语义、留白、触控与选中规则，并导出为透明 PNG；项目可在此基础上保留已确认的古金双线、轻云纹收口等家祠风格。当前从大图裁切的试验资产不得引用，需按单图标标准重新导出后验收。
|
||
- 大部分按钮、顶部操作和快捷入口图标采用已确认的古金双线、轻云纹收口风格；底部 Tab 使用简洁同色系版本。每一页必须指定并使用已生成的背景资产组合，未完成背景设计的页面不得标记为“设计完成”。
|
||
- 全页 AI 生成图可作为页面的美术效果锚点，但不能单独作为布局验收依据；页面必须同时按固定 Android 栅格、真实数据、真实 PNG 资产制作。已生成的“我的家谱”效果图保留其朱砂、宣纸、题签、山水和庄重层级，留白、Logo、占位文案与图标标准问题按设计栅格修正后才可计入完成项。
|
||
- 新增需求先写入本文件，再决定是否纳入本轮，避免在页面开发中临时扩张范围。
|
||
|
||
## 9. 最终验收（暂未开始）
|
||
|
||
- [ ] 所有 P / A / G / T / F / R / N / M 页面均有设计完成标记。
|
||
- [ ] 全部设计在 `320 × 568` 下无内容重叠、无遮挡、无不可点操作。
|
||
- [ ] 所有图标均为透明背景 PNG，且无绿色页面背景。
|
||
- [ ] 页面风格与“家祠卷轴”设计一致，代码页面与确认设计逐屏比对通过。
|
||
- [ ] 全量页面设计确认后，才解锁 uni-app 实现、接口联调和 Android 打包。
|