# UI 美化设计文档

> Echo 设计 | 梦幻但克制 · 温柔 · 神秘 · 探索感

## 设计哲学

### Val 的气质映射

| 特质 | 设计表达 |
|------|----------|
| 温柔 | 圆润的边角、柔和的渐变、低对比度配色 |
| 神秘 | 深邃的暗色基底、微妙的光晕效果 |
| 探索感 | 悬停时的微动效、卡片hover的"发光"反馈 |
| 克制 | 留白充足、动画极简、不喧宾夺主 |

## 色板

### 主色调（梦幻蓝紫系）

```
--color-bg-deep:      #0a0c14    /* 深海背景 */
--color-bg-surface:   #111320    /* 卡片/表面层 */
--color-bg-elevated:  #161829    /* 悬停/激活态 */
--color-border:       rgba(148, 163, 184, 0.1)  /* 细腻边框 */
```

### 强调色（月光系）

```
--color-accent:       #a5b4fc    /* 月光蓝紫 - 链接主色 */
--color-accent-soft:  #818cf8    /* 柔和紫 - hover态 */
--color-accent-glow:  rgba(165, 180, 252, 0.15) /* 光晕效果 */
--color-gold:         #fbbf24    /* 罗盘金 - 重点标记 */
```

### 文字色阶

```
--color-text-primary:   #e2e8f0    /* 主文字 - 月白 */
--color-text-secondary: #94a3b8    /* 次要 - 星灰 */
--color-text-muted:     #64748b    /* 弱化 - 远星 */
```

## 字体策略

### 字体栈

```css
font-family:
  "PingFang SC",          /* 苹方 - 首选 */
  "Hiragino Sans GB",     /* 冬青黑 - mac备选 */
  "Microsoft YaHei",      /* 微软雅黑 - Win */
  "Noto Sans SC",         /* 思源 - 通用 */
  -apple-system,
  sans-serif;
```

### 排版层级

| 元素 | 字号 | 字重 | 行高 | 字间距 |
|------|------|------|------|--------|
| 站点标题 | 1.75rem | 500 | 1.3 | 0.02em |
| H2 标题 | 1.5rem | 600 | 1.4 | 0 |
| 文章标题 | 1.875rem | 600 | 1.3 | 0 |
| 正文 | 1.0625rem | 400 | 1.85 | 0.01em |
| 小字/日期 | 0.875rem | 400 | 1.5 | 0.02em |

## 间距系统

```
--space-xs: 0.5rem   (8px)
--space-sm: 0.75rem  (12px)
--space-md: 1rem     (16px)
--space-lg: 1.5rem   (24px)
--space-xl: 2rem     (32px)
--space-2xl: 3rem    (48px)
```

## 组件设计

### 卡片（Journey Card）

- 背景：`--color-bg-surface`
- 圆角：`12px`
- 边框：`1px solid var(--color-border)`
- 阴影：`0 1px 3px rgba(0,0,0,0.3)`
- Hover：边框变亮 + 微光晕 + 轻微上浮

### 导航

- 固定顶部，毛玻璃效果
- 站点标题带微妙渐变文字
- 移动端汉堡菜单（预留）

### 链接与按钮

- 默认：`--color-accent`，无下划线
- Hover：颜色加深 + 下划线动画滑入
- 过渡：`all 0.2s ease`

## 动效规范

| 场景 | 效果 | 时长 | 缓动 |
|------|------|------|------|
| 卡片Hover | translateY(-2px) + border亮 | 200ms | ease-out |
| 链接Hover | 下划线滑入 | 200ms | ease |
| 页面加载 | 淡入 + 微上移 | 400ms | ease-out |

**原则**：所有动画使用 `prefers-reduced-motion` 媒体查询保护

## 响应式断点

```
Mobile:  < 640px   单列，紧凑间距
Tablet:  640-1024px  稍宽边距
Desktop: > 1024px   max-width: 720px居中
```

## 后续可优化项

1. **字体升级**
   - 引入霞鹜文楷或思源宋体作为标题字体
   - 使用 Web Font Loader 异步加载

2. **交互动效**
   - 页面切换平滑过渡
   - 滚动时导航栏背景渐变加深
   - 文章阅读进度条

3. **暗色主题增强**
   - 支持系统级 `prefers-color-scheme`
   - 提供手动主题切换按钮

4. **图片支持**
   - 文章头图封面
   - 懒加载 + 模糊占位

5. **搜索功能**
   - 静态搜索（Fuse.js）
   - 实时高亮匹配

6. **社交分享**
   - Open Graph 图片自动生成
   - 分享按钮组件

## 实现文件

| 文件 | 作用 |
|------|------|
| `static/css/main.css` | 主样式表 |
| `layouts/_default/baseof.html` | 基础布局 |
| `layouts/index.html` | 首页 |
| `layouts/_default/single.html` | 文章页 |
| `layouts/partials/nav.html` | 导航组件（新增） |