lxy/u-desk

Private

Public Access

Fork 0

Files

绝尘 6eaaa56eb6 新增：文档体系重构+CHANGELOG补充+发布产物清理

2026-05-01 22:22:06 +08:00

13 KiB

Raw Blame History

操作区域重新设计

设计理念

从"按钮"到"操作卡片"

传统按钮虽然常见，但缺乏信息层次和视觉吸引力。我们采用卡片式操作区域，提供：

✅ 更大的点击区域
✅ 更清晰的说明文字
✅ 更丰富的视觉信息
✅ 更现代的设计风格

优化前后对比

优化前（传统按钮）

┌──────────────────────────────────────────────┐
│                                              │
│                       [ 跳过此版本 ]          │ ← 传统按钮
│                       [ 立即更新 ↓ ]          │
│                                              │
│ ☐ 提醒我稍后更新                             │ ← 复选框
└──────────────────────────────────────────────┘

问题：

信息量少，只显示操作名称
说明文字（复选框）分离，不连贯
视觉单调，缺乏层次
点击区域较小

优化后（操作卡片）

┌──────────────────────────────────────────────┐
│                                              │
│ ┌────────────────────────────────────────┐  │
│ │ ✕ 稍后更新                             │  │ ← 图标 + 标题 + 说明
│ │    跳过此版本，下次启动时再提醒         │  │
│ └────────────────────────────────────────┘  │
│                                              │
│ ┌────────────────────────────────────────┐  │
│ │ ↓ 立即更新到最新版本                → │  │ ← 主操作（突出）
│ │    点击下载 45.2 MB 安装包            │  │
│ └────────────────────────────────────────┘  │
│                                              │
│     ☐ 下次启动时继续提醒我                   │ ← 提醒选项
└──────────────────────────────────────────────┘

优势：

每个操作都有清晰的说明
信息层次分明（图标 + 标题 + 描述）
更大的点击区域
视觉更丰富、更现代

设计细节

1. 稍后更新（次要操作）

<div class="action-item skip-action" @click="handleSkip">
  <div class="action-content">
    <icon-close class="action-icon" />
    <div class="action-text">
      <div class="action-title">稍后更新</div>
      <div class="action-desc">跳过此版本，下次启动时再提醒</div>
    </div>
  </div>
</div>

样式：

图标：关闭图标（✕）- 表示跳过
背景：浅灰色（var(--color-fill-3)）
悬停效果：轻微上移
说明文字：灰色小字

2. 立即更新（主要操作）

<div class="action-item primary-action" @click="handleDownload">
  <div class="action-content">
    <icon-download class="action-icon" />
    <div class="action-text">
      <div class="action-title">立即更新到最新版本</div>
      <div class="action-desc">点击下载 45.2 MB 安装包</div>
    </div>
    <div class="action-arrow">
      <icon-arrow-right />
    </div>
  </div>
</div>

样式：

图标：下载图标（↓）- 蓝色背景
背景：主题色背景（var(--color-primary-light-1)）
右侧箭头：→ 表示进入下一步
悬停效果：
- 背景变为主题色
- 图标变为白色
- 箭头向右移动

3. 安装中状态

<div class="action-item installing-action">
  <div class="action-content">
    <icon-loading class="action-icon spinning" />
    <div class="action-text">
      <div class="action-title">正在安装更新</div>
      <div class="action-desc">安装完成后应用将自动重启，请稍候...</div>
    </div>
  </div>
</div>

样式：

图标：加载图标（旋转动画）
背景：绿色背景（成功色）
不可点击（pointer-events: none）
图标旋转动画

交互设计

悬停效果

普通状态：

┌────────────────────────────────────────┐
│ ↓ 立即更新到最新版本                → │
│    点击下载 45.2 MB 安装包            │
└────────────────────────────────────────┘
背景：浅色
图标：蓝色背景，白色图标
箭头：深灰色，固定位置

悬停状态：

┌────────────────────────────────────────┐
│ ↓ 立即更新到最新版本                → │  ← 箭头右移
│    点击下载 45.2 MB 安装包            │
└────────────────────────────────────────┘
背景：主题色
图标：白色背景，蓝色图标
箭头：主题色，向右移动 4px

点击反馈

悬停 → 上移 1px
点击 → 下移 0px（回到原位）

加载状态

┌────────────────────────────────────────┐
│ ⟳ 立即更新到最新版本                   │  ← 图标脉冲动画
│    正在准备下载...                    │
└────────────────────────────────────────┘
不透明度：0.6
不可点击

完整样式代码

.action-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-item {
  background: var(--color-fill-1);
  border: 1px solid var(--color-border-1);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: var(--color-fill-2);
    border-color: var(--color-border-2);
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }

  .action-content {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .action-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fill-3);
    color: var(--color-text-2);
    border-radius: 8px;
    font-size: 18px;
    flex-shrink: 0;
  }

  .action-text {
    flex: 1;
  }

  .action-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-1);
    margin-bottom: 2px;
  }

  .action-desc {
    font-size: 12px;
    color: var(--color-text-3);
  }

  .action-arrow {
    color: var(--color-text-3);
    font-size: 16px;
    transition: all 0.2s ease;
  }

  &:hover .action-arrow {
    color: var(--color-text-1);
    transform: translateX(4px);
  }
}

.primary-action {
  background: var(--color-fill-2);
  border-color: var(--color-border-2);

  .action-icon {
    background: var(--color-primary-light-1);
    color: var(--color-primary-6);
  }

  &:hover {
    background: var(--color-primary-light-1);
    border-color: var(--color-primary-3);

    .action-icon {
      background: var(--color-primary-6);
      color: white;
    }

    .action-title {
      color: var(--color-primary-6);
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

强制更新场景

优化前

┌──────────────────────────────────────────────┐
│              [ 立即更新 ]                      │ ← 只有一个按钮
└──────────────────────────────────────────────┘

优化后

┌──────────────────────────────────────────────┐
│                                              │
│ ┌────────────────────────────────────────┐  │
│ │ ↓ 立即更新到最新版本                → │  │ ← 卡片式操作
│ │    点击下载 45.2 MB 安装包            │  │
│ └────────────────────────────────────────┘  │
│                                              │
│ ⚠️ 重要提示                                   │
│ 此版本包含重要的安全更新和问题修复...        │
└──────────────────────────────────────────────┘

改进：

不再是冷冰冰的单个按钮
提供更多上下文信息
更大的点击区域
更友好的引导

响应式设计

大屏幕（> 600px）

┌────────────────────────────────────────────┐
│ ✕ 稍后更新                                 │
│    跳过此版本，下次启动时再提醒             │
└────────────────────────────────────────────┘

┌────────────────────────────────────────────┐
│ ↓ 立即更新到最新版本                →     │
│    点击下载 45.2 MB 安装包                │
└────────────────────────────────────────────┘

小屏幕（< 600px）

布局保持一致，卡片宽度自适应

可访问性

键盘导航

✅ Tab 键切换焦点
✅ Enter/Space 键激活
✅ 清晰的焦点指示器

屏幕阅读器

✅ 语义化的结构
✅ 清晰的标签和描述
✅ 视觉和文本信息一致

对比度

✅ 标题文字对比度 > 4.5:1
✅ 描述文字对比度 > 4.5:1
✅ 图标与背景对比度 > 3:1

动画效果

1. 悬停上移

transform: translateY(-1px);

目的： 提供视觉反馈，表示可点击

2. 箭头移动

transform: translateX(4px);

目的： 强调进入下一步的操作

3. 图标旋转（安装中）

animation: spin 1s linear infinite;

目的： 表示正在进行中

4. 图标脉冲（准备中）

animation: pulse 1.5s ease-in-out infinite;

目的： 表示等待响应

视觉层次

信息密度

图标（40×40）→ 标题（14px）→ 描述（12px）→ 箭头（16px）
   ↓                ↓               ↓              ↓
视觉焦点         主要信息      辅助说明      方向指示

颜色层次

主要操作：主题色背景 + 蓝色图标
次要操作：灰色背景 + 灰色图标
安装中：绿色背景 + 绿色图标

用户体验提升

优化前

❌ 只显示操作名称
❌ 不清楚操作后果
❌ 点击区域小
❌ 视觉单调

优化后

✅ 操作 + 说明文字
✅ 清晰的上下文信息
✅ 整个卡片可点击
✅ 丰富的视觉反馈

数据对比

维度	优化前	优化后
信息量	少	丰富
点击区域	100×32px	整个卡片
视觉层次	单层	三层（图标/标题/描述）
交互反馈	简单	丰富

实现代码

模板部分

<!-- 操作区域 -->
<div class="action-section">
  <!-- 稍后更新 -->
  <div class="action-item skip-action" @click="handleSkip">
    <div class="action-content">
      <icon-close class="action-icon" />
      <div class="action-text">
        <div class="action-title">稍后更新</div>
        <div class="action-desc">跳过此版本，下次启动时再提醒</div>
      </div>
    </div>
  </div>

  <!-- 立即更新 -->
  <div class="action-item primary-action" @click="handleDownload">
    <div class="action-content">
      <icon-download class="action-icon" />
      <div class="action-text">
        <div class="action-title">立即更新到最新版本</div>
        <div class="action-desc">点击下载 {{ formatFileSize(fileSize) }} 安装包</div>
      </div>
      <div class="action-arrow">
        <icon-arrow-right />
      </div>
    </div>
  </div>
</div>

样式部分

见上方"完整样式代码"

总结

核心改进

✅ 信息更丰富 - 标题 + 描述文字
✅ 视觉更现代 - 卡片式设计
✅ 操作更友好 - 大点击区域
✅ 反馈更及时 - 丰富的悬停效果

设计原则

让用户清楚知道每个操作的含义和后果

用户体验

清晰的信息层次
大的点击区域
丰富的视觉反馈
现代的设计风格

操作区域重新设计完成！ 🎉

13 KiB Raw Blame History Unescape Escape

操作区域重新设计

设计理念

从"按钮"到"操作卡片"

优化前后对比

优化前（传统按钮）

优化后（操作卡片）

设计细节

1. 稍后更新（次要操作）

2. 立即更新（主要操作）

3. 安装中状态

交互设计

悬停效果

点击反馈

加载状态

完整样式代码

强制更新场景

优化前

优化后

响应式设计

大屏幕（> 600px）

小屏幕（< 600px）

可访问性

键盘导航

屏幕阅读器

对比度

动画效果

1. 悬停上移

2. 箭头移动

3. 图标旋转（安装中）

4. 图标脉冲（准备中）

视觉层次

信息密度

颜色层次

用户体验提升

优化前

优化后

数据对比

实现代码

模板部分

样式部分

总结

核心改进

设计原则

用户体验

13 KiB

Raw Blame History