169 lines
4.6 KiB
Markdown
169 lines
4.6 KiB
Markdown
|
# app-android 大字模式排版与触达重构设计
|
|||
|
|
|
|||
|
|
日期：2026-03-06
|
|||
|
|
范围：`app-android`（仅客户端 UI 层）
|
|||
|
|
状态：已完成设计评审（分节确认通过）
|
|||
|
|
|
|||
|
|
## 1. 背景与问题
|
|||
|
|
|
|||
|
|
当前大字模式主要放大字号，但没有同步优化字体家族、字重、行高、字间距和点击区域，导致：
|
|||
|
|
|
|||
|
|
- 聊天气泡、章节正文、按钮文案在大字模式下出现拥挤、跳行不自然
|
|||
|
|
- 高频页面（聊天、阅读、设置）视觉节奏不一致
|
|||
|
|
- 可读性和可触达性没有形成统一设计系统
|
|||
|
|
|
|||
|
|
## 2. 目标与非目标
|
|||
|
|
|
|||
|
|
### 2.1 目标
|
|||
|
|
|
|||
|
|
- 大字模式达到“稳、清晰、易读”
|
|||
|
|
- 在聊天页、阅读页、设置页实现一致排版体验
|
|||
|
|
- 以设计令牌（token）统一字体与触达尺寸，并推广到全 app（方案 C）
|
|||
|
|
- 与现有业务逻辑完全解耦，不改 API、不改数据模型
|
|||
|
|
|
|||
|
|
### 2.2 非目标
|
|||
|
|
|
|||
|
|
- 不改后端接口与协议
|
|||
|
|
- 不做业务流程重构
|
|||
|
|
- 不引入外部字体文件，字体家族采用系统无衬线
|
|||
|
|
|
|||
|
|
## 3. 方案决策
|
|||
|
|
|
|||
|
|
用户确认采用 **方案 C（全局重构）**：
|
|||
|
|
|
|||
|
|
- 不仅修复三类高频页面，还将文本与触达规则推广到全 app UI
|
|||
|
|
- 通过主题注入统一 token，逐步清理硬编码 `sp`/固定小点击区
|
|||
|
|
|
|||
|
|
## 4. 设计架构
|
|||
|
|
|
|||
|
|
```mermaid
|
|||
|
|
flowchart LR
|
|||
|
|
settingsSwitch["ProfileSettingSwitch"] --> appSettingsState["AppSettings.largeFontModeState"]
|
|||
|
|
appSettingsState --> lifeechoTheme["LifeechoTheme"]
|
|||
|
|
lifeechoTheme --> typographyTokens["LocalTypographyTokens"]
|
|||
|
|
lifeechoTheme --> touchTokens["LocalTouchTargetTokens"]
|
|||
|
|
typographyTokens --> uiComponents["AllUIComponents"]
|
|||
|
|
touchTokens --> uiComponents
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4.1 Typography 令牌层
|
|||
|
|
|
|||
|
|
维护两套语义化排版令牌：
|
|||
|
|
|
|||
|
|
- `TypographyNormal`
|
|||
|
|
- `TypographyLarge`
|
|||
|
|
|
|||
|
|
每个文本令牌至少包含：
|
|||
|
|
|
|||
|
|
- `fontFamily`：系统无衬线
|
|||
|
|
- `fontSize`
|
|||
|
|
- `lineHeight`（大字模式行高比保持 1.45~1.65）
|
|||
|
|
- `fontWeight`（正文不低于 500）
|
|||
|
|
- `letterSpacing`（微调，避免拥挤）
|
|||
|
|
|
|||
|
|
语义分组建议：
|
|||
|
|
|
|||
|
|
- `heading` / `title` / `body` / `caption`
|
|||
|
|
- `button` / `bubble` / `reading` / `tab`
|
|||
|
|
|
|||
|
|
### 4.2 Touch Target 令牌层
|
|||
|
|
|
|||
|
|
维护两套触达尺寸令牌：
|
|||
|
|
|
|||
|
|
- `TouchTargetNormal`
|
|||
|
|
- `TouchTargetLarge`
|
|||
|
|
|
|||
|
|
覆盖最小可触达规则：
|
|||
|
|
|
|||
|
|
- 按钮高度
|
|||
|
|
- 列表项最小高度
|
|||
|
|
- IconButton 点击区
|
|||
|
|
- 输入框与语音按钮最小高度
|
|||
|
|
|
|||
|
|
大字模式建议最小触达范围：52~56dp。
|
|||
|
|
|
|||
|
|
### 4.3 主题统一注入
|
|||
|
|
|
|||
|
|
在 `LifeechoTheme` 内根据 `AppSettings.largeFontModeState` 统一注入：
|
|||
|
|
|
|||
|
|
- `LocalTypographyTokens`
|
|||
|
|
- `LocalTouchTargetTokens`
|
|||
|
|
|
|||
|
|
组件只读 token，不直接写死 `sp/dp`。
|
|||
|
|
|
|||
|
|
## 5. 迁移范围与顺序（全局）
|
|||
|
|
|
|||
|
|
### 5.1 第一层：主题与公共组件
|
|||
|
|
|
|||
|
|
- `ui/theme/Dimensions.kt`
|
|||
|
|
- `ui/theme/Theme.kt`
|
|||
|
|
- `ui/components/common/*`（`SectionCard`、`SettingItem`、`AppScaffold`、`MarkdownText`）
|
|||
|
|
|
|||
|
|
### 5.2 第二层：高频页面相关组件
|
|||
|
|
|
|||
|
|
- 聊天：`ui/components/chat/*`
|
|||
|
|
- 阅读：`ui/components/memoir/*`
|
|||
|
|
- 设置：`ui/screens/ProfileScreen.kt`
|
|||
|
|
|
|||
|
|
### 5.3 第三层：全屏幕收敛
|
|||
|
|
|
|||
|
|
- `ui/screens/*` 全量扫描
|
|||
|
|
- 清理硬编码 `sp`、过小点击区域、局部样式漂移
|
|||
|
|
- 统一到语义 token
|
|||
|
|
|
|||
|
|
## 6. 关键规范
|
|||
|
|
|
|||
|
|
### 6.1 文本规范
|
|||
|
|
|
|||
|
|
- 正文字重下限：500
|
|||
|
|
- 标题/按钮可使用 600
|
|||
|
|
- 大字模式行高比：1.45~1.65
|
|||
|
|
- 列表标题保留 `maxLines + ellipsis`
|
|||
|
|
- 正文优先自然换行，避免过度截断
|
|||
|
|
|
|||
|
|
### 6.2 触达规范
|
|||
|
|
|
|||
|
|
- 所有主要交互控件使用 touch token 约束最小尺寸
|
|||
|
|
- 对聊天输入区、语音按钮、设置项行高进行一致化处理
|
|||
|
|
|
|||
|
|
### 6.3 Markdown 一致性
|
|||
|
|
|
|||
|
|
- `MarkdownText` 由 typography token 推导正文/段落/引用/代码样式
|
|||
|
|
- 保证 markdown 正文与普通 `Text` 的阅读节奏一致
|
|||
|
|
|
|||
|
|
## 7. 风险与回退
|
|||
|
|
|
|||
|
|
### 7.1 风险
|
|||
|
|
|
|||
|
|
- 全局改造范围大，易出现局部回归
|
|||
|
|
- 历史硬编码样式分散，迁移遗漏风险高
|
|||
|
|
|
|||
|
|
### 7.2 缓解
|
|||
|
|
|
|||
|
|
- 按“公共组件 -> 高频页面 -> 全量页面”分批推进
|
|||
|
|
- 每批保持可独立回退
|
|||
|
|
- 业务逻辑与样式改造分离，降低故障影响面
|
|||
|
|
|
|||
|
|
## 8. 验收与测试（DoD 对齐）
|
|||
|
|
|
|||
|
|
### 8.1 页面回归（普通/大字双模式）
|
|||
|
|
|
|||
|
|
- 聊天页：消息气泡、输入框、语音按钮、时间分隔
|
|||
|
|
- 阅读页：目录、章节标题、正文、引用、浮动按钮
|
|||
|
|
- 设置页：分组标题、设置项、开关、关键按钮
|
|||
|
|
|
|||
|
|
### 8.2 交互验收
|
|||
|
|
|
|||
|
|
- 任务：3 分钟内完成“阅读章节 + 发送消息”
|
|||
|
|
- 目标：5 位测试用户无阅读障碍反馈
|
|||
|
|
|
|||
|
|
### 8.3 通过标准
|
|||
|
|
|
|||
|
|
- 大字模式下无明显截断/重叠/异常跳行
|
|||
|
|
- 三类高频页面视觉节奏一致
|
|||
|
|
- 关键交互均满足最小可触达尺寸规则
|
|||
|
|
|
|||
|
|
## 9. 后续
|
|||
|
|
|
|||
|
|
本设计已确认，可进入实现计划阶段（拆解为可执行任务与验证步骤）。
|