87 lines
3.5 KiB
Markdown
87 lines
3.5 KiB
Markdown
# F01 家族动态基准页返工设计
|
||
|
||
## 目标
|
||
|
||
将 F01“家族动态”正常列表态重做为 F 模块视觉基准：消除动态卡框外白底和申请状态语义，强化内容阅读层级，并提升快捷入口的触控可用性。
|
||
|
||
## 修改范围
|
||
|
||
仅修改 F01 及其直接测试、候选资产和视觉证据：
|
||
|
||
- 四个内容快捷入口。
|
||
- 动态列表卡片。
|
||
- 空态与失败态共用的内容面板外观。
|
||
- 与以上结构直接相关的 F01 合同和运行时检查。
|
||
|
||
保持不变：
|
||
|
||
- 页头、“发布”入口、家族圈上下文、长背景和底部 Tab。
|
||
- 加载、列表、空、失败四种状态及现有路由行为。
|
||
- 发布按钮的项目现有真实资产。
|
||
- 其他 F 页面及公共组件。
|
||
|
||
## 视觉方案
|
||
|
||
### 家书动态卡
|
||
|
||
- 新增 F01 专属透明 PNG 内容卡资产，作为动态卡和空／失败内容面板的统一基底。
|
||
- 资产使用浅宣纸内面和克制的细金边，外框之外必须透明；不得出现白色矩形底、申请状态红竖线或右上状态短横。
|
||
- 设计语言偏“家书／家族记事”，与 T07 成员题签卡明显区分。
|
||
- 卡片宽度跟随内容区；412px 视口下单卡高度约 116–132px，内容在卡内垂直居中。
|
||
|
||
### 信息层级
|
||
|
||
- 标题为第一层级，使用楷体并保持最高字号与字重。
|
||
- 分类与时间位于标题上方，作为低权重辅助信息；只用文字强调，不增加装饰竖线。
|
||
- 正文位于标题下方，最多两行，颜色和字号低于标题。
|
||
- 发布人位于卡片底部，保持可读但不抢标题。
|
||
- 两张卡的宽度、高度和内边距完全一致。
|
||
|
||
### 快捷入口
|
||
|
||
- 保留“谱文、相册、礼仪、备忘”及现有真实卷轴按钮资产。
|
||
- 每个入口触控高度固定不低于 44 CSS px；320px 宽度下仍不得低于该值。
|
||
- 四个入口在一张全宽次级卷轴框内使用四列等宽布局，只保留一套卷轴端头和外框。
|
||
- 入口之间保持清楚间隔，不裁切文字，不出现横向页面溢出。
|
||
|
||
### 状态与操作
|
||
|
||
- 加载态继续使用 `AppLoading`。
|
||
- 空态和失败态使用同一张 F01 专属透明内容卡，不复用申请状态卡。
|
||
- 失败态“重新查看”和正常／空态“发布家族动态”继续使用现有项目按钮资产。
|
||
|
||
## 响应式与可用性
|
||
|
||
- 自动检查 320×568、360×640、360×800、412×915。
|
||
- 四档均不得产生横向溢出、文字裁切、卡片错位或 Tab 遮挡。
|
||
- 快捷入口和主要操作触控高度均不低于 44 CSS px。
|
||
- 页面保持现有内容滚动和底部安全区域处理。
|
||
|
||
## 验收条件
|
||
|
||
- 动态卡和状态面板没有框外白底。
|
||
- F01 不再引用 `application-status-card.png`。
|
||
- 动态卡不含申请状态式红竖线或右上短横。
|
||
- 标题是第一视觉焦点，分类／时间、正文、发布人层级清楚。
|
||
- 快捷入口四档尺寸均达到 44px 触控高度且没有页面横向溢出。
|
||
- 加载、列表、空、失败、发布和内容入口行为保持可用。
|
||
- F01 聚焦合同、既有 F 系列合同和 H5 运行时检查通过。
|
||
|
||
## 证据边界
|
||
|
||
- H5 截图只作为内部候选证据。
|
||
- Android/HBuilderX 真机或模拟器仍未验证，不据此宣称完成。
|
||
|
||
## 非目标
|
||
|
||
- 不修改其他 F 页面。
|
||
- 不抽取新的公共组件。
|
||
- 不连接真实接口。
|
||
- 不改动底部 Tab、页头或发布流程。
|
||
|
||
## 自检
|
||
|
||
- 无 TBD、TODO 或未决资产选择。
|
||
- 资产、布局、状态和验收条件没有冲突。
|
||
- 范围严格限定为 F01 及其直接测试和候选证据。
|