# design_mockups — UI 效果稿（HTML/CSS）

可在浏览器直接打开的中保真效果稿，**CSS 可直接迁移进 go-app**（技术栈选的就是纯 CSS）。

| 文件 | 页面 | 看点 |
| --- | --- | --- |
| `play.html` | 播放页 | **逐句字幕同步**：当前句放大+琥珀高亮+左侧光条，已读句变暗；**点任意句跳转**；底部播放器（播/停、上/下一句、进度）。点 ▶ 可看自动逐句推进的效果 |
| `list.html` | 课程列表 | 26 集卡片：英文/中文标题、Act 幕状态（有音频=琥珀点 / 无音频=虚线）、进度环；顶部"继续学习"卡；ep18+ 显示"暂无音频"降级态 |

## 设计语言（清淡简洁 · Swiss/Minimal）

- **配色**：浅暖纸白底 `#f8f6f1` + 墨色文字 `#2a2724` + **单一柔和赭石强调** `#a4662b`；细发丝线分隔，无颗粒/暗角/发光。
- **字体**：英文句子用文学衬线 **Newsreader**（精听的主角，唯一的表现型元素）；UI 用干净的 **Public Sans**；中文用 **Noto Sans SC**。
- **原则**：大量留白、高对比、单一强调色、移动优先；当前句靠"墨色加深 + 字号 + 细赭石标记"区分，不靠重特效。
- **可访问性**：焦点可见态、`cursor-pointer`、44px 触控区、文字对比 ≥4.5:1、`prefers-reduced-motion` 降级、图标按钮带 `aria-label`。

> 颜色 / 字体 / 间距都用 CSS 变量（`:root`）集中定义，迁移进 go-app 时整段 `:root` + 组件样式可直接复用。

## 与文档的对应

- 形态对应 `docs/04-architecture.md`（列表 + 播放页 + 字幕同步）与 `docs/02-requirements.md` 第五节验收（逐句高亮、点句跳转、进度、无音频降级）。
- 用的是 `family-album-usa/episodes.json` 的**真实数据**（ep1《46 Linden Street》真实台词、各集真实标题与音频覆盖）。
- 落地任务见 `docs/06-tasks.md` 的 T-200（设计）→ T-201/T-203（实现）。