# 摄影作品集网站 - 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变量和类名规范