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