iriver/photography
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
photography/docs/原始 prd/UI设计需求文档.md
xujiang 9e381c783d
All checks were successful
Deploy Frontend / deploy (push) Successful in 2m38s
Details
feat: 重构项目为模块化结构，拆分 CLAUDE.md 文档 
## 📁 模块化重构

### 新增模块 CLAUDE.md
- `frontend/CLAUDE.md` - 前端开发指导 (Next.js, React, TypeScript)
- `docs/deployment/CLAUDE.md` - 部署配置指导 (Caddy, 服务器配置)
- `.gitea/workflows/CLAUDE.md` - CI/CD 流程指导 (Gitea Actions)

### 根目录 CLAUDE.md 优化
- 重构为项目概览和模块导航
- 提供模块选择指导
- 减少单个文件的上下文长度

### 自动化机制
- 创建 `scripts/update-claude-docs.sh` 自动更新脚本
- 集成到 pre-commit hooks 中
- 文件变更时自动更新对应模块的 CLAUDE.md

## 🎯 优化效果

### 上下文优化
- 每个模块独立的 CLAUDE.md 文件
- 大幅减少单次处理的上下文长度
- 提高 Claude 处理效率和准确性

### 开发体验
- 根据工作内容选择对应模块
- 模块化的文档更聚焦和专业
- 自动维护文档时间戳

### 项目结构
```
photography/
├── CLAUDE.md                    # 项目概览和模块导航
├── frontend/CLAUDE.md          # 前端开发指导
├── docs/deployment/CLAUDE.md   # 部署配置指导
├── .gitea/workflows/CLAUDE.md  # CI/CD 流程指导
└── scripts/update-claude-docs.sh # 自动更新脚本
```

现在 Claude 工作时只需关注单个模块的文档，大幅提升处理效率！
2025-07-09 10:54:08 +08:00

4.4 KiB
Raw Permalink Blame History

摄影作品集网站 - UI设计需求文档

1. 项目概述

1.1 项目定位

个人摄影作品展示网站，专注于高品质的视觉呈现和用户体验。

1.2 设计目标

  • 极简美学：突出作品本身，减少视觉干扰
  • 专业感：体现摄影师的专业水准
  • 沉浸式体验：让用户专注于作品欣赏
  • 响应式设计：全设备完美适配

2. 设计风格指南

2.1 色彩方案

  • 主色调：深色主题（#1a1a1a, #2d2d2d）
  • 辅助色：纯白文字（#ffffff）
  • 强调色：温暖金色（#d4af37）用于按钮和链接
  • 背景色：渐变深灰（#0f0f0f 到 #1e1e1e）

2.2 字体系统

  • 标题字体：Modern Sans（如 Inter, SF Pro）
  • 正文字体：清晰易读的无衬线字体
  • 字重层次：Light(300), Regular(400), Medium(500), Bold(700)

2.3 视觉层次

  • 一级标题：32px-48px，Bold
  • 二级标题：24px-32px，Medium
  • 正文：16px-18px，Regular
  • 说明文字：14px，Light

3. 页面布局设计

3.1 首页布局

[导航栏 - 固定在顶部]
[英雄区域 - 全屏背景图/视频]
  - 摄影师姓名
  - 简短介绍
  - CTA按钮
[精选作品网格 - 3x2]
[关于简介预览]
[页脚]

3.2 作品集页面

[面包屑导航]
[分类筛选器 - 水平排列]
[作品网格展示]
  - 瀑布流布局
  - 悬停效果
  - 快速预览
[分页导航]

3.3 作品详情页

[返回按钮]
[大图展示区域]
  - 支持缩放
  - 前后导航
[作品信息侧栏]
  - 标题、描述
  - 拍摄参数
  - 时间地点
[相关推荐]

3.4 时间线页面

[年份导航]
[时间线主体]
  - 垂直时间轴
  - 按月份分组
  - 缩略图预览
  - 作品数量统计

4. 交互设计规范

4.1 悬停效果

  • 图片悬停：轻微放大(1.05x) + 蒙层显示标题
  • 按钮悬停：颜色渐变 + 轻微阴影
  • 导航悬停：下划线动画

4.2 加载动画

  • 页面加载：优雅的骨架屏
  • 图片加载：从模糊到清晰的渐进式加载
  • 切换动画：平滑的页面过渡

4.3 响应式交互

  • 移动端：手势滑动支持
  • 桌面端：键盘快捷键支持
  • 触摸优化：合适的点击区域大小

5. 组件设计规范

5.1 导航组件

.navigation {
  position: fixed;
  top: 0;
  backdrop-filter: blur(10px);
  background: rgba(26, 26, 26, 0.9);
  padding: 20px;
  z-index: 1000;
}

5.2 图片网格组件

  • 网格间距：16px-24px
  • 图片比例：保持原始比例
  • 最小尺寸：移动端 150px，桌面端 250px
  • 最大列数：桌面4列，平板3列，手机2列

5.3 模态框组件

  • 背景蒙层：rgba(0, 0, 0, 0.8)
  • 关闭方式：ESC键 + 点击蒙层 + 关闭按钮
  • 内容区域：最大宽度90vw，最大高度90vh

6. 移动端适配

6.1 断点设置

  • 手机：< 768px
  • 平板：768px - 1024px
  • 桌面：> 1024px
  • 大屏：> 1440px

6.2 移动端优化

  • 触摸友好：按钮最小44px
  • 滑动操作：支持左右滑动浏览
  • 下拉刷新：原生滑动体验
  • 底部导航：重要功能快速访问

7. 性能优化设计

7.1 图片优化

  • 懒加载：视口外图片延迟加载
  • 渐进式：先显示缩略图再加载高清
  • 格式优化：WebP格式优先，降级JPG
  • 尺寸适配：根据设备提供合适尺寸

7.2 加载体验

  • 骨架屏：内容加载前的占位
  • 进度指示：长时间加载的进度反馈
  • 错误状态：网络异常的友好提示

8. 辅助功能设计

8.1 可访问性

  • 键盘导航：所有功能键盘可操作
  • 屏幕阅读器：适当的ARIA标签
  • 对比度：满足WCAG 2.1 AA标准
  • 焦点指示：清晰的焦点样式

8.2 多语言支持

  • 语言切换：顶部导航显眼位置
  • 文字方向：支持RTL语言
  • 日期格式：本地化日期显示

9. 设计交付物

9.1 设计稿要求

  • 高保真原型：Figma/Sketch源文件
  • 设计规范：详细的设计系统文档
  • 交互说明：动效和交互的详细说明
  • 响应式方案：各断点的适配方案

9.2 开发协作

  • 组件库：可复用的UI组件
  • 图标资源：SVG格式图标集
  • 字体文件：web font资源
  • 样式指南：CSS变量和类名规范