PRD: 设计师风格学术主页重构（MVP）
PRD: 设计师风格学术主页重构（MVP）
1. 项目背景
当前主页以“信息罗列”为主，学术信息完整，但“设计师身份”与“交互设计能力”表达不足。
本次目标是先搭建一个高设计感、可持续迭代的主页框架，内容可先用占位文本，后续逐步填充。
2. 目标与非目标
2.1 目标
- 将首页从“简历式内容堆叠”重构为“设计师作品化叙事”。
- 同时表达三重身份：
Researcher / HCI Designer / XR Designer。 - 保持 GitHub Pages 兼容，继续使用
Jekyll + AcademicPages。 - 保留双语切换和明暗主题切换能力。
- 以结构和视觉系统优先，内容精细化后置。
- 实现真正自适应布局，并充分利用横向空间（尤其是平板与桌面端）。
2.2 非目标
- 本阶段不追求 3D 引擎级场景（Three.js 重型方案）。
- 不做后台 CMS，不引入重依赖构建链。
- 不做论文/项目数据源自动抓取（Scholar/ResearchGate API）。
3. 用户与使用场景
3.1 核心用户
- 学术合作方（导师/研究者）
- 招聘与合作方（HCI/XR 团队、企业）
- 同行设计师与开发者
3.2 核心场景
- 10 秒内识别你的定位与能力边界。
- 1 分钟内看到代表性项目与研究方向。
- 3 分钟内完成联系或进入 CV/论文详情。
4. 品牌与视觉定位
4.1 品牌关键词
Calm TechResearch-driven DesignXR Interaction Craft
4.2 视觉方向
- 风格：
Apple 的精密感 + MUJI 的克制感，简洁但不单调。 - 布局：大留白、强层次、卡片系统化，减少“信息墙”。
- 图形语言：细线网格、低饱和中性色、少量点缀色、轻材质阴影。
- 动效：慢节奏、低幅度、连续性过渡（避免花哨与跳跃）。
4.3 风格基准（Apple × MUJI）
- Apple 向：高精度对齐、清晰层级、可读性优先、组件边界干净。
- MUJI 向：留白充足、内容克制、减少装饰性元素、强调触感与秩序。
- 禁止项：高饱和大面积渐变、夸张玻璃拟态、重特效背景、过强动效。
4.4 语气
- 短句、结论先行、避免大段自述。
- 每个模块一句价值主张 + 1-2 个动作链接。
5. 信息架构（新版）
5.1 顶层导航（建议）
- Home（首页）
- Works（项目作品）
- Research（研究方向）
- Publications（论文成果）
- CV（简历）
- Contact（联系）
5.2 首页结构（核心重构）
- Hero：身份 + 价值主张 + CTA
- Capability Strip：3-4 个能力标签（HCI / XR / Eye Tracking / Prototyping）
- Featured Works：精选项目卡片（先占位）
- Research Snapshots：研究方向快照卡片
- Publications Digest：最近论文摘要卡
- Collaboration CTA：联系与合作入口
5.3 内页结构策略
- Works：按类别筛选（VR / Eye Tracking / ML）
- Research：主题-问题-方法-产出四段式
- Publications：状态标签（Published / Under Review / Accepted）
- CV：保留结构化时间线，不再纯文本堆叠
6. 关键交互规范
6.1 轻三维视觉（保性能）
- 卡片 hover：
rotateX/rotateY + translateY小幅变化。 - 滚动视差：前景/中景/背景 3 层速率差。
- Reveal：首屏外模块进入视窗后淡入上移。
- 动效时长建议：
180ms / 280ms / 420ms三档，统一缓动曲线。
6.2 版式与排版规范（新增）
- 栅格：桌面端 12 栏，移动端 4 栏。
- 间距系统：8pt 基线（8/16/24/40/64）。
- 圆角系统：8 / 12 / 16 三档，避免混乱。
- 字体策略： 中文：
Noto Sans SC（正文）+Noto Serif SC（标题可选）。 英文：SF Pro / Inter（正文）+New York / Source Serif（标题可选）。 - 段落宽度：正文建议
56-72字符，提升阅读舒适度。
6.3 自适应与横向空间利用（新增硬约束）
- 布局模式：从“单列居中”改为“响应式多列 + 区块化容器”。
- 桌面端（>=1440px）： 使用宽容器，主内容区可扩展到
minmax(1100px, 92vw)； 首页模块优先采用 2-4 列卡片布局，不允许全部堆叠为单列。 - 常规桌面（1024-1439px）： 内容区目标宽度
88-92vw，保留左右安全边距； 项目/论文卡片至少 2 列。 - 平板（768-1023px）： 采用 6-8 栏栅格，卡片 2 列优先，必要时降为 1 列。
- 手机（<768px）： 单列为主，保证可读性与点击区域（>=44px）。
- 侧栏策略： 在宽屏下允许“侧栏 + 主内容”并排，不再固定压缩到中间窄列。 若页面内容稀疏，使用横向分区（例如 30/70、40/60）提升空间利用率。
- 图片与媒体： 首页封面图/项目图在宽屏可使用更大比例（16:9 或 21:9），避免小图居中悬浮感。
6.4 双语与主题
- 右上角保留：
Theme Toggle+ZH/EN Toggle。 - 主题策略：系统优先 + 用户手动覆盖（localStorage）。
- 文案策略：短文本双语并置，长文本按语言切换显示。
- 双色建议： Light：暖白底 + 深灰文字 + 少量蓝灰点缀。 Dark：深灰底 + 低亮文字 + 减弱对比高光。
6.5 可访问性
- 对比度满足 WCAG AA。
- 所有按钮/筛选项可键盘聚焦。
- 动画遵循
prefers-reduced-motion。
7. 内容策略（当前阶段）
7.1 原则
- 框架优先，内容后补。
- 仅保留公开信息，不放未公开细节。
- 过时内容标记为
Legacy或暂时隐藏。
7.2 最小内容集（MVP）
- 1 条主身份宣言（中英）
- 3 个能力标签
- 3 个精选项目卡片（可占位）
- 2 个研究方向卡片
- 3 条论文卡（含状态）
- 1 组联系渠道
8. 技术约束与实现方案
8.1 技术约束
- 平台：GitHub Pages
- 栈：Jekyll + Liquid + SCSS + Vanilla JS
- 构建：避免 Node 重度依赖
8.2 文件映射（与现仓库对应）
- 首页内容：
_pages/about.md - 导航：
_data/navigation.yml - 论文页：
_pages/publications.md - 项目页：
_pages/portfolio.html - 研究页：
_pages/research.md - 全局交互脚本：
_includes/footer/custom.html - 视觉系统样式：
_sass/_custom.scss
8.3 组件化建议
hero-blockcapability-chip-groupfeature-cardresearch-snapshot-cardpublication-mini-cardcta-panel
9. MVP 范围（本轮建议）
9.1 必做
- 首页重构为 6 段式叙事结构。
- 建立统一卡片系统与视觉 token（颜色、圆角、阴影、间距）。
- 完成移动端适配（375px 起）。
- 完成响应式断点与多列布局改造，消除“中间窄列”问题。
- 双语/主题控件视觉统一。
- 完成 Apple × MUJI 风格走查清单（对齐、留白、色彩、动效）。
9.2 延后
- 复杂 3D 场景
- 自动同步 Scholar/ResearchGate
- 博客系统与搜索增强
10. 验收标准（Definition of Done）
- 首屏 10 秒内可识别“你是谁 + 你做什么 + 如何联系你”。
- 首页信息密度下降，视觉层级清晰（不再“文本墙”）。
- 页面视觉符合 Apple × MUJI 清单：克制、秩序、精密、易读。
- 宽屏（>=1440px）页面内容区宽度显著提升，横向空间利用率达标。
- 关键区块（项目/论文/研究卡）在桌面端默认至少 2 列展示。
- 移动端无布局破损，关键模块可读。
- 所有页面无 Liquid 报错、无乱码、无冲突标记。
- GitHub Pages Actions 可成功构建部署。
11. 风险与应对
风险：内容仍旧过时，影响可信度。
应对：在卡片层增加Updated字段，逐步清理旧条目。风险：视觉过度导致学术感下降。
应对：控制动效强度，保持留白和排版秩序。风险：本地 Ruby 环境与 GitHub Pages 不一致。
应对：优先以 GitHub Actions 构建结果为准，本地仅做静态检查。
12. 迭代计划
Sprint 1（结构）
- 完成首页 6 段式骨架与样式 token。
- 完成内页头部统一（标题/副标题/状态标签）。
Sprint 2（表现）
- 完成轻三维视觉交互（hover tilt + parallax + reveal）。
- 优化移动端布局与性能。
Sprint 3（内容）
- 更新项目与论文条目元数据。
- 完成中英文案精修与统一语气。
13. 成功指标（可选）
- 平均停留时长提升。
- 首页到项目页点击率提升。
- 联系入口点击率提升。
- 跳出率下降。