rain
70 lines
3.8 KiB
Markdown
70 lines
3.8 KiB
Markdown
# D1 安卓视觉地基规范
|
||
|
||
> 状态：P-00 实施中。
|
||
> 本文件是 Android 页面视觉、资产与公共组件的唯一施工规范；与历史设计记录冲突时，以本文件和用户最新确认优先。
|
||
|
||
## 1. 冻结视觉锚点
|
||
|
||
- A01 启动／登录引导：`screens/A01-启动登录引导-栅格验收-412x915.png`
|
||
- G01 我的家谱：`screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png`
|
||
|
||
两页已获用户验收。P-00 可以重整文件、组件和资产路径，但在 412 × 915 下不得改变两页可见布局、色彩、纹样、按钮或背景组合。
|
||
|
||
## 2. 视觉语言
|
||
|
||
| 元素 | 规则 |
|
||
| --- | --- |
|
||
| 页面基调 | 暖宣纸、朱砂、古金、墨褐、淡墨山水／竹影；禁止绿色页面背景。 |
|
||
| 文字 | 标题与重要文字用楷体语气；正文首先保证 Android 小屏可读性。 |
|
||
| 主操作 | 朱砂完整按钮图片，含自身纹理、边框与四角；不可由 CSS 色块和零散图片拼装。 |
|
||
| 次操作 | 纸白完整按钮图片，含自身金边、四角与纹理；不可借用主按钮角标。 |
|
||
| 页面背景 | 使用完整不透明纸纹／页头／面板图片，必要时可叠加透明山水或竹影 PNG；不能使用截图拼接。 |
|
||
| 装饰 | 云纹、谱印、分隔纹、图标、边框均为透明 PNG；不使用 CSS／SVG 临时绘制。 |
|
||
|
||
## 3. 资产分类与目录
|
||
|
||
所有最终资产放在 `static/assets/`，路径必须表达所属范围、背景属性和语义：
|
||
|
||
```text
|
||
static/assets/
|
||
foundation/
|
||
opaque/ # 自带底色／纹理：纸纹、页头、完整按钮、卡片、导航
|
||
transparent/ # 透明 PNG：Logo、图标、云纹、边框、分隔纹
|
||
modules/
|
||
genealogy/
|
||
opaque/
|
||
transparent/
|
||
tree/
|
||
opaque/
|
||
transparent/
|
||
family/
|
||
opaque/
|
||
transparent/
|
||
```
|
||
|
||
- `opaque` 资产不能依赖页面 CSS 背景色才显示完整外观。
|
||
- `transparent` 资产必须是 RGBA PNG；其使用位置要在资产清单中写明宿主不透明底图。
|
||
- 每项资产都在 P00 清单中登记用途、显示尺寸、引用组件、引用页面和保留／删除状态。
|
||
- 不再创建长期使用的 `-v1`、`-v2`、`-source`、`-copy` 文件；同一语义只保留一个已验收版本。
|
||
|
||
## 4. 页面与组件
|
||
|
||
- 页面文件：`<页面编号>-<语义名>.vue`；没有确认页面编号的临时骨架要标明 `skeleton`，不能伪装成完成页面。
|
||
- 公共组件只收纳已被两个或以上确认页面使用的稳定结构：页面纸纹壳、顶部栏、底部导航、完整图片按钮、完整图片卡片、状态容器。
|
||
- 页面与组件开头写中文用途注释；模板按背景、页头、主体、操作、状态分段；资产图层和复杂交互写中文约束说明。
|
||
- CSS 只负责布局、尺寸、文字、可见／隐藏与交互状态；不能再用 CSS 绘制边角、金线、云纹、分隔结、纸纹、按钮或卡片外观。
|
||
|
||
## 5. Android 约束
|
||
|
||
- 核验尺寸：320 × 568、360 × 640、360 × 800、412 × 915。
|
||
- 正文不小于 24rpx；主操作最小高度 88rpx；可点击区不小于约 44dp。
|
||
- 使用 Flex、边距和基础布局；不依赖 CSS Grid、`flex gap`、复杂滤镜、大面积动画或全屏截图背景。
|
||
- 顶部和底部预留状态栏、三键／手势导航安全区；固定底栏不得遮挡页面操作。
|
||
|
||
## 6. 验收和代码纪律
|
||
|
||
- 资产先验收，页面后验收；资产不通过不进入页面。
|
||
- 所有页面只实现明确设计与交互；不增加推测性的 JS、接口、依赖、变量、方法和分支。
|
||
- 每次结构迁移必须同时更新页面路径、`pages.json`、跳转、测试和文档；旧路径确认无引用后立即删除。
|
||
- 每次完成后执行受影响审计、编译检查与 `git diff --check`；A01、G01 还需做截图回归。
|