From 39713eb8ac7640320e3b2ce3614447dd39d01453 Mon Sep 17 00:00:00 2001 From: ila Date: Sun, 21 Jun 2026 17:21:14 +0800 Subject: [PATCH] =?UTF-8?q?design:=20=E6=95=88=E6=9E=9C=E7=A8=BF=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E6=B8=85=E6=B7=A1=E7=AE=80=E6=B4=81=E9=A3=8E=E6=A0=BC?= =?UTF-8?q?=EF=BC=8CT-200=20=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- design_mockups/README.md | 9 +-- design_mockups/list.html | 103 ++++++++++++++--------------- design_mockups/play.html | 139 ++++++++++++++++++--------------------- docs/06-tasks.md | 2 +- 4 files changed, 119 insertions(+), 134 deletions(-) diff --git a/design_mockups/README.md b/design_mockups/README.md index d642b0c..b988f80 100644 --- a/design_mockups/README.md +++ b/design_mockups/README.md @@ -7,11 +7,12 @@ | `play.html` | 播放页 | **逐句字幕同步**：当前句放大+琥珀高亮+左侧光条，已读句变暗；**点任意句跳转**；底部播放器（播/停、上/下一句、进度）。点 ▶ 可看自动逐句推进的效果 | | `list.html` | 课程列表 | 26 集卡片：英文/中文标题、Act 幕状态（有音频=琥珀点 / 无音频=虚线）、进度环；顶部"继续学习"卡；ep18+ 显示"暂无音频"降级态 | -## 设计语言（深夜电影感精听） +## 设计语言（清淡简洁 · Swiss/Minimal） -- **配色**：暖墨黑底 `#15120d` + 纸感米色 `#ece1cd` + **琥珀金单点强调** `#e6ad5c`；细微胶片颗粒 + 顶部暖光。 -- **字体**：英文句子用文学衬线 **Newsreader**（精听的主角）；UI 用 **Hanken Grotesk**；中文用 **Noto Serif SC**。 -- **原则**：单一强调色、移动优先、内容（英文句子）为视觉主体；克制、不镀金。 +- **配色**：浅暖纸白底 `#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` + 组件样式可直接复用。 diff --git a/design_mockups/list.html b/design_mockups/list.html index 6814cc6..6793c31 100644 --- a/design_mockups/list.html +++ b/design_mockups/list.html @@ -6,88 +6,81 @@ 课程列表 · 走遍美国精听 - + diff --git a/design_mockups/play.html b/design_mockups/play.html index cf0fdc6..e6f0d11 100644 --- a/design_mockups/play.html +++ b/design_mockups/play.html @@ -6,126 +6,117 @@ 播放页 · 走遍美国精听 - +
- +
EP 1 · Act I
46 Linden Street
@@ -139,15 +130,15 @@
0:41 -
+
3:42
- - + - +
点击任意一句 · 音频跳到该句重听
@@ -175,7 +166,7 @@ function render(){ LINES.forEach((l,i)=>{ const d = document.createElement('div'); d.className = 'line' + (i===active?' active':'') + (i${l.t.toFixed(1)}s${l.en}`; d.onclick = ()=>{ active=i; sync(); }; // 点句跳转 stream.appendChild(d); diff --git a/docs/06-tasks.md b/docs/06-tasks.md index 0045110..59dfedb 100644 --- a/docs/06-tasks.md +++ b/docs/06-tasks.md @@ -47,7 +47,7 @@ | ID | 任务 | 依赖 | 验收要点 | 状态 | | --- | --- | --- | --- | --- | -| T-200 | UI 效果稿：播放页 + 课程列表（HTML/CSS） | — | 中保真稿覆盖逐句高亮/点句跳转/进度/无音频降级；用真实数据；CSS 可迁移 go-app。见 `design_mockups/` | DOING | +| T-200 | UI 效果稿：播放页 + 课程列表（HTML/CSS） | — | 中保真稿覆盖逐句高亮/点句跳转/进度/无音频降级；用真实数据；CSS 可迁移 go-app。见 `design_mockups/` | DONE | > 设计 spike，不是生产代码。产出在 `design_mockups/play.html`、`list.html`，作为 T-201/T-203 的视觉依据。