iloom-flatten/outputs/demo-animation-guide.md

110 lines
3.4 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 纺织行业采购计划管理系统 - 演示动画制作指南
## 演示动画脚本 (15-20秒)
### 场景1: 采购商创建计划 (0-4秒)
- **画面**: 采购商工作台界面
- **动作**: 点击"新建计划"按钮,填写表单
- **关键信息展示**:
- 成品名称: 水洗棉花糖
- 颜色: 灰色
- 坯布码: SX1
- 计划产量: 10000米
- **文字说明**: "采购商创建生产计划"
### 场景2: 生成分享链接 (4-7秒)
- **画面**: 计划详情页,点击分享按钮
- **动作**: 系统生成加密链接
- **关键信息展示**:
- 原始数据: `{ planId: "xxx", factoryType: "textile" }`
- 加密后: `/#/import?token=62eyJw...`
- **文字说明**: "敏感信息加密仅传输计划ID"
### 场景3: 纺织厂导入计划 (7-10秒)
- **画面**: 纺织厂导入页面
- **动作**: 粘贴链接,点击导入
- **关键信息展示**:
- ✅ 可见: 计划编号、坯布码、产量、纱用量
- ❌ 隐藏: 成品名称、颜色、色号
- **文字说明**: "纺织厂只能看到生产相关信息"
### 场景4: 生产流程确认 (10-13秒)
- **画面**: 纺织厂计划详情,流程节点
- **动作**: 依次确认: 采纱 → 染纱 → 上机 → 坯布入库
- **关键信息展示**:
- 每个节点点击确认
- 进度条更新
- **文字说明**: "实时跟踪生产进度"
### 场景5: 入库同步与通知 (13-17秒)
- **画面**: 分屏显示
- 左侧: 纺织厂入库操作 (49匹/4400米)
- 右侧: 采购商仓库实时同步显示
- **动作**:
- 纺织厂点击"确认入库"
- 数据实时同步到采购商仓库
- 通知弹窗: "坯布入库完成"
- **文字说明**: "数据双向同步,实时通知"
### 场景6: 系统特性总结 (17-20秒)
- **画面**: 系统Logo + 特性列表
- **文字展示**:
- "多角色协作"
- "敏感信息保护"
- "实时数据同步"
- "智能通知提醒"
- **结束语**: "协作管理demo样机"
---
## 技术实现建议
### 方案1: 使用 Excalidraw + 录屏
1. 打开 `textile-system-demo.excalidraw` 文件
2. 使用录屏软件 (如 OBS、Screen Studio)
3. 按照脚本逐步展示每个场景
4. 添加文字说明和转场效果
### 方案2: 使用 Framer Motion 制作动画
创建 React 组件,使用 Framer Motion 实现自动播放的演示动画
### 方案3: 使用视频编辑工具
1. 截取系统实际运行画面
2. 使用 Premiere Pro / Final Cut Pro / 剪映 编辑
3. 添加转场、文字、背景音乐
---
## 关键画面截图建议
1. **登录页**: 展示纺织主题动画效果
2. **采购商Dashboard**: 统计卡片 + 快捷操作
3. **新建计划页**: 表单填写过程
4. **分享链接弹窗**: 加密链接展示
5. **导入计划页**: 对比显示可见/隐藏字段
6. **流程节点页**: 5个步骤的确认过程
7. **仓库管理页**: 入库记录和库存统计
8. **通知中心**: 实时通知弹窗
---
## 配音脚本 (可选)
```
"协作管理demo样机专为纺织行业打造。
采购商创建计划,敏感信息自动加密。
纺织厂通过链接导入,只能看到生产相关信息。
实时跟踪生产进度,每个节点一键确认。
入库数据双向同步,实时通知确保信息不遗漏。
多角色协作,敏感信息保护,实时数据同步。
协作管理demo样机让纺织生产更高效。"
```
---
## 输出文件
- `textile-system-demo.excalidraw` - Excalidraw 流程图源文件
- 可在 https://excalidraw.com 打开编辑
- 支持导出为 PNG/SVG/剪贴板