2025-10-01 22:06:59 +08:00
|
|
|
|
# 订单班交互式网站迭代设计任务
|
|
|
|
|
|
|
|
|
|
|
|
## 配置参数
|
|
|
|
|
|
```bash
|
|
|
|
|
|
ORDER="食品" # 订单班类型（可选：食品、化工、智能开发等）
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 关键路径定义
|
|
|
|
|
|
```bash
|
|
|
|
|
|
# 数据源路径
|
|
|
|
|
|
TERMINAL_SIM="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/src/data/terminalSimulations/"
|
|
|
|
|
|
SOURCE_DOCS="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/data/订单班文档资料/${ORDER}"
|
|
|
|
|
|
|
|
|
|
|
|
# 输出路径
|
|
|
|
|
|
WEB_OUTPUT="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/order-classes/${ORDER}"
|
|
|
|
|
|
|
|
|
|
|
|
# SuperDesign路径
|
|
|
|
|
|
SUPERDESIGN_WORK="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/current"
|
|
|
|
|
|
SUPERDESIGN_ARCHIVE="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/archive_${ORDER}_$(date +%Y%m%d)"
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 执行步骤
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 内容分析阶段
|
|
|
|
|
|
**目标**：深度理解订单班的内容特色和核心要素
|
|
|
|
|
|
|
|
|
|
|
|
**具体任务**：
|
|
|
|
|
|
- 扫描并分析 `SOURCE_DOCS` 中的所有文稿资料
|
|
|
|
|
|
- 提取关键信息：主题、技术特点、时间线、重要数据、图片资源
|
|
|
|
|
|
- 创建内容清单 `content_checklist.json`，包含所有需要展示的元素
|
|
|
|
|
|
- 输出内容分析报告，明确设计方向
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 页面设计阶段
|
|
|
|
|
|
**目标**：创建符合订单班特色的交互式网站
|
|
|
|
|
|
|
|
|
|
|
|
**设计要求**：
|
|
|
|
|
|
- **布局结构**：单页滚动式，配合固定时间轴导航
|
|
|
|
|
|
- **视觉风格**：根据订单班特色定制主题色彩和设计语言
|
|
|
|
|
|
- **核心功能**：
|
|
|
|
|
|
- 时间轴导航：显示进度，支持快速跳转
|
|
|
|
|
|
- 图片查看器：支持点击放大、缩放、全屏查看
|
|
|
|
|
|
- 平滑滚动：各阶段内容流畅过渡
|
|
|
|
|
|
|
|
|
|
|
|
**技术实现**：
|
|
|
|
|
|
- 使用React 18 + TypeScript构建
|
|
|
|
|
|
- Tailwind CSS 3.0处理样式
|
|
|
|
|
|
- GSAP 3.12实现动画和滚动交互
|
|
|
|
|
|
- 图片懒加载优化性能
|
|
|
|
|
|
- Vite 5.0作为构建工具
|
|
|
|
|
|
|
|
|
|
|
|
### 3. SuperDesign迭代优化
|
|
|
|
|
|
**目标**：通过5次迭代找到最优设计方案
|
|
|
|
|
|
|
|
|
|
|
|
**迭代流程**：
|
|
|
|
|
|
1. **迭代1**：确定基础布局和主色调
|
|
|
|
|
|
2. **迭代2**：优化字体排版和内容层级
|
|
|
|
|
|
3. **迭代3**：增强交互动效和用户体验
|
|
|
|
|
|
4. **迭代4**：完善视觉细节和装饰元素
|
|
|
|
|
|
5. **迭代5**：响应式适配和性能优化
|
|
|
|
|
|
|
|
|
|
|
|
**评估标准**（每项1-10分）：
|
|
|
|
|
|
- 视觉吸引力
|
|
|
|
|
|
- 品牌契合度
|
|
|
|
|
|
- 用户体验
|
|
|
|
|
|
- 性能表现
|
|
|
|
|
|
- 内容呈现
|
|
|
|
|
|
- 创新性
|
|
|
|
|
|
|
|
|
|
|
|
**选择最优版本**：
|
|
|
|
|
|
- 创建评估矩阵，对比各版本得分
|
|
|
|
|
|
- 记录选择理由
|
|
|
|
|
|
- 标记最优版本号
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 部署与归档
|
|
|
|
|
|
**目标**：完成项目交付和文件整理
|
|
|
|
|
|
|
|
|
|
|
|
**执行任务**：
|
|
|
|
|
|
1. 将最优版本部署到 `WEB_OUTPUT`
|
|
|
|
|
|
2. 归档所有SuperDesign迭代版本到 `SUPERDESIGN_ARCHIVE`
|
|
|
|
|
|
3. 让Serena记录最终版本的设计风格和特征
|
|
|
|
|
|
4. 清理临时工作目录
|
|
|
|
|
|
|
|
|
|
|
|
### 5. 内容验证与质量保证
|
|
|
|
|
|
**目标**：确保内容完整性和展示效果
|
|
|
|
|
|
|
|
|
|
|
|
**检查清单**：
|
|
|
|
|
|
- [ ] 所有文稿内容已正确迁移
|
|
|
|
|
|
- [ ] 图片资源完整且显示正常
|
|
|
|
|
|
- [ ] 时间线事件准确无遗漏
|
|
|
|
|
|
- [ ] 交互功能运行流畅
|
|
|
|
|
|
- [ ] 响应式布局适配完善
|
|
|
|
|
|
- [ ] 无控制台错误
|
|
|
|
|
|
- [ ] TypeScript类型检查通过
|
|
|
|
|
|
- [ ] 性能指标达标（Lighthouse > 90）
|
|
|
|
|
|
|
|
|
|
|
|
**优化建议**：
|
|
|
|
|
|
- 识别内容展示的优化空间
|
|
|
|
|
|
- 调整不合适的设计元素
|
|
|
|
|
|
- 完善用户体验细节
|
|
|
|
|
|
|
|
|
|
|
|
## 质量标准
|
|
|
|
|
|
- 设计与订单班主题高度契合
|
|
|
|
|
|
- 内容100%准确完整
|
|
|
|
|
|
- 用户体验流畅自然
|
|
|
|
|
|
- 代码规范可维护
|
|
|
|
|
|
- 文档清晰完整
|
|
|
|
|
|
|
|
|
|
|
|
## 注意事项
|
|
|
|
|
|
- 确保所有路径变量正确替换
|
|
|
|
|
|
- 保持Git版本管理
|
|
|
|
|
|
- 每个阶段创建检查点
|
|
|
|
|
|
- 遇到问题及时记录和处理
|
