95 lines
4.0 KiB
Markdown
95 lines
4.0 KiB
Markdown
|
# 字号优化说明 - 2026年2月
|
|||
|
|
|
|||
|
|
## 📊 优化原则
|
|||
|
|
|
|||
|
|
**核心理念**：调整略小的字号至合理层级，保持已经合理的字号不变，确保 UI 一致性和良好的阅读体验。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ✅ 已调整的字号（略小 → 合理）
|
|||
|
|
|
|||
|
|
### 1. 播放器正文区域 (`ContentBlockBuilder.swift`)
|
|||
|
|
|
|||
|
|
| 元素 | 原字号 | 新字号 | 调整理由 |
|
|||
|
|
|------|--------|--------|---------|
|
|||
|
|
| 正文 | 17pt | **19pt** | 提升长文阅读舒适度，符合阅读类应用标准 |
|
|||
|
|
| 主标题 | 28pt | **30pt** | 与正文字号成比例协调 |
|
|||
|
|
| H1 标题 | 24pt | **26pt** | 与正文字号成比例协调 |
|
|||
|
|
| H2 标题 | 20pt | **22pt** | 与正文字号成比例协调 |
|
|||
|
|
| 高亮文本 | 18pt | **20pt** | 与正文字号成比例协调 |
|
|||
|
|
| 行间距 | 9pt | **10pt** | 保持黄金比例 1.72x (19×1.72≈32.7) |
|
|||
|
|
| 段落间距 | 22pt | **24pt** | 随正文字号增大 |
|
|||
|
|
|
|||
|
|
**影响范围**：
|
|||
|
|
- ✅ `VerticalScreenPlayerView` - 播放器正文渲染
|
|||
|
|
- ✅ `ArticleRichTextViewRepresentable` - 富文本显示
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 2. 地图页 (`MapView.swift`)
|
|||
|
|
|
|||
|
|
| 元素 | 原字号 | 新字号 | 调整理由 |
|
|||
|
|
|------|--------|--------|---------|
|
|||
|
|
| 章节标题 | 20pt | **22pt** | 增强区块分割感，提升层级清晰度 |
|
|||
|
|
| 课程标题 | 16pt | **17pt** | 略微偏小，提升至标准阅读字号 |
|
|||
|
|
| 进度信息 | caption (11-12pt) | **label (13pt)** | caption 过小，调整至 label 防止难以阅读 |
|
|||
|
|
|
|||
|
|
**影响范围**：
|
|||
|
|
- ✅ `VerticalListLayout` - 章节标题
|
|||
|
|
- ✅ `LessonListRow` - 课程条目标题
|
|||
|
|
- ✅ `AtmosphericHeaderView` - 悬浮卡片进度信息
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🔒 保持不变的合理字号
|
|||
|
|
|
|||
|
|
以下字号已处于最佳层级，**无需调整**：
|
|||
|
|
|
|||
|
|
| 区域 | 元素 | 字号 | 评价 |
|
|||
|
|
|------|------|------|------|
|
|||
|
|
| **MapView** | 头部大标题 | 32pt | ✅ 适当，具有冲击力 |
|
|||
|
|
| **ProfileView** | 统计数字 | 32pt | ✅ 适当，数据展示清晰 |
|
|||
|
|
| **DiscoveryView** | 运营位标题 | 22pt | ✅ 适当，信息层级合理 |
|
|||
|
|
| **GrowthTopBar** | 导航标签 | 18pt (active) / 16pt (inactive) | ✅ 适当，选中态明显 |
|
|||
|
|
| **DesignSystem** | 各类按钮与标签 | 13pt-16pt | ✅ 适当，符合 iOS 设计规范 |
|
|||
|
|
| **ProfileView** | 笔记入口卡片 | 16pt (title) / 13pt (label) | ✅ 适当，层级清晰 |
|
|||
|
|
| **MapView** | 悬浮卡片按钮 | 15pt | ✅ 适当，易于点击 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📈 字号层级体系（完整）
|
|||
|
|
|
|||
|
|
| 层级 | 字号范围 | 用途 | 示例 |
|
|||
|
|
|------|----------|------|------|
|
|||
|
|
| **Display** | 30-32pt | 页面主标题、数据展示 | 播放器主标题 (30pt)、统计数字 (32pt) |
|
|||
|
|
| **H1** | 26-28pt | 一级标题 | 播放器 H1 (26pt) |
|
|||
|
|
| **H2** | 22-24pt | 二级标题、模块标题 | 地图章节标题 (22pt)、发现页标题 (22pt) |
|
|||
|
|
| **H3** | 18-20pt | 三级标题、Tab 标签 | 播放器高亮 (20pt)、Tab Bar 选中 (18pt) |
|
|||
|
|
| **Body** | 17-19pt | 正文、列表项 | 播放器正文 (19pt)、地图课程标题 (17pt) |
|
|||
|
|
| **Label** | 13-16pt | 辅助信息、按钮 | 进度信息 (13pt)、按钮文字 (16pt) |
|
|||
|
|
| **Caption** | 11-12pt | 极小辅助文本（谨慎使用） | ⚠️ 已基本避免使用 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🎯 设计原则总结
|
|||
|
|
|
|||
|
|
1. **阅读优先**：正文区域字号要足够大（19pt），确保长时间阅读不疲劳
|
|||
|
|
2. **比例协调**：标题与正文成比例缩放，保持视觉节奏
|
|||
|
|
3. **层级清晰**：字号差异明显（至少 2-4pt），确保信息层级清晰
|
|||
|
|
4. **避免过小**：尽量避免使用 caption（11-12pt），最小使用 label（13pt）
|
|||
|
|
5. **符合规范**：参考 Apple HIG 和主流阅读应用（微信读书、即刻等）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📝 后续建议
|
|||
|
|
|
|||
|
|
1. **播放器体验**：可考虑根据用户反馈，提供字号调节功能（小、中、大）
|
|||
|
|
2. **无障碍支持**：确保所有文字支持动态字体（Dynamic Type）
|
|||
|
|
3. **对比测试**：可通过 A/B 测试验证字号调整对阅读完成率的影响
|
|||
|
|
4. **一致性检查**：定期审查新增页面，确保字号符合设计系统
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**优化完成日期**：2026年2月1日
|
|||
|
|
**Git 提交记录**：`2a44791` - 优化字号层级，提升阅读体验
|