Files
life-echo/docs/plans/2026-03-06-android-large-typography-design.md
iammm0 cca8ce7731 docs: 新增 Android 大字号排版方案文档
新增 Android 大字号排版的设计与实施计划文档,便于跨设备继续开发并保持上下文一致。
2026-03-09 09:08:38 +08:00

4.6 KiB
Raw Blame History

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. 设计架构

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/*SectionCardSettingItemAppScaffoldMarkdownText

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. 后续

本设计已确认,可进入实现计划阶段(拆解为可执行任务与验证步骤)。