ilaandClaude Opus 4.8
39713eb8ac
- play.html / list.html：从深色重金属改为浅暖纸白 + 墨色 + 单一柔和赭石强调， 去掉颗粒/暗角/发光，UI 改用 Public Sans / Noto Sans SC；补齐焦点态、 cursor、44px 触控、对比度、prefers-reduced-motion、aria-label - README：设计语言更新为「清淡简洁 · Swiss/Minimal」 - 06-tasks：T-200 标记 DONE Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
24 lines
1.9 KiB
Markdown
24 lines
1.9 KiB
Markdown
# 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（实现）。
|