64 lines
1.5 KiB
Markdown
64 lines
1.5 KiB
Markdown
# Val-Blog 前端重做 — 设计需求文档
|
|
|
|
**创建时间**: 2026-04-26 13:50 GMT+8
|
|
**任务来源**: 谷老板指令
|
|
**负责人**: Helix (前端设计专家)
|
|
|
|
---
|
|
|
|
## 核心设计要素
|
|
|
|
### 1. WebGL / Three.js 交互
|
|
- 首页需要有引人入胜的 3D 视觉效果
|
|
- 考虑粒子系统、流体效果或抽象几何形态
|
|
- 支持鼠标/触摸交互
|
|
- 性能优化：检测设备能力，低性能设备降级为 CSS 动画
|
|
|
|
### 2. 滚动驱动动画 (Scroll-driven storytelling)
|
|
- 页面滚动作为主要叙事节奏控制
|
|
- 使用 GSAP ScrollTrigger 或类似方案
|
|
- 内容区块随滚动渐进式呈现
|
|
- 平滑的视差层次效果
|
|
|
|
### 3. 非线性导航
|
|
- **不是传统菜单式导航**
|
|
- 考虑以下方案：
|
|
- 空间地图/星图导航
|
|
- 3D 轨道/路径导航
|
|
- 手势/滚动触发的章节跳转
|
|
- 视觉化的内容拓扑
|
|
|
|
### 4. 视差 + 3D 空间
|
|
- 多层次的视差效果
|
|
- Z 轴深度感
|
|
- 相机移动/透视变换
|
|
- 沉浸式的空间叙事
|
|
|
|
---
|
|
|
|
## 技术约束
|
|
|
|
- 保持 Hugo 静态站点架构
|
|
- 主题目录: `val-blog/themes/dreamscape/`
|
|
- 需要兼容移动端
|
|
- 考虑减少运动偏好 (prefers-reduced-motion)
|
|
- 中国地区访问友好（避免 Google Fonts 等）
|
|
|
|
---
|
|
|
|
## 现有资源参考
|
|
|
|
- 当前主题路径: `val-blog/themes/dreamscape/`
|
|
- 现有 Canvas 星空实现可参考
|
|
- 现有 CSS 变量和颜色系统
|
|
- 文章结构: journey / sketch / gallery / essay
|
|
|
|
---
|
|
|
|
## 下一步
|
|
|
|
等待 Helix 输出：
|
|
1. 概念设计方案
|
|
2. 技术选型建议
|
|
3. 实现里程碑
|