14 KiB
14 KiB
升级提示交互设计文档
设计理念
核心价值
将升级从"干扰"转变为"期待"，创造专业、可信、流畅的更新体验。
设计原则
- 无感检测 - 后台静默检查，不打扰工作流
- 优雅提示 - 精美的弹窗设计，而非生硬的系统提示
- 透明反馈 - 清晰的进度展示，让用户掌控全局
- 安全信任 - 强调版本信息和安全性，建立信任
交互流程
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- 强制更新、下载失败
渐变效果
/* 版本徽章渐变 */
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（更新日志）
字号层级
版本徽章：15px / 600 /* 主要 CTA */
标题：14px / 600 /* 区块标题 */
正文：14px / 400 /* 内容文字 */
辅助文字：12px / 400 /* 标签、提示 */
小字：13px / 400 /* 代码、日志 */
间距系统
弹窗内边距：24px
卡片间距：20px
区块间距：16px
元素间距：12px
小间距：8px
圆角系统
弹窗：8px
卡片/容器：12px
按钮：8px
信息图标：8px
阴影系统
版本徽章：0 2px 8px rgba(22, 93, 255, 0.3)
信息图标：0 2px 6px rgba(22, 93, 255, 0.2)
动画设计
弹窗动画
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* 持续时间：0.3s */
/* 缓动函数：ease-out */
进度条动画
@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 接口
// 检查更新
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: "安装成功" } }
事件系统
// 监听下载进度
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 分钟
- 🔒 检查地址：只读（系统配置）
版本信息文件格式
{
"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 最佳实践：
✨ 专业感 - 精美的视觉设计，建立用户信任 🚀 流畅感 - 细腻的动画过渡，提升体验 🎯 掌控感 - 清晰的进度反馈，用户有掌控权 🔒 安全感 - 强制更新保护，跳过选项灵活 ⚡ 高效感 - 后台检测，不干扰工作流
用户将从"被迫更新"的烦恼，转变为"期待更新"的积极体验。