探索中

Frank’s Lab 官网设计文档

Frank’s Lab 官网设计文档

项目概述

项目名称: Frank’s Lab 官网 域名: frankzh.top 用户类型: 技术小白（0代码水平） 目标: 创建一个展示个人项目和实验室形象的官方网站

设计理念

核心定位

  • 技术探索者: 体现对技术的好奇心和探索精神
  • 创新工坊: 展示实验性的项目和创新的思维
  • 个人成长记录: 主要为未来的自己回顾技术探索的心路历程

目标受众

  • 主要：未来的自己（记录和回顾）
  • 次要：技术社区、同行（展示和交流）

技术方案

选型：GitHub Pages + Jekyll 主题

选择理由:

  • GitHub Pages 原生支持 Jekyll，无需额外配置
  • 完全免费，不限流量
  • 支持自定义域名
  • 用户不需要写任何代码
  • 部署简单，维护容易

技术特点

  • 类型: 静态网站
  • 托管: GitHub Pages
  • 主题系统: Jekyll 主题
  • 构建语言: Liquid 模板
  • 样式系统: SCSS
  • 依赖: 零依赖（无需 Node.js、数据库等）

功能需求

核心功能

  1. 多语言支持
    • 自动检测浏览器语言
    • 中文/英文切换按钮
    • 语言包：zh.yml, en.yml
  2. 项目展示
    • 项目卡片网格布局
    • 项目信息展示（名称、编号、状态、简介）
    • 点击直接跳转到项目页面
  3. 响应式设计
    • 桌面端：3-4列网格
    • 平板端：2-3列网格
    • 移动端：1列布局
  4. 状态管理
    • 进行中（running）
    • 已完成（completed）
    • 暂停（paused）

非功能需求

  • 加载速度 < 3秒
  • 支持主流浏览器
  • SEO 友好
  • 无障碍访问

设计规范

视觉风格

主题: 深色科技感实验室风格

色彩方案:

  • 主背景: #0a0a1a (深空蓝)
  • 卡片背景: rgba(255, 255, 255, 0.08)
  • 强调色: #00d4ff (青色发光)
  • 文字主色: #ffffff
  • 文字次色: #cccccc

字体系统:

  • 标题: ‘Orbitron’ (科技感英文字体)
  • 正文: ‘Inter’, ‘PingFang SC’, ‘Microsoft YaHei’
  • 代码: ‘Fira Code’, monospace

动画效果

  • 背景: 缓慢流动的网格线条
  • 卡片: hover 时的发光边框 + 轻微浮起
  • 状态指示器: 呼吸灯效果

组件设计

1. LabHeader 组件

  • 实验室标题
  • 状态指示器（探索中✓）
  • 语言切换按钮

2. ExperimentCard 组件

  • 项目编号
  • 项目名称（双语）
  • 状态指示（带颜色）
  • 项目简介（双语）
  • Hover 动画效果

3. ExperimentGrid 组件

  • 响应式网格布局
  • 数据驱动的卡片渲染
  • 自适应列数

4. LabFooter 组件

  • 成立时间
  • 探索领域（双语）

数据结构

项目配置 (_data/projects.yml)

projects:
  - id: "001"
    name:
      zh: "项目名称"
      en: "Project Name"
    url: "https://project-url.com"
    status: "running"  # running/completed/paused
    brief:
      zh: "一句话中文简介"
      en: "One-sentence English brief"

实验室信息 (_data/lab-info.yml)

lab:
  established: "2024"
  areas:
    zh: "AI, Web开发, 工具创新"
    en: "AI, Web Development, Tool Innovation"

语言包结构

# zh.yml / en.yml
lab:
  title: "Frank's Lab"
  subtitle: "实验室控制台"
  status: "探索中"

experiment:
  id: "实验编号"
  status: "状态"
  brief: "简介"
  # 状态映射...

文件结构

frank-lab.github.io/
├── _config.yml                    # 主配置文件
├── _data/
│   ├── projects.yml               # 项目列表
│   └── lab-info.yml               # 实验室信息
├── _locales/
│   ├── zh.yml                     # 中文语言包
│   └── en.yml                     # 英文语言包
├── _layouts/
│   ├── home.html                  # 主页布局
│   └── default.html               # 默认布局
├── _includes/
│   ├── header.html                # 头部组件
│   ├── footer.html                # 底部组件
│   └── language-switcher.html    # 语言切换
├── assets/
│   ├── css/
│   │   └── main.scss              # 科技感样式
│   └── images/
│       └── favicon.ico            # 网站图标
└── index.html                     # 主页入口

部署流程

阶段一：准备工作

  1. 准备项目信息清单
  2. 准备域名 DNS 信息

阶段二：创建仓库

  1. 登录 GitHub
  2. 创建仓库 frank-lab.github.io
  3. 上传文件

阶段三：配置内容

  1. 编辑配置文件
  2. 填入项目信息
  3. 填入实验室信息

阶段四：部署上线

  1. 开启 GitHub Pages
  2. 等待部署完成
  3. 测试网站访问

阶段五：域名绑定

  1. 添加 DNS 解析记录
  2. 配置 GitHub 自定义域名
  3. 等待 DNS 生效

预计时间: 30-60 分钟

用户要求

用户水平

  • 技术小白
  • 0代码水平
  • 不愿意学习编程

用户责任

  • 创建 GitHub 账号
  • 填写项目信息
  • 配置域名 DNS
  • 按指导操作

AI 责任

  • 提供完整代码和配置
  • 一对一部署指导
  • 问题解答和技术支持

质量标准

视觉质量

  • 科技感设计明显
  • 颜色对比符合 WCAG 标准
  • 动画流畅不卡顿
  • 加载速度快

代码质量

  • 代码结构清晰
  • 注释完整
  • 易于维护
  • 遵循最佳实践

用户体验

  • 语言切换流畅
  • 导航直观清晰
  • 响应式适配完善
  • 无障碍访问支持

风险评估

技术风险

  • 低: GitHub Pages 服务稳定性高
  • 低: Jekyll 成熟稳定
  • 中: 主题兼容性需要测试

用户风险

  • 低: 配置简单，不容易出错
  • 中: DNS 配置可能需要用户协助
  • 低: 不涉及编程，学习成本低

部署风险

  • 低: GitHub Pages 部署自动完成
  • 中: 域名 DNS 生效时间不确定
  • 低: HTTPS 自动支持

成功标准

功能完整性

  • ✅ 多语言切换正常
  • ✅ 项目卡片显示正确
  • ✅ 链接跳转正常
  • ✅ 响应式适配完成

性能指标

  • ✅ 首屏加载 < 3秒
  • ✅ Lighthouse 性能分数 > 90
  • ✅ 移动端体验良好

用户体验

  • ✅ 语言切换流畅
  • ✅ 设计符合科技感要求
  • ✅ 用户能够独立完成项目添加

后续扩展

可能的增强功能

  • 项目搜索功能
  • 项目标签分类
  • 访问统计
  • RSS 订阅

维护需求

  • 定期更新项目信息
  • 主题更新（如有需要）
  • 域名续费

文档版本: 1.0 创建日期: 2026-03-26 设计者: Claude (Sonnet 4.6) 状态: 待审查