jiapuapp/docs/design/D1_安卓视觉规范与页面壳.md

D1：安卓视觉规范与页面壳

对应《规划》：P-02、P-03、P-04
适用范围：Android 手机端全部页面
设计锚点：用户提供的“汤氏家谱世系图”参考图

1. 设计锚点与不可偏离项

参考图不是只借用“红色”，而是整套视觉语言的依据。后续每一页必须具备以下共性：

1. 家祠红头图：核心家谱页面使用朱砂红顶部，左侧为低对比古建筑线描，标题使用金色或暖白色。
2. 宣纸正文区：主内容始终落在暖白纸面上，背景只允许极浅的山峦、竹影、亭台或纸纤维纹理，不能影响文字阅读。
3. 墨字与古金线：正文使用墨褐色，分隔、牌位、题签和次级结构使用古金细线。
4. 礼制化状态：当前选中、重要操作与未读提醒使用朱砂；不可用荧光色、大面积渐变或通用蓝色按钮替代。
5. 牌位不是卡片：世系树、人物录核心信息使用竖式牌位；其他列表保留纸签和金线的秩序感，不能变成白底大圆角信息卡。

1.1 一比一还原的验收定义

“一比一”指以参考图为唯一视觉锚点，不能只借用红色后另行发挥。以 360 × 800dp 设计画布验收时，必须同时还原：朱砂红头的高度与留白、祠堂线描的位置和低对比度、金色标题比例、宣纸与山水底纹、古金牌位线框、朱砂选中描边、纸面底部抽屉与底部导航的层级效果。

不同业务页的内容结构可以不同，但不能把世系图页面原样复制到每个页面；它们必须在同一套材质、颜色、字体、线框和动效逻辑中变化。为适配 320 × 568 等小屏，元素可流式换行或缩放，不得为追求固定像素而造成重叠或不可点击。

每张后续设计稿都要和参考图并排核对上述八项；没有通过核对，不能标为设计完成。

2. Android 基础尺寸

设计坐标以 750rpx 宽度为基准。实现时允许流式收缩，但不得缩小关键点击区。

元素	设计值	小屏规则
页面左右安全边距	32rpx	320px 小屏可缩至 24rpx。
页面标题	34rpx	不换成两行；长标题使用省略号。
主标题	48rpx	家谱名最大两行，超出截断。
正文	28rpx	不低于 24rpx。
辅助文字	24rpx	仅用于时间、状态、说明。
主按钮高度	88rpx	最小点击高度，不因小屏减小。
图标触控框	88rpx × 88rpx	图标视觉大小可为 40–48rpx。
列表行高度	104rpx 起	多行信息自动增高。
底部操作栏	128rpx 起	加系统导航保底内边距。

3. 色彩、字体与图标

3.1 色彩

Token	色值	使用位置
paper-page	#F6F0E5	页面整体纸底。
paper-surface	#FFF9EE	抽屉、表单、列表承载面。
cinnabar	#A33B2B	主操作、选中描边、徽章。
cinnabar-deep	#7E251C	顶部红底的层次和按下态。
ink	#342A24	标题、主正文。
ink-muted	#7A6958	次级正文、时间。
antique-gold	#B58A4B	牌位描边、细分割线、装饰。
gold-soft	#E4D4B8	弱分割线、未选中轮廓。
danger	#B63A2C	删除、审核拒绝；不额外引入鲜红。

绿色不进入页面的背景、导航、主按钮或状态色。若用户照片中含绿色，保持原图，不再叠加绿色 UI 元素。

3.2 字体

• 页面标题、家谱名、人物姓名：系统衬线回退链 serif；仅用于短标题和牌位姓名，体现家谱的书卷感。
• 正文、表单、数字、按钮：Android 系统无衬线字体 sans-serif；优先保证低版本设备的字形和行高稳定。
• 不下载网络字体，不依赖单一厂商字体，不用细于常规字重的中文字体。
• 姓名为两至四字时居中竖排；超过四字改为横排或两行，禁止压缩字距造成难读。

3.3 透明 PNG 图标规范

• 图标文件一律是 RGBA PNG，四角透明；不把乳白或绿色底色烘焙进图标。
• 功能图标以官方 24dp × 24dp 视口为唯一留白标准，导出为 96 × 96px（4 倍）透明 PNG；不得再从大幅生成图中裁出图标、不得人为叠加 25% 以上的额外空白。图标的边距只保留官方图形本身的标准边距。
• 正常态使用墨褐或古金单色；选中态使用朱砂；不使用渐变、投影或多色填充。
• 图标命名采用 功能-状态.png，例如 tree-active.png、notice-default.png、profile-active.png。
• 首批需要的图标：返回、搜索、更多、通知、家谱、家族、我的、世系图、列表、编辑、新增、相册、礼仪、消息、设置、关闭。

3.4 资产优先规则

• 所有具备明确动作或状态的元素必须使用透明 PNG 图标：导航、返回、搜索、通知、更多、关闭、编辑、新增、上传、相册、成员、世系、礼仪、设置、删除、分享、点赞、评论。
• 禁止使用 Emoji、Unicode 符号、临时文字（例如“返回”“更多”）替代功能图标；功能图标旁的文字仅用于解释，不承担唯一识别职责。
• 文字只保留在用户必须阅读或选择的内容上：页面标题、家谱名称、成员资料、表单标签、状态说明与按钮动作。
• 每一个图标必须有默认态与需要时的选中态；选中态仅改变为朱砂色，不改变图形轮廓，保证低端 Android 设备上也能一眼识别。
• 后续强制规则：任何后续页面设计中新增加的图标，必须同步生成对应的 RGBA 透明 PNG，保存到项目 static/assets/icons/ 后才能将该页面标记为“设计完成”。设计图中的图形、文字占位、Emoji 或系统默认图标均不能替代实际资产。
• 每个新增图标都要在资产清单登记：用途、文件路径、默认 / 选中状态、设计页编号和透明背景检查结果；页面实现只能引用清单中的已验收资产。

3.4.1 功能图标的标准骨架与视觉风格

• Android / Material 的在线规范用于锁定图标语义、24dp 视口、触控区、默认 / 选中状态和可识别性，不是要求本项目的每个图标都长成默认黑色 Material 图标。
• 项目 Logo、祠堂纹样、宣纸、山水竹影属于品牌与背景插画，可以定制生成；顶部和通用操作图标允许采用本项目的“古金双线 + 克制云纹收口”风格，风格锚点见 公共操作图标风格锚点。
• 自定义图标仍须保留标准语义：返回一眼识别为左箭头、搜索为放大镜、通知为铃铛、更多为三点、关闭为 X；不得因装饰而改变动作含义。
• 底部导航固定为三项且每项同时显示图标与短标签：家谱、家族、我的。现有 Tab 图标不通过验收，必须重设计为等视觉重量的简洁轮廓；不能出现云纹、枝叶和双层复杂装饰。选中项使用同一图形的朱砂色与填充 / 加粗状态，非选中项用墨褐或古金描边。
• 顶部与通用操作采用标准语义：返回、搜索、通知、更多、关闭、新增、编辑、上传、删除、分享、设置。图标可定制风格，但不以文字、Emoji 或难以识别的自造图形替代。

3.4.2 按钮图标风格分级

• 大部分按钮与顶部操作：返回、搜索、通知、更多、关闭、新增、编辑、上传、删除、分享、设置，以及家谱 / 家族模块中的快捷入口，采用“古金双线 + 轻云纹收口”风格。
• 主操作按钮：图标可置于“新建家谱、保存、发布、提交”等文字前；图标为古金双线简化版，按钮本身仍以朱砂描边或朱砂实底表达主次，不用纯文字按钮。
• 底部 Tab：不得直接使用复杂云纹版本；使用更简洁的同色系轮廓，优先保证 24dp 识别度和三个目的地的差异。
• 状态与危险操作：成功、失败、删除、无权限等不使用花纹干扰信息；保留标准清晰的符号，颜色按状态区分。

来源依据：Google Material Symbols 官方库提供适用于 Android 的 PNG / SVG 图标、FILL 状态轴和 20–48dp 光学尺寸；Android 官方将导航栏用于 3–5 个同等级目的地。项目以这些规则做底线，并在其上保留家祠卷轴的视觉个性。

3.5 图标资产清单与路径

所有最终资产均保存在 static/assets/icons/，由页面直接引用；不使用在线 URL。

资产组	文件	状态
项目标识	brand/jiapu-seal-logo.png	自定义生成，待缩小尺寸验收
顶部操作	common/back.png、common/search.png、common/notice.png、common/more.png、common/close.png	保留已确认的古金双线风格，待逐个紧凑导出
底部导航	tab/genealogy.png、tab/family.png、tab/profile.png 及各自 -active.png	待按标准 24dp 语义重绘为简洁同风格版本
家谱操作	genealogy/tree.png、members.png、generation-poem.png、application.png、create.png、edit.png	页面设计时按 Material Symbols 官方源导出
家族内容	family/feed.png、article.png、album.png、ceremony.png、gift.png、archive.png	页面设计时按 Material Symbols 官方源导出
通用操作	action/add.png、upload.png、delete.png、share.png、like.png、comment.png、setting.png	待按古金双线风格逐个紧凑导出

3.5 已否决的资产（不得引用）

static/assets/icons/common/、static/assets/icons/tab/、static/assets/icons/action/ 当前是从大幅绿色底图裁切的原始试验文件，仍不得直接引用。其问题是画布和缩放方式，不是用户已确认的顶部操作图标美术方向。

根因记录：这些文件来自带大块绿色空白的 3 × 2 AI 图稿，再按格子裁切；生成图没有稳定的标准视口，导致图标周围出现过多空白、主体大小不一致。顶部操作图标的古金双线与轻云纹风格保留；Tab 图标的复杂枝叶、过多装饰和不统一轮廓不保留。

新生产方式：每个图标单独制作并紧凑导出到 96px PNG，实际图形占官方 24dp 视口的正常范围；不得再批量盲裁。顶部 / 操作图标以风格锚点为准，Tab 按简洁语义重新制作。每个文件在 46rpx 实际显示尺寸检查后才可引用。

3.6 功能图标验收

功能图标只有同时满足以下条件，才可标记为“已生成”：

1. 语义、视口与状态符合 Google Material Symbols / Android 规范；若为本项目定制图标，记录其对应的标准语义与风格锚点。
2. 默认 / 选中态为同一语义符号，保持 24dp 标准画布与固定留白；不得改变动作含义来冒充选中态。
3. 项目内文件为 RGBA 透明 PNG，四角透明；默认墨褐、选中朱砂；在纸白底和红头上均满足清晰可见。
4. 在 46rpx Tab 显示尺寸及 320 × 568 小屏中检查可识别性、标签不换行、点击区不小于 88rpx。

3.7 背景资产规则

• 所有装饰性背景都必须生成并保存在项目 static/assets/backgrounds/；禁止依赖网络背景图，也不能只用临时 CSS 渐变假装纸纹。
• 背景分层使用：header-hall-lineart.png 用于朱砂顶部；paper-rice-texture.jpg 用于宣纸底；footer-mountain-bamboo.png 用于页面底部的淡山水竹影。页面按需组合，不把它们烘焙成一张全屏超大图。
• 祠堂线描、山水、竹影等叠加背景应使用透明 PNG；宣纸纸纹使用压缩后的 JPG。所有背景必须无文字、无 Logo、无人物、无绿色调。
• 为兼容老款 Android：顶部纹样显示尺寸不超过 750 × 288rpx，底部山水显示尺寸不超过 750 × 360rpx；背景只在首屏和固定区域加载，不在长列表中重复解码。
• 背景完成验收需检查：320 × 568 下不遮挡标题或操作、纸纹不影响文字对比度、图片已压缩到适合移动端的尺寸。
• 页面背景完成条件：每一个页面必须在其设计记录中写清“红头 / 纸纹 / 山水竹影 / 侧边竹影 / 无”的组合与对应资产路径；没有背景组合的页面不得标记为“设计完成”。背景可以复用基础资产，但不能是未设计的纯色空白页面或临时 CSS 渐变。

页面类型	必须使用的背景组合
家谱总览、世系树、成员档案	朱砂红头 + 祠堂线描 + 宣纸纸纹；底部或抽屉使用淡山水竹影。
家族动态、谱文、相册、礼仪、消息	紧凑朱砂题签 + 宣纸纸纹；内容尾部按需叠加竹影或山水。
创建、编辑、申请、设置、反馈	紧凑题签 + 宣纸纸纹；表单区域保持干净，不让山水压住输入内容。
登录、注册、找回密码	独立生成的红头 / 纸纹欢迎背景；不能直接复用列表页大山水。
无数据、失败、审核中	宣纸纸纹 + 对应低对比卷轴 / 印章背景资产；不能只显示文字。

背景资产	路径	用途	状态
祠堂线描	backgrounds/header-hall-lineart.png	家谱红头左侧或底部纹样	生成中
宣纸纸纹	backgrounds/paper-rice-texture.jpg	全局纸面底色	未生成
山水竹影	backgrounds/footer-mountain-bamboo.png	列表页、抽屉页底部装饰	未生成

4. 公共页面壳

4.1 核心家谱页面壳

适用于：家谱总览、世系图、成员目录、人物档案。

• 顶部 256–288rpx：朱砂红，左下放置低对比祠堂屋檐线描，禁止使用满屏建筑照片。
• 根页面左上角放项目 Logo（祠堂屋檐 + “谱”字印章，透明 PNG，视觉 40rpx、触控区 88rpx）；详情页该位置优先保留返回按钮，Logo 收入建筑纹样中的小印记。
• 搜索、通知、更多均为 88rpx 触控框；图标为暖白或金色线稿 PNG。通知铃铛仅在未读消息数大于 0 时显示朱砂小圆点；未读为 0 时不显示圆点和数字。
• 家谱名称位于视觉中心，最大两行；名称下可放地域或代系提示，但不能与图标重叠。
• 红头结束后立即进入纸面 Tab/分段导航，使用古金底线标记当前项。

4.2 普通列表与详情页面壳

适用于：家族动态、谱文、相册、人物录、礼仪、消息、我的。

• 顶部使用 144–176rpx 紧凑朱砂题签，保留建筑线描的局部纹样。
• 内容区采用纸白承载面与古金细分割线，列表项不使用夸张圆角；圆角最大 16rpx。
• 每页只保留一个视觉主操作：新增、发布、保存或提交。它固定在底部操作栏或右下角，不能同时出现两个醒目的红按钮。

4.3 表单与编辑页面壳

适用于：创建家谱、录入始祖、申请加入、发布内容、编辑成员、反馈、设置。

• 顶部为紧凑题签，正文使用逐行纸签式表单，标签在左、输入值在右或下一行。
• 必填项用朱砂小印记表示；校验说明用暖灰褐，不使用大面积红色报错框。
• 键盘出现时页面可滚动，底部“保存 / 提交”保持可操作。

4.4 底部导航与抽屉

• 三 Tab：家谱、家族、我的。纸白底、顶部古金细线；当前图标和文字用朱砂，未选中用墨褐。
• 无底部 Tab 的详情页，底部保留返回区域或单主操作栏，不能出现空白黑条。
• 成员、相册、礼仪的详情采用半屏至全屏底部抽屉：纸白底、顶部金色短握条、右上关闭按钮、淡竹影或山影作为低对比装饰。

5. 核心组件规则

5.1 世系人物牌位

• 牌位为暖白底、古金双线边框、上下折角；不使用普通矩形卡片。
• 始祖牌位比同层成员高一级；当前选中人物外框换成朱砂双线，并使用小圆点连接标识。
• 牌内信息顺序：姓名 → 字 / 号 → 生卒或年份；信息不足时显示“生卒不详”，不留大段空白。
• 代际标签固定在树左侧，不随横向滚动丢失；横向树区域与底部档案抽屉互不遮挡。

5.2 纸签列表

• 左侧为功能图标或缩略图，中间为标题和两行信息，右侧是状态或箭头。
• 每行以古金细线分隔；红色仅用于“待审核”“未读”“进行中”等需要注意的状态。
• 长标题最多两行；日期、人数、地域等元信息单独一行，不与操作按钮抢空间。

5.3 主操作与次操作

• 主操作：朱砂描边或朱砂实底，圆角 44rpx 的胶囊形；文字白色或纸白。
• 次操作：纸白底、古金描边、墨褐文字。
• 删除和退出：先显示纸面确认抽屉，再允许使用 danger 色；不可直接用红色文字替代确认流程。

5.4 空状态与异常

• 空状态使用纸纹中的淡印章、卷轴、山影或未展开牌位，不使用卡通人物。
• 网络失败使用“纸页未送达”图标、明确重试按钮；不把错误码直接展示给用户。
• 审核中使用朱砂印章和预计提示；无权限使用合拢卷轴与申请/返回入口。

6. 首屏结构：家谱首页（G-01）

G-01 是所有设计页的公共还原样板，不等同于最终代码。

1. 顶部：朱砂祠堂红头，左侧项目 Logo，中央为“我的家谱”，右侧通知 PNG 图标；只有未读消息时才带朱砂小圆点。
2. 主区：当前家谱以横向家谱题签展示名称、地域、成员数和身份；这个题签的朱砂印章代表“当前选中的家谱”，不是另一种家谱颜色。没有家谱时替换为卷轴空状态。
3. 快捷区：世系图、成员、字辈诗、申请审核四项，使用透明 PNG 图标与古金分隔。
4. 家谱列表：明确分为“我创建的”和“我加入的”两个标题区；每项使用同一套纸签和古金线，不用红色 / 金色印章暗示未说明的身份差异。当前选中项可用朱砂细边标记。
5. 底部：三 Tab；主操作“创建家谱”在内容末尾或空状态中出现，避免遮挡 Tab。

6.1 G-01 数据文案规则

• 家谱名称后不得出现无意义横线、破折号、模拟字符或“待补充”占位。
• 有数据时按真实字段显示，例如“河南省 · 洛阳市”“158 位成员”“管理员”；无数据时整行隐藏，或显示明确的“地区待完善 / 成员待录入”。
• “当前家谱”与下方列表不得无说明地重复同一名称；当前题签显示选中的家谱，下方列表用于切换，选中项需要清晰标记。

6.2 G-01 固定设计栅格（360 × 800dp）

这是后续页面还原的硬尺寸基准，不再交给整页 AI 图自行猜测：

区域	尺寸 / 间距	约束
系统状态栏	24dp	只预留系统空间，不放页面内容。
家祠红头	112dp（含标题区）	Logo 左 16dp，标题居中，铃铛右 16dp；红头结束后不得出现大块空白。
当前家谱题签	顶距 16dp，高 136dp，左右 16dp	只展示当前家谱一次；名称、成员数、地域、身份均为真实字段。
快捷入口	题签后 16dp，行高 84dp	四项等宽；图标实际 24dp，标签 14sp，不使用大号装饰图。
分隔与列表标题	上距 16dp，标题区 36dp	细古金线 + “我创建的 / 我加入的”，不能留无内容的整屏空白。
家谱列表项	每项 72dp，项间 8dp	一项只显示名称、必要元信息、右箭头；不重复当前题签内容。
新建家谱	列表后 16dp，高 48dp	朱砂描边胶囊按钮，不用巨大的上下留白烘托。
底部导航	64dp + 系统导航保底	纸白底、三项等宽，图标 24dp、标签 12sp、每项触控区至少 48dp。

上述内容总高度在 360 × 800dp 首屏内保持紧凑；数据较多时由内容区滚动，而不是拉大首屏留白。320 × 568 下题签和快捷入口仍在首屏可见，列表向下滚动。

6.3 已否决的 G-01 生成整页图

此前 AI 生成的“我的家谱”整页图保留为美术锚点：G01 我的家谱美术锚点。它明确了本项目应该保留的整体效果：朱砂祠堂红头、暖金标题、宣纸纸纹、金线题签、淡山水竹影、纸白底部导航和庄重的色彩层级。

该图不直接作为尺寸与功能验收稿，因此不计入 G-01 的“页面设计完成”。需要按 6.2 的固定栅格修正：红头后与题签之间的过大留白、快捷入口与列表之间的过大留白、缺失的左上 Logo、当前家谱与列表的重复、无意义横线占位、以及非标准来源图标。

从此以后，页面设计采用“双锚点”：本图锁定美术氛围和视觉效果；6.2 固定栅格锁定尺寸、内容密度与 Android 小屏可用性。AI 只可生成 Logo、背景等独立视觉资产，不能决定页面间距、文字排版、列表高度或交互层级。

6.4 标准来源验收备注

• Material Symbols 官方指南：https://developers.google.com/fonts/docs/material_symbols
• Android Navigation Bar 官方指南：https://developer.android.com/develop/ui/compose/components/navigation-bar

7. 设计状态记录

• P-02：完成。颜色、字体、尺寸、透明 PNG 图标规范已锁定。
• P-03：完成。核心、普通、表单三类页面壳及底部导航、抽屉已锁定。
• P-04：完成。加载、空数据、失败、无权限、审核中与确认操作规则已锁定。
• 下一阶段：D2 账户与首次使用页面；全部页面均按本规范出高保真稿后，才进入 uni-app 还原。