343 lines
9.6 KiB
Markdown
343 lines
9.6 KiB
Markdown
# 升级提示 - 简约设计最终版
|
||
|
||
## ✅ 简化完成
|
||
|
||
### 核心改进
|
||
1. ✅ 去掉所有图标（除了必要的状态图标）
|
||
2. ✅ 简化信息展示（去掉卡片背景和图标）
|
||
3. ✅ 简化按钮（传统按钮，无多余装饰）
|
||
4. ✅ 减少间距和字体
|
||
5. ✅ 更快的动画（0.15s）
|
||
|
||
---
|
||
|
||
## 🎨 最终效果
|
||
|
||
### 普通更新弹窗
|
||
|
||
```
|
||
┌──────────────────────────────────────────────┐
|
||
│ 发现新版本 v0.1.0 → v0.1.2 [×] │
|
||
├──────────────────────────────────────────────┤
|
||
│ │
|
||
│ 发布日期 2026-01-28 │
|
||
│ 文件大小 45.2 MB │
|
||
│ │
|
||
│ 更新内容 │
|
||
│ • 测试更新 │
|
||
│ • 新功能测试 │
|
||
│ • 性能优化 │
|
||
│ │
|
||
│ ┌────────────────────────────────────────┐ │
|
||
│ │ 立即更新 │ │ ← 简约按钮
|
||
│ └────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────┐ ┌────────────────┐ │
|
||
│ │ 稍后更新 │ │ ☐ 下次提醒我 │ │
|
||
│ └───────────────────┘ └────────────────┘ │
|
||
└──────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 强制更新弹窗
|
||
|
||
```
|
||
┌──────────────────────────────────────────────┐
|
||
│ ⚠ 重要更新 [×] │
|
||
├──────────────────────────────────────────────┤
|
||
│ │
|
||
│ 发布日期 2026-01-28 │
|
||
│ 文件大小 45.2 MB │
|
||
│ │
|
||
│ 更新内容 │
|
||
│ • 修复严重安全漏洞 │
|
||
│ • 修复数据损坏问题 │
|
||
│ • 优化系统稳定性 │
|
||
│ │
|
||
│ ⚠️ 重要提示 │
|
||
│ 此版本包含重要的安全更新和问题修复， │
|
||
│ 为保障正常使用，请完成更新后再继续。 │
|
||
│ │
|
||
│ ┌────────────────────────────────────────┐ │
|
||
│ │ 立即更新 │ │
|
||
│ └────────────────────────────────────────┘ │
|
||
└──────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 简化对比
|
||
|
||
| 元素 | 简化前 | 简化后 | 改进 |
|
||
|------|--------|--------|------|
|
||
| **版本徽章** | 图标+文字+渐变 | 纯文字+边框 | ✅ 更简洁 |
|
||
| **版本信息** | 卡片+图标+标签 | 纯文字行 | ✅ 扁平化 |
|
||
| **更新日志** | 图标+标题+边框 | 纯文字 | ✅ 极简化 |
|
||
| **操作区域** | 卡片式（图标+标题+说明+箭头） | 简约按钮 | ✅ 传统设计 |
|
||
| **按钮** | 大尺寸（120px宽） | 正常尺寸 | ✅ 标准化 |
|
||
| **圆角** | 6-8px | 4px | ✅ 更小 |
|
||
| **动画** | 0.2s+缩放 | 0.15s+平移 | ✅ 更快 |
|
||
| **弹窗宽度** | 580px | 480px | ✅ 更紧凑 |
|
||
|
||
---
|
||
|
||
## 🎯 设计原则
|
||
|
||
### 极简主义
|
||
> 去掉一切不必要的装饰，只保留核心功能
|
||
|
||
### 核心保留
|
||
- ✅ 版本信息
|
||
- ✅ 更新日志
|
||
- ✅ 操作按钮
|
||
- ✅ 进度显示
|
||
|
||
### 移除元素
|
||
- ❌ 装饰性图标（日历、文件、书本等）
|
||
- ❌ 卡片背景
|
||
- ❌ 多余的说明文字
|
||
- ❌ 复杂的悬停效果
|
||
- ❌ 箭头图标
|
||
|
||
---
|
||
|
||
## 📐 最终规格
|
||
|
||
### 尺寸
|
||
- 弹窗宽度：480px
|
||
- 弹窗内边距：20px
|
||
- 元素间距：16px（区块）、8px（小元素）
|
||
- 按钮内边距：10px 16px
|
||
- 按钮圆角：4px
|
||
- 徽章圆角：4px
|
||
|
||
### 字体
|
||
- 徽章：13px / 400
|
||
- 标题：13px / 500
|
||
- 正文：13px / 400
|
||
- 小字：12px / 400
|
||
|
||
### 颜色
|
||
- 背景：`var(--color-fill-1/2/3)`
|
||
- 边框：`var(--color-border-1/2)`
|
||
- 文字：`var(--color-text-1/2/3)`
|
||
- 主题色：`var(--color-primary-6)`
|
||
- 警告色：`var(--color-warning-*)`
|
||
|
||
### 动画
|
||
- 弹窗进入：0.15s
|
||
- 按钮悬停：0.2s
|
||
- 位移距离：8px
|
||
|
||
---
|
||
|
||
## 💡 设计亮点
|
||
|
||
### 1. 信息扁平化
|
||
```
|
||
简化前：
|
||
┌──────────────────┐
|
||
│ 📅 │ ← 图标
|
||
│ 发布日期 │
|
||
│ 2026-01-28 │
|
||
└──────────────────┘
|
||
|
||
简化后：
|
||
发布日期 2026-01-28 ← 纯文字
|
||
```
|
||
|
||
### 2. 按钮简约化
|
||
```
|
||
简化前：
|
||
┌────────────────────────────────────────┐
|
||
│ ↓ 立即更新到最新版本 → │ ← 卡片式
|
||
│ 点击下载 45.2 MB 安装包 │
|
||
└────────────────────────────────────────┘
|
||
|
||
简化后：
|
||
┌────────────────────────────────────────┐
|
||
│ 立即更新 │ ← 纯按钮
|
||
└────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3. 布局紧凑化
|
||
```
|
||
简化前：gap: 20px（卡片间距）
|
||
简化后：gap: 16px（区块间距）、gap: 8px（元素间距）
|
||
```
|
||
|
||
---
|
||
|
||
## 🔄 交互流程
|
||
|
||
### 普通更新
|
||
```
|
||
1. 点击"立即更新"
|
||
↓
|
||
2. 开始下载（显示进度条）
|
||
↓
|
||
3. 下载完成，自动安装
|
||
↓
|
||
4. 安装成功，应用重启
|
||
```
|
||
|
||
### 强制更新
|
||
```
|
||
1. 弹窗显示（无法关闭）
|
||
↓
|
||
2. 点击"立即更新"（唯一操作）
|
||
↓
|
||
3. 自动下载和安装
|
||
↓
|
||
4. 安装成功，应用重启
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 代码结构
|
||
|
||
### 模板（简化）
|
||
```vue
|
||
<template>
|
||
<a-modal>
|
||
<!-- 版本徽章 + 版本对比 -->
|
||
<!-- 版本信息（纯文字行） -->
|
||
<!-- 更新日志（纯文字） -->
|
||
<!-- 强制更新提示（保留） -->
|
||
<!-- 下载进度（保留） -->
|
||
<!-- 操作按钮（简约） -->
|
||
</a-modal>
|
||
</template>
|
||
```
|
||
|
||
### 样式（简化）
|
||
```vue
|
||
<style scoped>
|
||
/* 去掉所有卡片样式 */
|
||
/* 去掉所有图标样式 */
|
||
/* 使用纯文字布局 */
|
||
/* 标准按钮样式 */
|
||
/* 简化的动画 */
|
||
</style>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 视觉层次
|
||
|
||
### 信息优先级
|
||
```
|
||
1. 操作按钮（最重要）
|
||
└> 主题色背景，白色文字
|
||
|
||
2. 强制更新提示（次重要）
|
||
└> 左侧橙色边框
|
||
|
||
3. 版本信息（一般）
|
||
└> 纯文字，左侧对齐
|
||
|
||
4. 更新日志（辅助）
|
||
└> 小字，灰色
|
||
```
|
||
|
||
### 留白策略
|
||
```
|
||
区块间距：16px
|
||
元素间距：8px
|
||
文字内边距：4px
|
||
|
||
整体感觉：紧凑但不拥挤
|
||
```
|
||
|
||
---
|
||
|
||
## ✨ 核心价值
|
||
|
||
### 极简而不简陋
|
||
- ✅ 保留所有必要信息
|
||
- ✅ 去掉所有装饰元素
|
||
- ✅ 专注功能本身
|
||
|
||
### 协调而非突出
|
||
- ✅ 使用系统主题变量
|
||
- ✅ 与整体风格一致
|
||
- ✅ 不抢眼但实用
|
||
|
||
### 快速而非拖沓
|
||
- ✅ 更快的动画（0.15s）
|
||
- ✅ 更小的位移（8px）
|
||
- ✅ 更紧凑的布局
|
||
|
||
---
|
||
|
||
## 📋 使用方式
|
||
|
||
### 立即可用
|
||
```bash
|
||
# 前端已构建成功
|
||
wails dev
|
||
```
|
||
|
||
### 预期效果
|
||
- 应用启动后 5 秒自动检查更新
|
||
- 发现新版本显示简约弹窗
|
||
- 点击"立即更新"自动下载和安装
|
||
- 安装完成后应用自动重启
|
||
|
||
---
|
||
|
||
## 🎯 最终目标达成
|
||
|
||
### 从"丰富"到"必要"
|
||
```
|
||
优化前：图标+卡片+装饰+说明
|
||
优化后：文字+按钮+功能
|
||
```
|
||
|
||
### 从"突出"到"融入"
|
||
```
|
||
优化前：鲜艳的颜色，大的间距
|
||
优化后：系统变量，紧凑布局
|
||
```
|
||
|
||
### 从"复杂"到"简单"
|
||
```
|
||
优化前：卡片式操作区域
|
||
优化后：标准按钮
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 简化数据
|
||
|
||
| 指标 | 简化前 | 简化后 | 减少 |
|
||
|------|--------|--------|------|
|
||
| 图标数量 | 6+ 个 | 1 个 | ⬇️ 83% |
|
||
| 卡片数量 | 4 个 | 1 个 | ⬇️ 75% |
|
||
| 代码行数 | 750 行 | 535 行 | ⬇️ 28% |
|
||
| 样式类数 | 20+ 个 | 10 个 | ⬇️ 50% |
|
||
| 动画时长 | 0.2s | 0.15s | ⬇️ 25% |
|
||
| 弹窗宽度 | 580px | 480px | ⬇️ 17% |
|
||
|
||
---
|
||
|
||
## 🎉 总结
|
||
|
||
### 设计哲学
|
||
> **Less is More** - 少即是多
|
||
|
||
### 核心原则
|
||
1. **功能优先** - 保留核心功能
|
||
2. **装饰最小化** - 去掉不必要元素
|
||
3. **布局紧凑化** - 减少空间浪费
|
||
4. **风格统一化** - 与系统协调
|
||
|
||
### 最终效果
|
||
- ✅ 简约而不简陋
|
||
- ✅ 紧凑而不拥挤
|
||
- ✅ 快速而不突兀
|
||
- ✅ 实用而不花哨
|
||
|
||
---
|
||
|
||
**简约设计完成！极简、协调、实用！** ✨
|