init doc

docs/UI设计需求文档.md

@@ -0,0 +1,175 @@
+# 摄影作品集网站 - 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 导航组件
+```css
+.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变量和类名规范