灵伴桌面宠物 — UI/UX 改版方案

日期: 2026-08-05
设计原则: 面向普通用户、降低认知负荷、渐进式引导、视觉一致性
设计语言: 温暖、亲和、现代（不再是”开发者工具”风格）

1. 当前 UI 问题分析

1.1 控制中心 (manager.html + manager.css)

问题 严重度 描述
开发者风格 高 英文标签 “LING PET”、”SCRIPT SCHEDULER”、”eyebrow” 对普通用户不友好
信息过载 高 左侧面板包含宠物预览、设置、旧任务迁移三块，初次进入不知所措
旧任务迁移面板 高 面向 v1.0 升级用户的临时功能，v2.0 应移除
PowerShell 脚本编辑器 中 直接展示代码编辑器会吓退非技术用户
“恢复内置任务模板”按钮 中 文案不清晰，普通用户不理解”内置模板”含义
数据目录按钮 低 普通用户无需关心数据存储路径
紫色+深色单一主题 中 虽然美观但不够温暖，缺乏亲和力
宠物预览区域固定 低 不能体现宠物动画效果
缺少面包屑/导航 低 无页面层级感

1.2 宠物窗口 (pet.html + pet.css)

问题 严重度 描述
交互提示缺失 中 新手不知道可以拖拽、滚轮缩放、双击打开设置
右键菜单过于技术化 中 显示”脚本任务”等开发者术语
无状态反馈 低 任务执行时宠物无视觉反馈
菜单按钮不明显 低 悬浮时才显示，新用户可能找不到

1.3 系统托盘

问题 严重度 描述
右键菜单项过多 中 宠物大小子菜单、脚本任务子菜单对普通用户冗余
无快捷操作 低 缺少”快速添加提醒”等入口

2. 改版目标与原则

2.1 设计目标

  1. 降低门槛: 非技术用户在 5 分钟内完成首次设置
  2. 温暖亲和: 配色、图标、文案更加温馨可爱
  3. 信息分层: 常用功能突出，高级功能折叠
  4. 状态可见: 宠物行为和界面状态清晰可感知
  5. 跨语言友好: UI 布局不受中英文切换影响

2.2 设计原则

原则 说明
渐进式披露 先展示核心功能，高级选项按需展开
即时反馈 所有操作有明确的视觉/动画反馈
容错设计 危险操作有确认，可撤销
一致性 宠物窗口、控制中心、托盘菜单风格统一
情感化设计 宠物表情/动作与系统状态联动

3. 各页面改版方案

3.1 宠物窗口

当前布局

┌──────────────────┐
│                  │
│    [宠物图片]     │
│                  │
│              [✦] │ ← 悬浮显示
└──────────────────┘

改版布局

┌──────────────────┐
│  [状态气泡]       │ ← 任务运行时显示
│    [宠物图片]     │
│                  │
│  [♥] [⚙] [⋮]   │ ← 始终可见的快捷按钮组
└──────────────────┘

具体改动

改动项 当前 改版后
快捷按钮 单个 ✦ 悬浮显示 三按钮始终可见：互动(♥)、设置(⚙)、更多(⋮)
状态气泡 无 任务执行时宠物旁显示气泡（”喝水时间到！”）
互动反馈 爱心粒子 保留 + 新增宠物表情变化
右键菜单 技术向菜单 精简为用户友好菜单
任务执行反馈 无视觉反馈 宠物跳起 + 气泡通知
悬停提示 无 鼠标悬停 2 秒显示操作提示 tooltip
空闲动画 仅呼吸+摇摆 增加随机小动作（眨眼、转头等）

右键菜单改版

当前菜单:                          改版后:
┌────────────────────┐            ┌────────────────────┐
│ 隐藏宠物            │            │ 🐾 隐藏宠物         │
│ 任务与设置…         │            │ ⚙ 设置…            │
│ ─────────          │            │ ─────────          │
│ ☑ 动态效果          │            │ 🎨 更换宠物形象…    │
│ ☑ 总在最前          │            │ ─────────          │
│ 宠物大小 ▶          │            │ 📋 我的提醒         │
│ 更换宠物图片…       │            │  · 喝水提醒  10:00  │
│ 恢复默认形象        │            │  · 午休提醒  12:30  │
│ ─────────          │            │ ─────────          │
│ 脚本任务 ▶          │            │ ❌ 退出灵伴         │
│ ☑ 开机自启动        │            └────────────────────┘
│ ─────────          │
│ 退出灵伴            │
└────────────────────┘

3.2 控制中心 — 首页（Dashboard）

改版布局

┌──────────────────────────────────────────────────────┐
│  🐾 灵伴控制中心          [浅色] [语言] [最小化] [关闭] │
├──────────┬───────────────────────────────────────────┤
│          │                                           │
│  📊 概览  │   ┌─────────────┐  ┌─────────────┐       │
│  🐱 宠物  │   │  今日提醒    │  │  宠物状态    │       │
│  ⏰ 提醒  │   │  3/5 已完成  │  │  🐱 小灵     │       │
│  🎨 外观  │   │  下一个:     │  │  心情: 开心  │       │
│  ⚙ 设置  │   │  喝水 14:00  │  │  已陪伴 3天  │       │
│          │   └─────────────┘  └─────────────┘       │
│          │                                           │
│          │   ┌──────────────────────────────┐       │
│          │   │  快捷操作                     │       │
│          │   │  [+ 新建提醒] [📷 换宠物]    │       │
│          │   │  [📊 历史记录] [⚙ 设置]     │       │
│          │   └──────────────────────────────┘       │
│          │                                           │
└──────────┴───────────────────────────────────────────┘

设计要点

区域 说明
左侧导航 图标 + 文字垂直导航，5 个一级入口
今日提醒卡片 概览今日所有提醒及完成状态
宠物状态卡片 宠物名称、心情、陪伴天数
快捷操作 最常用的 4 个操作入口

3.3 控制中心 — 宠物页面

改版布局

┌──────────────────────────────────────────────────────┐
│  🐾 灵伴控制中心                                       │
├──────────┬───────────────────────────────────────────┤
│  📊 概览  │  ┌──────────────────────┐                │
│  🐱 宠物◀ │  │                      │                │
│  ⏰ 提醒  │  │    宠物实时预览       │                │
│  🎨 外观  │  │    (带动画)           │                │
│  ⚙ 设置  │  │                      │                │
│          │  └──────────────────────┘                │
│          │                                           │
│          │  ┌─ 我的宠物 ─────────────────────────┐   │
│          │  │  [🐱小灵] [🐶旺财] [+ 添加宠物]    │   │
│          │  └────────────────────────────────────┘   │
│          │                                           │
│          │  ┌─ 宠物形象 ─────────────────────────┐   │
│          │  │  [内置] [本地] [工坊]              │   │
│          │  │  [🐱] [🐰] [🐻] [🐼] [🦊] ...    │   │
│          │  │          [选择文件…]               │   │
│          │  └────────────────────────────────────┘   │
│          │                                           │
│          │  ┌─ 宠物行为 ─────────────────────────┐   │
│          │  │  ☑ 呼吸动画  ☑ 摇摆动画            │   │
│          │  │  ☑ 点击反馈  ☑ 空闲小动作          │   │
│          │  │  大小: [━━━━━●━━━━] 100%          │   │
│          │  └────────────────────────────────────┘   │
└──────────┴───────────────────────────────────────────┘

3.4 控制中心 — 提醒页面

改版布局

┌──────────────────────────────────────────────────────┐
│  🐾 灵伴控制中心                                       │
├──────────┬───────────────────────────────────────────┤
│  📊 概览  │  ┌─ 我的提醒 ─────────────────────────┐   │
│  🐱 宠物  │  │ [+ 新建提醒]  [从模板添加]         │   │
│  ⏰ 提醒◀ │  ├────────────────────────────────────┤   │
│  🎨 外观  │  │ ┌──────────────────────────────┐   │   │
│  ⚙ 设置  │  │ │ ☑ 喝水提醒    每小时    [⚙] │   │   │
│          │  │ │ ☑ 午休提醒    12:30     [⚙] │   │   │
│          │  │ │ ☐ 眼保健操    15:00     [⚙] │   │   │
│          │  │ │ ☑ 定时关机    23:00     [⚙] │   │   │
│          │  │ └──────────────────────────────┘   │   │
│          │  └────────────────────────────────────┘   │
│          │                                           │
│          │  ┌─ 提醒详情 ─────────────────────────┐   │
│          │  │  名称: [喝水提醒___________]        │   │
│          │  │  时间: [每小时 ▾]  [10:00]         │   │
│          │  │  方式: [桌面通知 ▾]                │   │
│          │  │  说明: [该喝水了，休息一下眼睛]     │   │
│          │  │  ─────────────────────────────     │   │
│          │  │  [高级: PowerShell 脚本 ▸]  ← 折叠  │   │
│          │  │  ─────────────────────────────     │   │
│          │  │  [💾 保存] [▶ 测试运行] [🗑 删除]  │   │
│          │  └────────────────────────────────────┘   │
│          │                                           │
│          │  ┌─ 执行历史 ─────────────────────────┐   │
│          │  │  08-05 14:00  喝水提醒  ✅ 成功     │   │
│          │  │  08-05 13:00  喝水提醒  ✅ 成功     │   │
│          │  │  08-05 12:30  午休提醒  ✅ 成功     │   │
│          │  │  [查看全部历史]                     │   │
│          │  └────────────────────────────────────┘   │
└──────────┴───────────────────────────────────────────┘

关键改进

改进点 说明
模板化提醒 普通用户从预置模板中选择，无需编写脚本
高级模式折叠 PowerShell 脚本编辑器折叠在”高级”面板中，默认隐藏
频率选择 支持”每天一次”、”每小时”、”自定义 Cron”
通知方式 可选择”桌面通知”、”宠物动画”、”弹窗提醒”
执行历史 内嵌最近执行记录，无需单独打开日志文件

3.5 首次启动引导向导

步骤流程

┌─────────────────────────────────────────┐
│           🐾 欢迎来到灵伴！              │
│                                         │
│   你的桌面新伙伴，好看又好用              │
│                                         │
│       [宠物插图/动画]                    │
│                                         │
│         [开始设置 →]                    │
└─────────────────────────────────────────┘

                ↓

┌─────────────────────────────────────────┐
│         Step 1/4: 选择语言              │
│                                         │
│   🌐 中文(简体)    🌐 English           │
│                                         │
│         [下一步 →]                      │
└─────────────────────────────────────────┘

                ↓

┌─────────────────────────────────────────┐
│         Step 2/4: 选择你的伙伴           │
│                                         │
│  [🐱 小灵] [🐶 旺财] [🐰 月月]        │
│  [🐻 憨憨] [🐼 滚滚] [🦊 菲菲]        │
│                                         │
│     [从文件选择…]     [跳过]            │
│                                         │
│         [下一步 →]                      │
└─────────────────────────────────────────┘

                ↓

┌─────────────────────────────────────────┐
│         Step 3/4: 快速设置提醒           │
│                                         │
│  推荐提醒：                              │
│  ☑ 每小时喝水提醒                       │
│  ☑ 午休提醒 (12:30)                     │
│  ☐ 眼保健操 (10:00, 15:00)             │
│  ☐ 定时关机 (23:00)                     │
│  ☐ 每日总结提醒 (18:00)                 │
│                                         │
│         [下一步 →]                      │
└─────────────────────────────────────────┘

                ↓

┌─────────────────────────────────────────┐
│         Step 4/4: 准备就绪！             │
│                                         │
│   🎉 小灵已经准备好了！                  │
│                                         │
│   💡 小贴士：                            │
│   · 拖动宠物可以移动位置                 │
│   · 滚轮可以调整大小                     │
│   · 双击打开控制中心                     │
│   · 右键查看更多选项                     │
│                                         │
│      [开始使用 🐾]                      │
└─────────────────────────────────────────┘

4. 交互流程优化建议

4.1 宠物交互流程

当前流程:
  看到宠物 → 不知道怎么操作 → 放弃

优化后流程:
  看到宠物 → 鼠标悬停 2s 显示 tooltip
          → 点击 → 爱心 + 跳动反馈
          → 双击 → 打开控制中心首页
          → 右键 → 精简菜单
          → 快捷按钮始终可见

4.2 新建提醒流程

当前流程:
  打开控制中心 → 点击"新建任务" → 填写名称/时间/脚本(需要懂PS) → 保存

优化后流程(普通用户):
  右键宠物 → "快速添加提醒" → 弹出微型面板
  ├─ 选择模板: [喝水] [休息] [关机] [自定义…]
  ├─ 调整时间: [14:00 ▾]
  └─ [确认添加]

优化后流程(高级用户):
  打开控制中心 → 提醒页面 → 新建提醒
  ├─ 填写基本信息（名称/时间/频率）
  ├─ 展开"高级" → PowerShell 编辑器
  └─ 保存

4.3 任务执行通知

当前: 任务完成 → 系统通知 (可能被忽略)

优化后:
  任务触发前 30s → 宠物气泡预告 "5分钟后该喝水啦~"
  任务触发时 → 宠物跳起 + 气泡 + 系统通知
  任务执行中 → 宠物状态变为"忙碌"
  任务完成 → 宠物表情变化 + 气泡结果
  任务失败 → 宠物难过表情 + 气泡提示

4.4 设置变更流程

当前: 控制中心设置 → 即时生效 → 无反馈

优化后:
  修改设置 → 即时预览(如缩放实时变化)
          → Toast 确认 "设置已保存"
          → 宠物做确认动画

5. 视觉设计规范

5.1 配色方案

用途 颜色 说明
主色调 #7C5CFC (温暖紫) 比当前 #9573f2 更温暖
辅助色 #FF8FA3 (樱花粉) 用于强调和互动元素
成功色 #5CDEC9 (薄荷绿) 任务成功/完成状态
警告色 #FFB84D (暖橙) 提醒和注意
错误色 #FF6B7A (柔和红) 错误状态
背景深色 #1A1B2E 深色主题背景
背景浅色 #F5F3FF 浅色主题背景
文字主色 #F0EEFF (深色) / #2D2B3D (浅色) 高可读性

5.2 字体规范

用途 字体 大小
页面标题 Segoe UI / Microsoft YaHei UI 24px Bold
面板标题 同上 18px Semibold
正文 同上 14px Regular
辅助文字 同上 12px Regular
代码 Consolas / Cascadia Code 13px

5.3 圆角与间距

元素 圆角 内边距
面板/卡片 16px 20px
按钮 10px 10px 20px
输入框 8px 8px 12px
任务项 12px 14px
标签/徽章 999px (全圆角) 4px 10px

5.4 动效规范

动效 时长 缓动函数
按钮悬停 150ms ease-out
面板展开/折叠 250ms ease-in-out
Toast 进入/退出 200ms ease-out
宠物动画 保持现有 保持现有
页面切换 200ms ease-in-out
状态变化 300ms ease

6. 组件库建议

为保持一致性和可维护性，建议建立设计组件库：

组件 描述
LingButton 主按钮/次要按钮/文字按钮/危险按钮
LingSwitch 开关切换
LingSlider 滑块
LingCard 通用卡片容器
LingToast 通知提示
LingModal 模态对话框
LingTabs 标签页切换
LingBadge 状态徽章
LingTooltip 悬浮提示
LingEmpty 空状态占位