155 lines
3.8 KiB
Markdown
155 lines
3.8 KiB
Markdown
# 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` | 导航组件（新增） |
|