4.0 KiB

Raw Blame History

字号优化说明 - 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	极小辅助文本（谨慎使用）	⚠️ 已基本避免使用

🎯 设计原则总结

阅读优先：正文区域字号要足够大（19pt），确保长时间阅读不疲劳
比例协调：标题与正文成比例缩放，保持视觉节奏
层级清晰：字号差异明显（至少 2-4pt），确保信息层级清晰
避免过小：尽量避免使用 caption（11-12pt），最小使用 label（13pt）
符合规范：参考 Apple HIG 和主流阅读应用（微信读书、即刻等）

📝 后续建议

播放器体验：可考虑根据用户反馈，提供字号调节功能（小、中、大）
无障碍支持：确保所有文字支持动态字体（Dynamic Type）
对比测试：可通过 A/B 测试验证字号调整对阅读完成率的影响
一致性检查：定期审查新增页面，确保字号符合设计系统

优化完成日期：2026年2月1日
Git 提交记录：2a44791 - 优化字号层级，提升阅读体验