From d37b83011a88e8ade47690c5c49876e807bfa2bb Mon Sep 17 00:00:00 2001 From: ila Date: Sun, 21 Jun 2026 15:29:36 +0800 Subject: [PATCH] =?UTF-8?q?design:=20=E6=96=B0=E5=A2=9E=E6=92=AD=E6=94=BE?= =?UTF-8?q?=E9=A1=B5=E4=B8=8E=E8=AF=BE=E7=A8=8B=E5=88=97=E8=A1=A8=20UI=20?= =?UTF-8?q?=E6=95=88=E6=9E=9C=E7=A8=BF=EF=BC=88HTML/CSS=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - design_mockups/play.html：播放页，含逐句字幕高亮 + 点句跳转 + 播放器， 用 ep1 真实台词；CSS 变量化，可迁移进 go-app - design_mockups/list.html：26 集课程列表，含进度环、Act 音频状态、 ep18+ 无音频降级态；用真实集标题 - design_mockups/README.md：设计语言与文档对应说明 - 06-tasks：新增 Phase D / T-200 设计任务 Co-Authored-By: Claude Opus 4.8 --- design_mockups/README.md | 22 +++++ design_mockups/list.html | 159 +++++++++++++++++++++++++++++ design_mockups/play.html | 209 +++++++++++++++++++++++++++++++++++++++ docs/06-tasks.md | 8 ++ 4 files changed, 398 insertions(+) create mode 100644 design_mockups/README.md create mode 100644 design_mockups/list.html create mode 100644 design_mockups/play.html diff --git a/design_mockups/README.md b/design_mockups/README.md new file mode 100644 index 0000000..d642b0c --- /dev/null +++ b/design_mockups/README.md @@ -0,0 +1,22 @@ +# design_mockups — UI 效果稿（HTML/CSS） + +可在浏览器直接打开的中保真效果稿，**CSS 可直接迁移进 go-app**（技术栈选的就是纯 CSS）。 + +| 文件 | 页面 | 看点 | +| --- | --- | --- | +| `play.html` | 播放页 | **逐句字幕同步**：当前句放大+琥珀高亮+左侧光条，已读句变暗；**点任意句跳转**；底部播放器（播/停、上/下一句、进度）。点 ▶ 可看自动逐句推进的效果 | +| `list.html` | 课程列表 | 26 集卡片：英文/中文标题、Act 幕状态（有音频=琥珀点 / 无音频=虚线）、进度环；顶部"继续学习"卡；ep18+ 显示"暂无音频"降级态 | + +## 设计语言（深夜电影感精听） + +- **配色**：暖墨黑底 `#15120d` + 纸感米色 `#ece1cd` + **琥珀金单点强调** `#e6ad5c`；细微胶片颗粒 + 顶部暖光。 +- **字体**：英文句子用文学衬线 **Newsreader**（精听的主角）；UI 用 **Hanken Grotesk**；中文用 **Noto Serif SC**。 +- **原则**：单一强调色、移动优先、内容（英文句子）为视觉主体；克制、不镀金。 + +> 颜色 / 字体 / 间距都用 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（实现）。 diff --git a/design_mockups/list.html b/design_mockups/list.html new file mode 100644 index 0000000..6814cc6 --- /dev/null +++ b/design_mockups/list.html @@ -0,0 +1,159 @@ + + + + + +课程列表 · 走遍美国精听 + + + + + + +
+
+
+

走遍美国

+ Family Album, U.S.A. +
+
逐句精听 · Close Listening
+
+ +
+
继续学习
+
46 Linden Street · Act I
+
林登大街 46 号 · 第一幕
+
+
+ +
+
+ +
全 26 集
+ +
+
+ + + + diff --git a/design_mockups/play.html b/design_mockups/play.html new file mode 100644 index 0000000..cf0fdc6 --- /dev/null +++ b/design_mockups/play.html @@ -0,0 +1,209 @@ + + + + + +播放页 · 走遍美国精听 + + + + + + +
+
+ +
+
EP 1 · Act I
+
46 Linden Street
+
林登大街 46 号
+
+ 精听 +
+ +
+ +
+
+ 0:41 +
+ 3:42 +
+
+ + + +
+
点击任意一句 · 音频跳到该句重听
+
+
+ + + + diff --git a/docs/06-tasks.md b/docs/06-tasks.md index 3ef32fe..0045110 100644 --- a/docs/06-tasks.md +++ b/docs/06-tasks.md @@ -43,6 +43,14 @@ > 对应需求验收：02-requirements 第五节"逐句同步"。这是 P0 核心，务必先单独跑通。 +## Phase D · 设计（先于 Phase 2 的 UI） + +| ID | 任务 | 依赖 | 验收要点 | 状态 | +| --- | --- | --- | --- | --- | +| T-200 | UI 效果稿：播放页 + 课程列表（HTML/CSS） | — | 中保真稿覆盖逐句高亮/点句跳转/进度/无音频降级；用真实数据；CSS 可迁移 go-app。见 `design_mockups/` | DOING | + +> 设计 spike，不是生产代码。产出在 `design_mockups/play.html`、`list.html`，作为 T-201/T-203 的视觉依据。 + ## Phase 2 · 课程列表 + 播放页 | ID | 任务 | 依赖 | 验收要点 | 状态 |