451 lines
11 KiB
Markdown
451 lines
11 KiB
Markdown
# 设计文档交付说明
|
||
|
||
## 📁 已创建的文件
|
||
|
||
本次设计工作在 `/home/xsl/code/ocean_project_manager/docs/desigen/` 目录下创建了以下文件：
|
||
|
||
### 1. 设计哲学文档
|
||
**文件名**: `design-philosophy.md`
|
||
|
||
**内容概述**:
|
||
- 定义了"企业精确"（Corporate Precision）设计哲学
|
||
- 强调精确秩序、功能主义色彩、空间呼吸感
|
||
- 体现了经过精心打磨的专业设计美学
|
||
- 为整个设计系统提供理论指导
|
||
|
||
---
|
||
|
||
### 2. 前端页面设计参考文档
|
||
**文件名**: `frontend-pages-reference.md`
|
||
|
||
**内容概述**:
|
||
详细描述了系统所有页面的设计规范，包括：
|
||
|
||
#### 页面清单:
|
||
1. **登录页面** (Login Page)
|
||
- 全屏居中布局
|
||
- 表单交互设计
|
||
- 错误处理机制
|
||
|
||
2. **仪表盘页面** (Dashboard)
|
||
- 4个统计卡片设计
|
||
- 项目趋势图区域
|
||
- 最近项目列表
|
||
|
||
3. **项目列表页面** (Project List)
|
||
- 工具栏设计（搜索、筛选、新建）
|
||
- 表格布局规范
|
||
- 分页控件设计
|
||
|
||
4. **项目详情页面** (Project Detail)
|
||
- 面包屑导航
|
||
- 信息卡片分组展示
|
||
- 7个信息分组的设计规范
|
||
|
||
5. **新建/编辑项目模态框** (Create/Edit Modal)
|
||
- 全屏遮罩设计
|
||
- 表单分组布局
|
||
- 按钮交互规范
|
||
|
||
6. **用户管理页面** (User Management - 仅管理员)
|
||
- 用户列表设计
|
||
- 角色标签系统
|
||
- 操作按钮组
|
||
|
||
7. **项目统计页面** (Project Statistics)
|
||
- 基础统计卡片
|
||
- 分组统计图表
|
||
- 时间维度统计
|
||
- 导出功能
|
||
|
||
#### 设计规范包含:
|
||
- **尺寸规范**: 所有元素的宽度、高度、间距
|
||
- **颜色规范**: 主色调、功能色、中性色、背景色
|
||
- **字体规范**: 字体大小、字重、行高
|
||
- **间距系统**: 8px网格系统
|
||
- **交互行为**: 鼠标悬停、点击、加载状态
|
||
- **响应式设计**: 移动端、平板、桌面端适配
|
||
- **动画效果**: 过渡动画、加载动画
|
||
- **可访问性**: 键盘导航、屏幕阅读器支持
|
||
|
||
---
|
||
|
||
### 3. 用户交互文档
|
||
**文件名**: `user-interaction-guide.md`
|
||
|
||
**内容概述**:
|
||
详细描述用户如何使用系统的所有功能，包括：
|
||
|
||
#### 主要章节:
|
||
1. **系统登录**
|
||
- 访问系统
|
||
- 登录流程
|
||
- 记住密码功能
|
||
|
||
2. **主界面导航**
|
||
- 界面布局说明
|
||
- 侧边栏导航
|
||
- 用户信息查看
|
||
- 登出系统
|
||
|
||
3. **仪表盘使用**
|
||
- 查看统计卡片
|
||
- 查看项目趋势图
|
||
- 查看最近项目
|
||
- 快速跳转
|
||
|
||
4. **项目管理**
|
||
- 进入项目列表
|
||
- 搜索项目
|
||
- 筛选项目（多条件组合）
|
||
- 排序项目
|
||
- 查看项目详情
|
||
- 新建项目
|
||
- 编辑项目
|
||
- 删除项目
|
||
- 分页浏览
|
||
- 项目详情页操作
|
||
|
||
5. **用户管理（管理员）**
|
||
- 进入用户管理
|
||
- 搜索用户
|
||
- 新建用户
|
||
- 编辑用户
|
||
- 删除用户
|
||
- 重置密码
|
||
|
||
6. **项目统计**
|
||
- 基础统计
|
||
- 分组统计
|
||
- 时间维度统计
|
||
- 筛选统计
|
||
- 导出报表
|
||
- 图表交互
|
||
|
||
7. **权限说明**
|
||
- 角色定义（管理员、市场部、其他部门）
|
||
- 字段级权限
|
||
- 权限提示
|
||
|
||
8. **常见操作流程**
|
||
- 市场部用户创建项目流程
|
||
- 其他部门用户更新项目流程
|
||
- 管理员查看统计流程
|
||
|
||
9. **错误处理**
|
||
- 网络错误
|
||
- 服务器错误
|
||
- 权限错误
|
||
- 数据验证错误
|
||
|
||
10. **快捷键**
|
||
- 通用快捷键
|
||
- 列表页面快捷键
|
||
|
||
11. **常见问题 (FAQ)**
|
||
- 8个常见问题及解答
|
||
|
||
---
|
||
|
||
### 4. 设计预览HTML文件
|
||
**文件名**: `design-preview.html`
|
||
|
||
**内容概述**:
|
||
这是一个交互式的HTML文件，可以直接在浏览器中打开，查看系统的实际视觉效果。
|
||
|
||
#### 包含页面:
|
||
1. **登录页面** - 完整的登录表单设计
|
||
2. **仪表盘** - 统计卡片、图表区域、最近项目
|
||
3. **项目列表** - 工具栏、表格、分页
|
||
4. **项目详情** - 信息卡片分组展示
|
||
|
||
#### 使用方法:
|
||
1. 使用浏览器打开 `design-preview.html` 文件
|
||
2. 左上角显示页面切换按钮
|
||
3. 点击按钮可以在不同页面之间切换
|
||
4. 所有页面都遵循设计哲学和规范文档
|
||
|
||
#### 特点:
|
||
- 真实的设计实现（非截图）
|
||
- 交互式页面切换
|
||
- 完整的CSS样式
|
||
- 响应式布局支持
|
||
- 符合Ant Design设计规范
|
||
|
||
---
|
||
|
||
## 🎨 设计系统核心特点
|
||
|
||
### 1. 精确秩序 (Precise Order)
|
||
- 严格遵循8px网格系统
|
||
- 所有元素位置经过精确计算
|
||
- 间距系统统一（4px/8px/12px/16px/24px/32px）
|
||
|
||
### 2. 功能主义 (Functionalism)
|
||
- 颜色服务于信息传递
|
||
- 蓝色（#1890ff）：主品牌色，表示信息和新建
|
||
- 绿色（#52c41a）：成功、进行中
|
||
- 红色（#ff4d4f）：错误、删除
|
||
- 黄色（#fa8c16）：警告、暂停
|
||
|
||
### 3. 极简主义 (Minimalism)
|
||
- 去除一切不必要的装饰
|
||
- 组件设计简洁
|
||
- 视觉层次清晰
|
||
- 信息传达高效
|
||
|
||
### 4. 一致性 (Consistency)
|
||
- 所有页面遵循统一的设计语言
|
||
- 组件复用
|
||
- 交互模式统一
|
||
- 视觉风格一致
|
||
|
||
### 5. 可扩展性 (Scalability)
|
||
- 设计系统支持功能扩展
|
||
- 原子组件 → 分子组件 → 页面
|
||
- 易于维护和更新
|
||
|
||
---
|
||
|
||
## 📊 页面统计
|
||
|
||
| 页面类型 | 数量 | 说明 |
|
||
|---------|------|------|
|
||
| 登录页面 | 1 | 登录表单 |
|
||
| 主布局 | 1 | 顶部导航 + 侧边栏 |
|
||
| 仪表盘 | 1 | 统计概览 |
|
||
| 项目管理 | 3 | 列表、详情、新建/编辑 |
|
||
| 用户管理 | 2 | 列表、新建/编辑 |
|
||
| 项目统计 | 1 | 统计图表 |
|
||
| **总计** | **9** | **独立页面/模态框** |
|
||
|
||
---
|
||
|
||
## 🎯 设计质量保证
|
||
|
||
### 视觉质量
|
||
- ✅ 无emoji图标，使用专业图标
|
||
- ✅ 图标从统一图标集（Ant Design Icons）
|
||
- ✅ Hover状态不会导致布局偏移
|
||
- ✅ 所有可点击元素都有cursor-pointer
|
||
|
||
### 交互体验
|
||
- ✅ Hover状态提供清晰的视觉反馈
|
||
- ✅ 过渡动画流畅（150-300ms）
|
||
- ✅ Focus状态可见，支持键盘导航
|
||
|
||
### 色彩对比
|
||
- ✅ 浅色模式文字对比度≥4.5:1（WCAG AA标准）
|
||
- ✅ 玻璃/透明元素在浅色模式下可见
|
||
- ✅ 边框在浅色和深色模式下都清晰
|
||
|
||
### 布局
|
||
- ✅ 响应式设计支持移动端（320px）、平板（768px）、桌面（1024px+）
|
||
- ✅ 无水平滚动
|
||
- ✅ 浮动元素有适当的边距
|
||
|
||
### 可访问性
|
||
- ✅ 所有表单输入都有标签
|
||
- ✅ 颜色不是唯一的指示器
|
||
- ✅ 支持prefers-reduced-motion
|
||
|
||
---
|
||
|
||
## 🚀 如何使用这些文档
|
||
|
||
### 对于前端开发人员
|
||
|
||
1. **阅读设计哲学文档** (`design-philosophy.md`)
|
||
- 理解设计理念
|
||
- 掌握设计原则
|
||
|
||
2. **参考设计规范文档** (`frontend-pages-reference.md`)
|
||
- 查看具体页面的尺寸、颜色、字体
|
||
- 理解交互行为
|
||
- 实现响应式布局
|
||
|
||
3. **查看设计预览** (`design-preview.html`)
|
||
- 在浏览器中打开，直接查看效果
|
||
- 作为实现参考
|
||
- 测试响应式效果
|
||
|
||
4. **理解用户交互** (`user-interaction-guide.md`)
|
||
- 实现用户交互逻辑
|
||
- 处理各种边界情况
|
||
- 确保用户体验流畅
|
||
|
||
### 对于产品经理
|
||
|
||
1. **阅读用户交互文档** (`user-interaction-guide.md`)
|
||
- 了解用户如何使用系统
|
||
- 验证需求是否完整
|
||
|
||
2. **查看设计预览** (`design-preview.html`)
|
||
- 可视化地理解系统界面
|
||
- 与开发团队沟通设计细节
|
||
|
||
### 对于测试人员
|
||
|
||
1. **阅读用户交互文档** (`user-interaction-guide.md`)
|
||
- 编写测试用例
|
||
- 验证交互流程
|
||
- 检查边界情况
|
||
|
||
2. **参考设计规范文档** (`frontend-pages-reference.md`)
|
||
- 验证UI实现是否符合设计规范
|
||
- 检查响应式效果
|
||
|
||
---
|
||
|
||
## 🔧 技术栈建议
|
||
|
||
### 前端框架
|
||
- React 18+
|
||
- TypeScript（推荐）
|
||
- Vite（构建工具）
|
||
|
||
### UI组件库
|
||
- Ant Design 5.x（与设计规范匹配）
|
||
- Ant Design Icons
|
||
|
||
### 状态管理
|
||
- Redux Toolkit
|
||
- React Query（数据获取）
|
||
|
||
### 图表库
|
||
- Apache ECharts（功能强大）
|
||
- Recharts（轻量级）
|
||
|
||
### 工具
|
||
- Tailwind CSS（如果需要定制样式）
|
||
- React Router（路由）
|
||
- Axios（HTTP客户端）
|
||
|
||
---
|
||
|
||
## 📝 设计规范快速参考
|
||
|
||
### 颜色系统
|
||
```css
|
||
--primary-color: #1890ff; /* 主品牌色 */
|
||
--success-color: #52c41a; /* 成功 */
|
||
--warning-color: #fa8c16; /* 警告 */
|
||
--error-color: #ff4d4f; /* 错误 */
|
||
|
||
--text-primary: #333333; /* 主要文字 */
|
||
--text-secondary: #666666; /* 次要文字 */
|
||
--text-disabled: #999999; /* 禁用文字 */
|
||
|
||
--border-color: #e8e8e8; /* 边框 */
|
||
--divider-color: #f0f0f0; /* 分割线 */
|
||
|
||
--layout-header-bg: #001529; /* 顶部导航 */
|
||
--layout-sidebar-bg: #ffffff; /* 侧边栏 */
|
||
--layout-content-bg: #f0f2f5; /* 内容区 */
|
||
```
|
||
|
||
### 字体系统
|
||
```css
|
||
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
--font-size-base: 14px;
|
||
--font-size-lg: 16px;
|
||
--font-size-sm: 12px;
|
||
--font-size-title: 18px;
|
||
--font-size-heading: 24px;
|
||
```
|
||
|
||
### 间距系统
|
||
```css
|
||
--spacing-xs: 4px;
|
||
--spacing-sm: 8px;
|
||
--spacing-md: 12px;
|
||
--spacing-lg: 16px;
|
||
--spacing-xl: 24px;
|
||
--spacing-xxl: 32px;
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ 设计检查清单
|
||
|
||
在开发过程中，请检查以下项目：
|
||
|
||
### 页面布局
|
||
- [ ] 所有页面遵循统一的布局结构
|
||
- [ ] 侧边栏宽度为256px
|
||
- [ ] 顶部导航栏高度为64px
|
||
- [ ] 内容区有适当的内边距（24px）
|
||
- [ ] 使用8px网格系统
|
||
|
||
### 组件样式
|
||
- [ ] 按钮有hover状态
|
||
- [ ] 输入框有focus状态
|
||
- [ ] 表格行有hover效果
|
||
- [ ] 卡片有适当的阴影和圆角
|
||
|
||
### 颜色使用
|
||
- [ ] 统一使用设计规范中的颜色
|
||
- [ ] 文字对比度符合WCAG AA标准
|
||
- [ ] 颜色传达正确的语义信息
|
||
|
||
### 交互体验
|
||
- [ ] 所有可点击元素有cursor-pointer
|
||
- [ ] 加载状态有明确的视觉反馈
|
||
- [ ] 错误提示清晰易懂
|
||
- [ ] 成功操作有成功提示
|
||
|
||
### 响应式
|
||
- [ ] 在移动端（320px）正常显示
|
||
- [ ] 在平板（768px）布局合理
|
||
- [ ] 在桌面端（1024px+）完全展开
|
||
|
||
### 可访问性
|
||
- [ ] 所有图片有alt文本
|
||
- [ ] 表单有label标签
|
||
- [ ] 支持Tab键导航
|
||
- [ ] 支持键盘快捷键
|
||
|
||
---
|
||
|
||
## 🎓 设计哲学精髓
|
||
|
||
### "企业精确"的核心思想
|
||
|
||
> **设计不是装饰，而是问题的解决方案。**
|
||
|
||
我们的设计哲学强调：
|
||
|
||
1. **精确而非随意** - 每一个像素都有其存在的理由
|
||
2. **功能而非形式** - 美学服务于实用
|
||
3. **克制而非张扬** - 极简主义的表达
|
||
4. **系统而非孤立** - 整体大于部分之和
|
||
|
||
这不是一个模板化的设计，而是一个经过深思熟虑的、体现专业水准的设计系统。每一个细节都经过反复推敲，每一个决定都有其背后的逻辑。
|
||
|
||
---
|
||
|
||
## 📞 支持与反馈
|
||
|
||
如果您在使用这些设计文档时有任何疑问或建议，请联系：
|
||
|
||
- **设计师**: OpenCode AI UI/UX Designer
|
||
- **创建日期**: 2026-01-25
|
||
- **版本**: v1.0
|
||
|
||
---
|
||
|
||
## 📄 文档更新日志
|
||
|
||
### v1.0 (2026-01-25)
|
||
- ✨ 创建设计哲学文档
|
||
- ✨ 创建前端页面设计参考文档
|
||
- ✨ 创建用户交互文档
|
||
- ✨ 创建设计预览HTML文件
|
||
- ✨ 创建交付说明文档
|
||
|
||
---
|
||
|
||
**设计文档准备就绪，可以开始前端开发工作！**
|
||
|
||
加油！！！
|