491 lines
14 KiB
Markdown
491 lines
14 KiB
Markdown
# 升级提示交互设计文档
|
||
|
||
## 设计理念
|
||
|
||
### 核心价值
|
||
将升级从"干扰"转变为"期待"，创造专业、可信、流畅的更新体验。
|
||
|
||
### 设计原则
|
||
1. **无感检测** - 后台静默检查，不打扰工作流
|
||
2. **优雅提示** - 精美的弹窗设计，而非生硬的系统提示
|
||
3. **透明反馈** - 清晰的进度展示，让用户掌控全局
|
||
4. **安全信任** - 强调版本信息和安全性，建立信任
|
||
|
||
---
|
||
|
||
## 交互流程
|
||
|
||
### 1. 自动检查更新（后台）
|
||
|
||
```
|
||
应用启动
|
||
↓
|
||
等待 3 秒（避免阻塞启动）
|
||
↓
|
||
检查更新配置
|
||
↓
|
||
是否开启自动检查？
|
||
├─ 否 → 跳过
|
||
└─ 是 → 请求版本信息
|
||
↓
|
||
版本比较
|
||
├─ 无更新 → 记录日志
|
||
└─ 有更新 → 检查是否已跳过
|
||
├─ 已跳过且非强制 → 跳过
|
||
└─ 未跳过或强制更新 → 延迟 2 秒显示弹窗
|
||
```
|
||
|
||
**关键点：**
|
||
- ✅ 异步检查，不阻塞应用启动
|
||
- ✅ 3 秒延迟，优先显示应用界面
|
||
- ✅ 2 秒延迟显示弹窗，让用户先熟悉界面
|
||
- ✅ 支持跳过非强制更新
|
||
|
||
### 2. 升级提示弹窗
|
||
|
||
#### 弹窗触发时机
|
||
- **自动触发**：应用启动检测到新版本（延迟 5 秒）
|
||
- **手动触发**：用户在"版本更新"面板点击"检查更新"
|
||
|
||
#### 弹窗状态
|
||
|
||
**状态 1：初始显示**
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 🔍 发现新版本 v0.1.0 → v0.1.1 [✕] │
|
||
├─────────────────────────────────────────────┤
|
||
│ │
|
||
│ 📅 发布日期 2026-01-28 │
|
||
│ 📁 文件大小 45.2 MB │
|
||
│ │
|
||
│ 📖 更新内容 │
|
||
│ ┌─────────────────────────────────────────┐ │
|
||
│ │ • 修复文件列表刷新问题 │ │
|
||
│ │ • 优化启动性能 │ │
|
||
│ │ • 新增暗色模式支持 │ │
|
||
│ └─────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [ 跳过此版本 ] [ 立即更新 ↓ ] │
|
||
│ │
|
||
│ ☐ 提醒我稍后更新（下次启动时提醒） │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**状态 2：下载中**
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 🔍 发现新版本 v0.1.0 → v0.1.1 [✕] │
|
||
├─────────────────────────────────────────────┤
|
||
│ │
|
||
│ 📥 下载中... │
|
||
│ ████████████████░░░░░░░░ 65% │
|
||
│ 28.5 MB / 45.2 MB 2.3 MB/s │
|
||
│ │
|
||
│ [ 跳过此版本 ] [ 准备中... ] │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**状态 3：下载完成**
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 🔍 发现新版本 v0.1.0 → v0.1.1 [✕] │
|
||
├─────────────────────────────────────────────┤
|
||
│ │
|
||
│ ✅ 下载完成！ │
|
||
│ 文件已保存到： │
|
||
│ C:\Users\xxx\.u-desk\downloads\update.exe │
|
||
│ │
|
||
│ [ ✓ 下载完成，点击安装 ] │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
**状态 4：强制更新**
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ ⚠ 重要更新 v0.1.0 → v0.1.1 │
|
||
├─────────────────────────────────────────────┤
|
||
│ │
|
||
│ ⚠️ 此版本包含重要的安全更新和修复， │
|
||
│ 建议立即更新以继续使用 │
|
||
│ │
|
||
│ 📖 更新内容 │
|
||
│ ┌─────────────────────────────────────────┐ │
|
||
│ │ • 修复严重安全漏洞 │ │
|
||
│ │ • 修复数据损坏问题 │ │
|
||
│ └─────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [ 立即更新 ↓ ] │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3. 用户操作流程
|
||
|
||
#### 立即更新流程
|
||
```
|
||
点击"立即更新"
|
||
↓
|
||
开始下载
|
||
↓
|
||
显示下载进度（实时更新）
|
||
↓
|
||
下载完成
|
||
↓
|
||
显示"点击安装"按钮
|
||
↓
|
||
点击"安装"
|
||
↓
|
||
确认对话框
|
||
↓
|
||
开始安装
|
||
↓
|
||
显示"安装中..."
|
||
↓
|
||
安装成功，延迟 2 秒重启应用
|
||
```
|
||
|
||
#### 跳过流程
|
||
```
|
||
点击"跳过此版本"
|
||
↓
|
||
检查"提醒我稍后更新"
|
||
├─ 选中 → 保存到 localStorage（skipped_version）
|
||
└─ 未选中 → 清除 localStorage
|
||
↓
|
||
关闭弹窗
|
||
↓
|
||
下次启动时不再提示（除非是强制更新）
|
||
```
|
||
|
||
---
|
||
|
||
## 视觉设计
|
||
|
||
### 配色方案
|
||
|
||
**主要颜色**
|
||
- **主色调**：`#165dff` - 专业蓝，代表信任和稳定
|
||
- **成功色**：`#00b42a` - 下载成功、安装完成
|
||
- **警告色**：`#ff7d00` - 一般更新
|
||
- **错误色**：`#f53f3f` - 强制更新、下载失败
|
||
|
||
**渐变效果**
|
||
```css
|
||
/* 版本徽章渐变 */
|
||
background: linear-gradient(135deg, #165dff 0%, #4facfe 100%);
|
||
|
||
/* 强制更新徽章渐变 */
|
||
background: linear-gradient(135deg, #f53f3f 0%, #ff7875 100%);
|
||
|
||
/* 弹窗头部渐变 */
|
||
background: linear-gradient(135deg, #f0f5ff 0%, #ffffff 100%);
|
||
```
|
||
|
||
### 字体设计
|
||
|
||
**显示字体**：系统默认（保持一致性）
|
||
**代码字体**：`'Menlo', 'Monaco', 'Courier New', monospace`（更新日志）
|
||
|
||
**字号层级**
|
||
```css
|
||
版本徽章：15px / 600 /* 主要 CTA */
|
||
标题：14px / 600 /* 区块标题 */
|
||
正文：14px / 400 /* 内容文字 */
|
||
辅助文字：12px / 400 /* 标签、提示 */
|
||
小字：13px / 400 /* 代码、日志 */
|
||
```
|
||
|
||
### 间距系统
|
||
|
||
```css
|
||
弹窗内边距：24px
|
||
卡片间距：20px
|
||
区块间距：16px
|
||
元素间距：12px
|
||
小间距：8px
|
||
```
|
||
|
||
### 圆角系统
|
||
|
||
```css
|
||
弹窗：8px
|
||
卡片/容器：12px
|
||
按钮：8px
|
||
信息图标：8px
|
||
```
|
||
|
||
### 阴影系统
|
||
|
||
```css
|
||
版本徽章：0 2px 8px rgba(22, 93, 255, 0.3)
|
||
信息图标：0 2px 6px rgba(22, 93, 255, 0.2)
|
||
```
|
||
|
||
---
|
||
|
||
## 动画设计
|
||
|
||
### 弹窗动画
|
||
```css
|
||
@keyframes modalFadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.95) translateY(-20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1) translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 持续时间：0.3s */
|
||
/* 缓动函数：ease-out */
|
||
```
|
||
|
||
### 进度条动画
|
||
```css
|
||
@keyframes progressPulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.8; }
|
||
}
|
||
|
||
/* 持续时间：1.5s */
|
||
/* 循环播放 */
|
||
```
|
||
|
||
### 按钮交互
|
||
- **Hover**：0.15s 背景色过渡
|
||
- **Active**：轻微缩放（scale: 0.98）
|
||
|
||
---
|
||
|
||
## 组件结构
|
||
|
||
```
|
||
UpdateNotification.vue
|
||
├── 模板层（Template）
|
||
│ ├── 弹窗容器（a-modal）
|
||
│ ├── 标题栏（自定义）
|
||
│ │ ├── 版本徽章（带图标）
|
||
│ │ └── 版本对比（当前 → 最新）
|
||
│ ├── 内容区域
|
||
│ │ ├── 版本信息卡片
|
||
│ │ │ ├── 发布日期
|
||
│ │ │ └── 文件大小
|
||
│ │ ├── 更新日志
|
||
│ │ ├── 强制更新提示（条件显示）
|
||
│ │ ├── 下载进度（条件显示）
|
||
│ │ ├── 操作按钮
|
||
│ │ └── 后台更新选项（条件显示）
|
||
│
|
||
├── 脚本层（Script）
|
||
│ ├── Props（modelValue, updateInfo）
|
||
│ ├── Emits（update:modelValue, download, install, skip）
|
||
│ ├── 状态管理
|
||
│ │ ├── 下载状态
|
||
│ │ ├── 安装状态
|
||
│ │ ├── 进度信息
|
||
│ │ └── 用户选择
|
||
│ ├── 方法
|
||
│ │ ├── handleDownload()
|
||
│ │ ├── handleInstall()
|
||
│ │ ├── handleSkip()
|
||
│ │ ├── 事件监听器（下载进度、完成）
|
||
│ │ └── 工具方法（文件大小格式化等）
|
||
│ └── 生命周期
|
||
│ ├── onMounted（设置事件监听）
|
||
│ └── onUnmounted（清理事件监听）
|
||
│
|
||
└── 样式层（Style）
|
||
├── 弹窗样式
|
||
├── 版本徽章
|
||
├── 信息卡片
|
||
├── 更新日志
|
||
├── 进度条
|
||
├── 按钮样式
|
||
└── 动画效果
|
||
```
|
||
|
||
---
|
||
|
||
## 后端集成
|
||
|
||
### API 接口
|
||
|
||
```javascript
|
||
// 检查更新
|
||
await window.go.main.App.CheckUpdate()
|
||
// 返回: { success: true, data: { has_update, current_version, latest_version, ... } }
|
||
|
||
// 下载更新
|
||
await window.go.main.App.DownloadUpdate(downloadURL)
|
||
// 返回: { success: true, data: { message: "下载已开始" } }
|
||
|
||
// 安装更新
|
||
await window.go.main.App.InstallUpdate(filePath, autoRestart)
|
||
// 返回: { success: true, data: { success: true, message: "安装成功" } }
|
||
```
|
||
|
||
### 事件系统
|
||
|
||
```javascript
|
||
// 监听下载进度
|
||
window.runtime.EventsOn('download-progress', (event) => {
|
||
const data = JSON.parse(event)
|
||
// { progress: 65, speed: 2345678, downloaded: 28576892, total: 45234567 }
|
||
})
|
||
|
||
// 监听下载完成
|
||
window.runtime.EventsOn('download-complete', (event) => {
|
||
const data = JSON.parse(event)
|
||
// { success: true, file_path: "xxx", file_size: 45234567 }
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
## 配置选项
|
||
|
||
### 用户可配置
|
||
|
||
在 **设置 → 版本更新** 中：
|
||
- ✅ **自动检查更新**：开启/关闭
|
||
- ✅ **检查间隔**：1-1440 分钟
|
||
- 🔒 **检查地址**：只读（系统配置）
|
||
|
||
### 版本信息文件格式
|
||
|
||
```json
|
||
{
|
||
"version": "0.1.1",
|
||
"download_url": "https://img.1216.top/u-desk/go-desk-0.1.1-windows-amd64.exe",
|
||
"changelog": "• 修复文件列表刷新问题\n• 优化启动性能\n• 新增暗色模式支持",
|
||
"force_update": false,
|
||
"release_date": "2026-01-28",
|
||
"file_size": 45234567
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 边界情况处理
|
||
|
||
### 1. 网络错误
|
||
```
|
||
检查更新失败 → 记录日志，不显示弹窗
|
||
下载失败 → 显示错误提示，允许重试
|
||
```
|
||
|
||
### 2. 下载中断
|
||
```
|
||
支持断点续传
|
||
下次下载从断点继续
|
||
```
|
||
|
||
### 3. 安装失败
|
||
```
|
||
显示错误信息
|
||
自动回滚到备份版本
|
||
```
|
||
|
||
### 4. 用户跳过
|
||
```
|
||
非强制更新 → 允许跳过
|
||
强制更新 → 不允许跳过（禁用关闭按钮）
|
||
```
|
||
|
||
### 5. 版本回退
|
||
```
|
||
不主动提示降级
|
||
如需降级，手动下载安装
|
||
```
|
||
|
||
---
|
||
|
||
## 可访问性
|
||
|
||
### 键盘导航
|
||
- ✅ Tab 键：切换焦点
|
||
- ✅ Enter 键：激活按钮
|
||
- ✅ Esc 键：关闭弹窗（非强制更新）
|
||
|
||
### 屏幕阅读器
|
||
- ✅ 语义化 HTML
|
||
- ✅ ARIA 标签
|
||
- ✅ 清晰的焦点指示器
|
||
|
||
### 对比度
|
||
- ✅ 文字与背景对比度 ≥ 4.5:1
|
||
- ✅ 重要信息使用高对比度颜色
|
||
|
||
---
|
||
|
||
## 性能优化
|
||
|
||
### 前端
|
||
- ✅ 异步加载组件（按需）
|
||
- ✅ 防抖处理（避免频繁更新）
|
||
- ✅ 事件监听器及时清理
|
||
|
||
### 后端
|
||
- ✅ 异步下载（不阻塞 UI）
|
||
- ✅ 流式下载（支持大文件）
|
||
- ✅ 断点续传（节省带宽）
|
||
|
||
---
|
||
|
||
## 测试要点
|
||
|
||
### 功能测试
|
||
- ✅ 自动检查更新正常触发
|
||
- ✅ 弹窗正确显示版本信息
|
||
- ✅ 下载进度实时更新
|
||
- ✅ 安装成功后重启
|
||
- ✅ 跳过功能正常工作
|
||
- ✅ 强制更新无法关闭
|
||
|
||
### 边界测试
|
||
- ✅ 网络断开时的处理
|
||
- ✅ 下载失败后的重试
|
||
- ✅ 安装失败后的回滚
|
||
- ✅ 跳过后不再提示
|
||
- ✅ 强制更新必须安装
|
||
|
||
### UI 测试
|
||
- ✅ 弹窗动画流畅
|
||
- ✅ 进度条更新平滑
|
||
- ✅ 按钮状态正确
|
||
- ✅ 响应式布局正常
|
||
|
||
---
|
||
|
||
## 未来改进方向
|
||
|
||
### 短期（1-2 周）
|
||
- [ ] 增量更新支持（仅下载差异包）
|
||
- [ ] 更新历史记录
|
||
- [ ] 更新统计（次数、节省时间）
|
||
|
||
### 中期（1-2 月）
|
||
- [ ] 多渠道更新（稳定版、测试版）
|
||
- [ ] 自动更新后台下载
|
||
- [ ] 更新预约（定时更新）
|
||
|
||
### 长期（3-6 月）
|
||
- [ ] 智能更新（根据使用习惯）
|
||
- [ ] A/B 测试更新策略
|
||
- [ ] 用户反馈收集
|
||
|
||
---
|
||
|
||
## 总结
|
||
|
||
这个升级提示系统设计遵循了现代 UX 最佳实践：
|
||
|
||
✨ **专业感** - 精美的视觉设计，建立用户信任
|
||
🚀 **流畅感** - 细腻的动画过渡，提升体验
|
||
🎯 **掌控感** - 清晰的进度反馈，用户有掌控权
|
||
🔒 **安全感** - 强制更新保护，跳过选项灵活
|
||
⚡ **高效感** - 后台检测，不干扰工作流
|
||
|
||
用户将从"被迫更新"的烦恼，转变为"期待更新"的积极体验。
|