视觉设计规范
英语智习室 · 视觉设计规范
以「精修标准版」为核心基准。所有后续页面均须严格遵循本规范中的令牌、组件、布局与编码约定，确保全站视觉一致性。本文档自包含，换设备后可直接作为唯一参照源推进后续开发。
创建：2026-08-14
基准：v1-orange.html 精修标准版
主色：#FF6A00 明亮橙
适配：PC / 平板 / 手机
01设计理念与核心原则
本规范服务于全年龄段（小学至成人）英语学习学生端，一套视觉体系兼容所有人群。
五项核心原则
| 原则 | 说明 | 体现 |
|---|
| 简约扁平 | 去除过多渐变、描边、低龄化装饰。信息层次用留白和阴影区分。 | 卡片 flat + 1px border + 暖灰微阴影 |
| 任务显性化 | 用户进入即明确"今天要做什么"，任务数据（完成率/步骤/截止）始终可见。 | 学习大厅 + 引导条 + 步骤 chips |
| 色彩平衡 | 主色橙作强调，辅色（青/琥珀/紫）降饱和后作分区标识，不过度多彩。 | 3 辅色各代表 1 类任务/模块 |
| 暖灰阴影 | 阴影基色用 rgba(55,45,35,...) 替代纯黑，视觉更柔暖统一。 | 4 级阴影 + 主色阴影 |
| 统一线条图标 | 全部 SVG sprite，24x24 viewBox，2px stroke，round caps，fill:none。装饰元素 opacity 统一 .35。 | 30+ 图标，零 emoji |
设计取向
推荐：明亮橙色作行动引导；大圆角（16-20px）营造亲和感；步骤 chips 带状态（done/doing/lock）；进度数据用大字号 + 色彩强调。
避免：卡通插画 / emoji 图标；深色暗黑主题；过多渐变填充；纯黑阴影；低龄化的圆润气泡。
02色彩系统
所有颜色通过 CSS 自定义属性引用，禁止在组件中硬编码十六进制值（一次性内联 style 除外）。
主色 — 明亮橙（行动 / 强调）
100
#FFE8D6
btn-ghost hover
200
#FFD0AD
doing chip border
400
#FF8C42
avatar gradient
辅色 1 — 青蓝（冷调平衡 / 复习任务）
50
#F0F9FB
tag-review / btn-teal / m-read
600
#2E8590
复习文字色 / m-read icon
辅色 2 — 暖琥珀（英语测评模块）
辅色 3 — 紫（作业任务 / 语法训练）
50
#F7F5FC
tag-home / m-gram
中性色
| 令牌 | 值 | 用途 |
|---|
--o-white | #FFFFFF | 卡片背景 / 按钮文字 |
--o-bg | #F8F8F9 | 页面底色 / 内嵌区域 |
--o-bg-2 | #F2F2F4 | 进度条轨道 / chip lock |
--o-bg-3 | #ECECEF | 更深底色 |
--o-border | #F1F1F3 | 卡片边框（主） |
--o-border-2 | #E5E5E9 | 卡片边框（hover） |
--o-border-3 | #D9D9DE | 滚动条 |
--o-text | #1A1A1F | 主标题 |
--o-text-2 | #3D3D45 | 正文 |
--o-text-3 | #6B6B75 | 次要文字 |
--o-text-4 | #9E9EA8 | 辅助 / 占位 |
功能色
| 令牌 | 值 | 用途 |
|---|
--o-success / -bg | #36B07F / #E6F6EF | 完成状态 / tag-done / step done |
--o-danger / -bg | #EA5A5A / #FEF0F0 | 即将截止 / tag-urgent |
--o-warning / -bg | #E89A28 / #FFF7EA | 进行中 / tag-doing |
色彩映射规则
| 任务/模块 | 主色 | 辅色令牌 | 进度条 class |
|---|
| 学新任务 | 橙 #FF6A00 | --o-primary-* | .progress |
| 复习任务 | 青 #3B9CA8 | --o-teal-* | .progress-teal |
| 作业任务 | 紫 #785DB0 | --o-purple-* | .progress-purple |
| 单词识记 | 橙 | .m-word | — |
| 阅读理解 | 青 | .m-read | — |
| 语法训练 | 紫 | .m-gram | — |
| 英语测评 | 琥珀 | .m-exam | — |
03字体与字号
字体族：--o-font = "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif
字号令牌
| 令牌 | 值 | 典型用途 |
|---|
--o-11 | 11px | 辅助标签 / 副信息 / guide-status |
--o-12 | 12px | tag / steps-label / task-from |
--o-13 | 13px | 次要正文 / pill / btn-sm |
--o-14 | 14px | 正文 / btn / nav-link / hero-info p |
--o-15 | 15px | 模块标题 / aux h3 |
--o-16 | 16px | 任务名 / hall-zone h2 |
--o-18 | 18px | 分区标题 / logo / hall-title(alt) |
--o-20 | 20px | hall-title h2 / sec-title |
--o-24 | 24px | hero h1 / stat value |
--o-28 | 28px | 进度百分比大数 |
--o-32 | 32px | 文档大标题 |
字重令牌
| 令牌 | 值 | 用途 |
|---|
--o-fw-400 | 400 Regular | 辅助说明 |
--o-fw-500 | 500 Medium | 正文 / nav / tag / pill |
--o-fw-600 | 600 SemiBold | 标题 / btn / nav active |
--o-fw-700 | 700 Bold | 区标题 / h2 / logo |
--o-fw-800 | 800 ExtraBold | 百分比大数 / 强调数值 |
行高统一 1.5（body 设置），标题区局部 1.2。
04间距系统
4px 基数递增，全部通过令牌引用。
| 令牌 | 值 | 典型场景 |
|---|
--o-4 | 4px | 图标内 gap / 极小间距 |
--o-8 | 8px | 步骤 gap / tag padding-y |
--o-12 | 12px | 模块 gap / aux gap |
--o-16 | 16px | 卡片内 padding / margin-bottom |
--o-20 | 20px | hall-zone padding / 分区间距 |
--o-24 | 24px | 卡片 padding / page padding / hero gap |
--o-28 | 28px | 大卡片间距 / modules margin |
--o-32 | 32px | nav padding / hero padding |
--o-40 | 40px | 区段间距 |
--o-48 | 48px | 大区段间距 |
05圆角系统
大圆角营造亲和感，分 6 级 + 全圆。
| 令牌 | 值 | 典型用途 |
|---|
--o-r-6 | 6px | 极小元素 |
--o-r-8 | 8px | btn-sm / stat-item |
--o-r-10 | 10px | btn / logo-mark / mod(alt) |
--o-r-12 | 12px | icon-box / step-chip / hall-guide |
--o-r-16 | 16px | 卡片 / mod / aux-card |
--o-r-20 | 20px | hall / hero-card / progress-ring |
--o-r-24 | 24px | 大型容器 |
--o-r-full | 999px | tag / pill / pill / avatar / 圆形 |
06阴影体系
暖灰基色 rgba(55,45,35,...) 替代纯黑，更柔暖统一。分 4 级 + 2 色阴影。
| 令牌 | 值 | 用途 |
|---|
--o-sh-0 | none | 无阴影 |
--o-sh-1 | 0 1px 2px + 0 1px 3px rgba(55,45,35,.025) | 静息卡片 / icon-box / train-item |
--o-sh-2 | 0 2px 4px + 0 4px 10px rgba(55,45,35,.03) | 主卡片 / hall / hero-card |
--o-sh-3 | 0 4px 8px + 0 8px 20px rgba(55,45,35,.045) | 卡片 hover / 浮起状态 |
--o-sh-4 | 0 8px 16px + 0 16px 36px rgba(55,45,35,.05) | 弹窗 / 浮层 / dropdown |
--o-sh-primary | 0 2px 6px + 0 4px 14px rgba(255,106,0,.14) | 主按钮 / logo-mark |
--o-sh-teal | 0 2px 6px + 0 4px 14px rgba(46,133,144,.12) | 青色按钮 |
hover 提升规则：sh-1 → sh-3（卡片），sh-2 → sh-3（模块入口），translateY(-1px ~ -2px)。
07动效系统
统一缓动 cubic-bezier(.4,0,.2,1)，3 档速度。
| 令牌 | 值 | 用途 |
|---|
--o-t-fast | 120ms | 微交互 / chip |
--o-t | 200ms | 标准过渡（hover / color / transform） |
--o-t-slow | 350ms | 入场动画 / 进度环 |
关键帧动画
| 名称 | 效果 | 用途 |
|---|
fadeUp | opacity 0→1 + translateY(12px)→0 | 页面区块入场 |
pulse | opacity .5→1 + scale(.9)→1.1 | doing 步骤 / guide pulse-dot |
bounce | translateY 0→-4→0 | 图标弹动 |
float | translateY 0→-6→0 | 悬浮装饰 |
shimmer | background-position -200%→200% | 骨架屏 |
wave | 挥手 emoji 摇摆 | hero 欢迎区 |
入场延迟序列
| class | 延迟 | 用途 |
|---|
.fade-up | 0ms | 区块入场动画 |
.delay-1 | +60ms | 第二区块 |
.delay-2 | +120ms | 第三区块 |
.delay-3 | +180ms | 第四区块 |
.delay-4 | +240ms | 第五区块 |
.delay-5 | +300ms | 第六区块 |
08SVG 图标系统
规范：24x24 viewBox · 2px stroke · round caps · fill:none · 装饰元素 opacity:.35
全部图标以 <symbol> 方式内嵌于 <svg style="display:none"> sprite 中，通过 <use href="#i-xxx"/> 引用。禁止使用 emoji 或图片图标。
图标尺寸类
| class | 尺寸 | 用途 |
|---|
.ico-sm | 16x16 | tag / nav-link / steps-label 内 |
.ico（默认） | 20x20 | 通用 |
.ico-lg | 24x24 | 模块入口 / 大图标 |
.ico-xl | 32x32 | 特殊大图标 |
完整图标目录
新增图标时：遵循同一 viewBox/stroke 规范，添加到 sprite 并在此目录登记。
09组件库：顶部导航 Topnav
全站通用顶部导航，sticky 定位，60px 高。
Topnav 预览
height:60px · sticky · 白底 + 底边框
<!-- 结构 -->
<nav class="topnav">
<div class="nav-left">
<div class="logo">
<img class="logo-img" src="assets/logo.png" alt="英语智习室">
</div>
<div class="nav-links">
<a class="nav-link active">...</a>
</div>
</div>
<div class="nav-right">...</div>
</nav>
| 子元素 | 说明 |
|---|
.logo-img | 品牌位图 assets/logo.png（409x115 透明底），高 36px / width:auto，居中于 60px 顶栏（2026-09-20 换标） |
.logo-mark | 【历史】32x32 橙色圆角方块 + 18px #i-dict 图标；已被 .logo-img 取代，仅存档 |
.nav-link | 14px/500 灰色，hover 变橙；.active 变橙+700+底部 3px 橙线 |
.nav-icon | 36x36 圆形按钮，hover 浅灰底 |
.nav-avatar | 34x34 圆形，橙渐变背景 + 2px 白边 |
底部 TabBar（移动端主导航 · 2026-09-10 默认固定底部）
屏幕 ≤920px 时，顶部 nav 收成 logo + 右侧铃/头像；主导航迁移至底部 fixed TabBar（6 项等分 · 56px 高 · 含 iPhone safe-area）。激活态采用「橙色图标 + 橙色加粗文字 + 顶部 2px 橙高亮条」，与桌面端顶部下划线逻辑保持一致。
移动端 BottomNav 预览
height:56px + safe-area · fixed bottom · 6 等分
<!-- 结构：放 </body> 前 -->
<nav class="bottom-nav">
<div class="bn-list">
<a class="bn-item" href="v1-orange.html"><svg class="ico"><use href="#i-home"/></svg><span>英语</span></a>
<a class="bn-item" href="homework.html">...</a>
<!-- 6 项：英语 / 作业 / 错词 / 收藏 / 排行 / 测评 -->
</div>
</nav>
/* 自动激活（按当前 URL 加 .active） */
document.querySelectorAll('.bn-item').forEach(a => {
const here = location.pathname.split('/').pop();
if (a.getAttribute('href').endsWith(here)) a.classList.add('active');
});
| 子元素 | 说明 |
|---|
.bottom-nav | display:none · fixed bottom · z-index:90 · 白底 + 顶 1px border + 上方暖阴影 · padding-bottom 用 env(safe-area-inset-bottom) 适配 iPhone |
.bn-list | display:grid · 6 等分 · 高度 56px + safe-area |
.bn-item | 列向居中 · 10px 文字 · 图标 20px · 文字色 --o-text-4 · gap 3px · padding-top 8px（避开顶部 2px 高亮条） |
.bn-item.active | 文字色 --o-primary-600 + fw-600 · 图标同步橙 + scale(1.08) · ::before 顶部 2px 圆角橙高亮条（18px 宽） |
.bn-item:active | 点击反馈 background:--o-bg（冷浅灰） |
设计决策：
- 桌面端 6 项与移动端 6 项完全 1:1 对应（不删减），避免信息架构变化
- 移动端标签由 3-4 字精简为 2 字（作业本→作业 / 错词本→错词 / 收藏本→收藏 / 排行榜→排行 / 英语测评→测评），避免 360 屏宽下溢出
- 激活态复用桌面端「顶部下划线」语义（top:0 + 高亮条），保证跨端视觉一致
body padding-bottom:calc(56px + safe-area) 防止最后一行内容被 tabbar 遮挡
10组件库：按钮 Button
5 种变体 + 1 种尺寸。统一 padding 9px 20px，圆角 10px，14px/600。
按钮变体预览
primary / outline / ghost / teal / sm
primary
outline
ghost
teal
sm
| class | 背景 | 文字 | 阴影 | 用途 |
|---|
.btn-primary | --o-primary-600 | #fff | sh-primary | 主行动按钮（学新/继续） |
.btn-outline | --o-white + 1.5px border | --o-text-3 | none | 次级行动（作业） |
.btn-ghost | --o-primary-50 | --o-primary-600 | none | 辅助操作 |
.btn-teal | --o-teal-50 | --o-teal-600 | 微阴影 | 复习类操作 |
.btn-sm | 叠加修饰：padding 6px 14px / 13px / r-8 | 小尺寸 |
hover 统一：primary 变 700 + translateY(-1px) + 加深阴影；outline 变橙 border + 橙字 + 浅橙底。
11组件库：卡片 Card
白底 + 1px 暖边框 + r-16 + sh-1，hover 可选浮起。
Card + Card-hoverbg:white · border · r-16 · sh-1 → sh-3
| class | 说明 |
|---|
.card | 基础卡片：bg white / border / r-16 / sh-1 |
.card-hover | 叠加：hover translateY(-2px) + sh-3 + border-2 |
.aux-card | 辅助区卡片：使用 .card + padding 22px |
12组件库：标签徽章 Tag
全圆角小标签，3px 10px padding，12px/500。
| class | 背景 | 文字 | 用途 |
|---|
.tag-new | primary-50 | primary-600 | 新任务标记 |
.tag-review | teal-50 | teal-600 | 复习标记 |
.tag-home | purple-50 | purple-500 | 作业标记 |
.tag-done | success-bg | success | 完成状态 |
.tag-doing | warning-bg | warning | 进行中 |
.tag-lock | bg-2 | text-4 | 未开始 / 锁定 |
.tag-urgent | danger-bg | danger | 紧急 / 即将截止 |
13组件库：进度条 Progress
6px 高 + 全圆角 + 内高光。3 色变体。
Progress 预览primary / teal / purple
| class | 条色 | 轨道色 | 用途 |
|---|
.progress | primary-600 | bg-2 | 学新任务 |
.progress-teal | teal-500 | bg-2 | 复习任务 |
.progress-purple | purple-400 | bg-2 | 作业任务 |
内高光：进度条上半 50% 高度叠加白色半透明渐变，增加质感。宽度过渡 0.6s。
14组件库：步骤 Chips Step-chip
任务学习流程步骤，3 种状态。
Step-chip 状态done / doing / lock
| 状态 | 背景 | 文字 | 圆点 | 说明 |
|---|
.done | success-bg | #2BA070 | — | 带 check 图标 |
.doing | primary-50 | primary-600 | pulse 动画 | 带进度如 3/8 |
.lock | white + border | text-4 | — | 带 lock 图标，opacity .48 |
15组件库：模块图标盒 Icon-box
40x40 圆角方块，浅色底 + 对应色图标。4 种模块配色。
| class | 背景 | 图标色 | 模块 |
|---|
.m-word | primary-50 | primary-600 | 单词识记 |
.m-read | teal-50 | teal-600 | 阅读理解 |
.m-gram | purple-50 | purple-500 | 语法训练 |
.m-exam | amber-50 | amber-500 | 英语测评 |
模块入口 .mod 内可放大至 46x46，图标 22px。
16组件库：任务卡片 Task-card
任务信息核心载体，含标题、来源、进度、步骤、操作按钮。
Task-card 结构task-top + steps + progress + task-foot
Unit 3 新词学习 · 第 1 课
王老师定制 · 共 12 个新词
学习流程
自然拼读
听音选义 3/8
填空拼写
| 子元素 | 说明 |
|---|
.task-top | flex 两端对齐：左侧标题+来源，右侧进度百分比 |
.task-name | 16px/600 主色文字 |
.task-from | 12px 灰色，带 13px 图标 |
.task-prog .pct | 28px/700 大号百分比，颜色随任务类型 |
.steps | flex-wrap 容器，内含 step-chip |
.steps-label | 12px 灰色小标题，带图标 |
.task-foot | flex 两端对齐，上边框分隔，左侧统计+右侧按钮 |
.task-stat | 12px 灰色统计信息，带 13px 图标 |
17组件库：学习大厅容器 Hall
首页核心组件：单一白卡容器承载全部任务分区，视觉整体。
Hall 关键结构
| 层 | class | 说明 |
|---|
| 外壳 | .hall | 白卡 + border + r-20 + sh-2 + overflow:hidden |
| 顶部彩条 | .hall::before | 3-4px 高，三段渐变（橙33% / 青33% / 紫33%） |
| 内层 | .hall-inner | padding 24px 28px 28px |
| 头部 | .hall-head | 标题 + 进度摘要，下边框分隔 |
| 引导条 | .hall-guide | 灰底内嵌条，完成顺序：学新→复习→作业 |
| 子分区 | .hall-zone | 上边框分隔（首区无），内含 zone-head + task-card |
| 任务卡（融入） | .hall .task-card | 去除独立 bg/border/shadow/padding，融入整体 |
| 作业双卡 | .hall .home-grid .task-card | 浅灰底独立小卡（bg + border + r-12 + padding 20） |
引导条 Guide-bar
| class | 说明 |
|---|
.guide-label | 左侧标签"完成顺序"，右竖线分隔 |
.guide-steps | flex:1 容器，内含 step + arrow 交替 |
.guide-step | flex:1; min-width:0; 等宽分布 |
.guide-num | 28px 圆形序号，状态色背景 |
.guide-info | 名称+状态，overflow:hidden + ellipsis 截断 |
.guide-arrow | 步骤间箭头，flex-shrink:0 |
| 状态 | 序号背景 | 名称色 | 说明 |
|---|
.active | primary-600 + 3px 光环 | primary-600 | 当前进行（学新） |
.progress | teal-500 + 3px 光环 | teal-600 | 也在进行（复习） |
.pending | bg-2 | text-3 | 待开始（作业） |
关键修复经验：引导条 .guide-step 必须用 flex:1; min-width:0 + 文字 overflow:hidden; text-overflow:ellipsis，overflow:hidden 放在 .hall 父级而非 .hall-guide，否则中间步骤会被裁切。
18组件库：进度环形图 Progress-ring
SVG 实现的今日进度环，替代原 mascot 位置。
Progress-ringSVG circle + stroke-dasharray
| 令牌/元素 | 值 | 说明 |
|---|
| 轨道 | .progress-ring-track | stroke: bg-2, width:10 |
| 进度 | .progress-ring-bar | stroke: primary-600, width:10, linecap:round |
| 计算公式 | r=44, C=2*pi*44=276.46; offset = C * (1 - pct/100) |
| 示例 38% | dasharray:276.46; offset:171.41 (=276.46*0.62) |
| 居中文字 | .prc-pct | 28px/800 primary-600 |
19页面布局结构
首页自上而下 5 层结构（标准版）。
① 顶部导航 Topnav（60px sticky）
② 欢迎区 Hero-card（问候 + 日期 + 连续天数）
② 进度环 Progress-ring（38% / 3/8）
③ 单词识记
③ 同步教材
③ 阅读理解
③ 语法训练
④ 学习大厅 Hall（单一白卡）
hall-head → hall-guide → hall-zone(学新) → hall-zone(复习) → hall-zone(作业)
⑤ 学习数据（4 stat-item）
⑤ 专项训练（train-list）
各层规格
| 层 | 组件 | 关键参数 |
|---|
| ① | Topnav | 60px / sticky / max-width 无（全宽） |
| ② | Hero + Ring | grid 1fr/220px / hero-card r-20 + sh-2 + 装饰圆 |
| ③ | Modules | grid repeat(4,1fr) / gap 14px / .mod card-hover |
| ④ | Hall | 单一白卡 / r-20 / sh-2 / 顶部三色彩条 / 内含 guide + 3 zones |
| ⑤ | Aux | grid 1.5fr/1fr / aux-title 分隔 / card + stat-row 或 train-list |
页面容器：.page max-width:1200px / margin auto / padding 24px 24px 64px。
20响应式策略
v3.2 五档断点体系，覆盖 PC / 平板横竖屏 / 大小手机，全部端口无样式 BUG。
| 断点 | 触发 | 布局变化 |
|---|
| 桌面 | >1024px | 全部默认布局 |
| 平板横屏 | max-width:1024px | 收拢页面留白（page/modules/hall-inner padding 收窄） |
| 平板竖屏 | max-width:920px | 顶部导航切汉堡菜单 / hero 单列 / 进度环转横向紧凑卡（不再隐藏） / modules 2列 / home-grid、aux 1列 / 引导条 label 与 steps 上下排布 |
| 手机 | max-width:768px | 引导条三步骤纵向时间线（箭头旋转90°朝下）/ task-top 纵向 / task-foot 按钮全宽 / zone-head 换行 |
| 小屏手机 | max-width:540px | page padding 14px / modules 卡片纵向排列 / stat 2×2 网格 / 进度环缩至 64px |
| 极小屏 | max-width:380px | modules 单列 / 标题降一级字号 |
移动端导航（底部 TabBar · 2026-09-10 起）
| 要素 | 规范 |
|---|
| 触发 | max-width:920px 隐藏 .nav-links + .nav-toggle，显示 .bottom-nav（fixed bottom） |
| 结构 | <nav class="bottom-nav"><div class="bn-list"><a class="bn-item">...</a>×6</div></nav>，6 等分 grid |
| 尺寸 | 高度 56px + env(safe-area-inset-bottom) · 每项 ≥60px 触控区 · 图标 20px / 文字 10px |
| 激活态 | 橙图标（scale 1.08）+ 橙粗字（fw-600）+ 顶部 2px 圆角橙高亮条（18px 宽），与桌面端顶部下划线语义一致 |
| 非激活态 | --o-text-4（冷灰辅助色）；:active 点击反馈 --o-bg |
| 激活判断 | JS 自动按 URL pathname 末段匹配 .bn-item[href] 并加 .active（v1-orange 用 href="#" 兜底） |
| 内容预留 | body padding-bottom:calc(56px + safe-area) 防止最后一行内容被遮挡 |
| 历史 | 2026-09-10 之前为汉堡下拉菜单（已废弃） |
响应式原则（v3.2）：移动端不隐藏任何任务数据——进度环降级为横向紧凑卡而非 display:none；引导条纵向堆叠为时间线；操作按钮全宽化保证触控；断点从大到小逐级收紧，禁止跳档。
横向溢出防护：全局 html,body{overflow-x:hidden} + *{box-sizing:border-box}，从根上杜绝移动端横向滚动条；任何元素禁止使用会撑破视口的固定宽度。
21编码约定
后续所有页面开发必须遵循以下约定。
文件组织
| 文件 | 说明 |
|---|
shared-orange.css | 全局共享令牌 + 通用组件样式。所有页面必须引入 |
xxx.html | 各页面文件，内含页面专属 <style> + SVG sprite + HTML |
CSS 约定
必须：所有颜色/字号/间距/圆角/阴影通过 var(--o-*) 引用；页面专属样式放在页面内 <style> 中；新增令牌添加到 shared-orange.css 的 :root。
禁止：硬编码十六进制色值（一次性 style 除外）；使用 emoji 图标；使用纯黑 rgba(0,0,0,...) 阴影；引入外部 CSS 框架。
HTML 约定
必须：每页顶部内嵌完整 SVG sprite（从精修版复制）；<link rel="stylesheet" href="shared-orange.css"> 放 head；body 设 class 为页面标识。
双通道引入（v1.1）：外链之后紧跟一份 <style> 内嵌兜底样式（完整复制 shared-orange.css 内容，标注「内嵌兜底样式」注释）。本地预览/沙箱环境无法加载相对路径 CSS 时由内嵌副本生效。注意：每次修改 shared-orange.css 后需同步更新各页面内嵌副本。
SVG 图标约定
规范：viewBox="0 0 24 24" / stroke-width="2" / stroke-linecap="round" / stroke-linejoin="round" / fill="none" / 装饰路径加 opacity=".35"。引用方式：<svg class="ico"><use href="#i-xxx"/></svg>。
动画约定
入场序列：区块从上到下依次 .fade-up + .delay-1 ~ .delay-5，60ms 递增。状态动画：doing 步骤 dot 使用 pulse 2s 无限循环。
22文件结构
当前项目目录结构（清理后）。
| 路径 | 说明 | 状态 |
|---|
shared-orange.css | 全局设计令牌 + 通用组件 | 核心 · 不可删 |
v1-orange.html | 精修标准版首页（唯一默认基线） | 核心 · 不可删 |
archive/v1-orange-alt.html | 精修左侧面板变体（已冻结，不再同步维护） | 归档 · 仅历史参考 |
design-spec.html | 本规范文档 | 核心 · 不可删 |
index.html | 方案对比导航页 | 入口 |
archive/ | 早期探索版归档 | 归档 · 不再使用 |
后续页面命名建议
| 页面 | 建议文件名 |
|---|
| 单词学习页 | word-study.html |
| 阅读理解页 | reading.html |
| 语法训练页 | grammar.html |
| 作业本页 | homework.html |
| 错词本页 | mistakes.html |
| 排行榜页 | ranking.html |
| 个人中心页 | profile.html |
| 英语测评页 | assessment.html |
| 登录页 | login.html |
所有后续页面均放在本目录下，引入 shared-orange.css，复制 SVG sprite，遵循本规范组件与令牌。