# DMG 背景图设计规范

> 本规范与美家卡智影桌面应用视觉体系保持一致。

---

## 一、画布规格

| 项目 | 规格 |
|------|------|
| 尺寸 | **660 × 400 px** |
| 格式 | PNG（不透明） |
| 分辨率 | 72 DPI |
| 色彩模式 | sRGB |

---

## 二、视觉风格

### 2.1 设计语言

与主应用保持一致：
- **卡片式布局** — 圆角卡片承载信息
- **轻微阴影** — 营造层级感
- **绿色主色调** — 品牌识别色 `#36b26a`
- **圆角设计** — 大圆角（12px）为主，小圆角（8px）为辅
- **毛玻璃质感** — 侧边栏/浮层使用半透明模糊效果

### 2.2 色彩规范（引用应用 CSS 变量）

| 用途 | 色值 | CSS 变量 |
|------|------|----------|
| 背景底色 | `#f9fafb` | `--bg-main` |
| 卡片背景 | `#ffffff` | `--bg-card` |
| 品牌主色 | `#36b26a` | `--primary` |
| 品牌辅色 | `#18a08a` | `--secondary` |
| 文字主色 | `#111827` | `--text-primary` |
| 文字次色 | `#6b7280` | `--text-secondary` |
| 文字三级 | `#9ca3af` | `--text-tertiary` |
| 边框颜色 | `#e5e7eb` | `--border-color` |
| 成功/提示 | `#10b981` | `--success` |
| 警告 | `#f59e0b` | `--warning` |
| 错误 | `#ef4444` | `--error` |
| 信息 | `#3b82f6` | `--info` |

### 2.3 字体规范

- **字体家族**：`'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif`
- **字重**：标题 600（SemiBold），正文 400（Regular）

| 层级 | 字号 | 字重 | 用途 |
|------|------|------|------|
| 品牌标题 | 28 px | 600 | 顶部 "美家卡智影" |
| 引导文字 | 15 px | 500 | 拖拽指引 |
| 提示标题 | 14 px | 600 | 卡片内小标题 |
| 提示正文 | 13 px | 400 | 卡片内说明文字 |
| 版本号 | 11 px | 400 | 底部版本信息 |

### 2.4 阴影规范

| 用途 | 阴影值 |
|------|--------|
| 卡片阴影 | `0 1px 3px rgb(0 0 0 / 5%)` |
| 浮层阴影 | `0 4px 12px rgb(0 0 0 / 6%)` |
| 强调阴影 | `0 4px 12px rgb(54 178 106 / 30%)` |

### 2.5 圆角规范

| 用途 | 圆角 |
|------|------|
| 大卡片 | 12 px (`--radius-lg`) |
| 小元素 | 8 px (`--radius-md`) |
| 按钮/标签 | 6 px (`--radius-sm`) |

---

## 三、布局规范

### 3.1 安全区域

Tauri 会在背景图上**自动叠加**以下元素，背景图需为其预留空间：

| 元素 | 尺寸（约） | 位置（660×400 画布） |
|------|-----------|---------------------|
| `.app` 图标 | 100 × 100 px | 左侧中心 (180, 170) |
| `Applications` 文件夹 | 100 × 100 px | 右侧中心 (480, 170) |

> ⚠️ 左右两侧 120～140 px 宽度区域避免放置重要信息，留给系统图标。

### 3.2 信息层级（从上至下）

```
┌─────────────────────────────────────────┐
│                                         │
│         [品牌 Logo + 应用名称]            │  ← 顶部居中
│                                         │
│                                         │
│    [.app]          [Applications]       │  ← 系统图标区域
│     图标              文件夹             │
│                                         │
│         ← 拖拽箭头 / 视觉引导线 →         │  ← 中部
│                                         │
│    ┌─────────────────────────────┐      │
│    │   [提示图标] 首次安装提示     │      │  ← 提示卡片
│    │   说明文字...                  │      │
│    └─────────────────────────────┘      │
│                                         │
│              v1.5.18                    │  ← 底部版本号
│                                         │
└─────────────────────────────────────────┘
```

---

## 四、内容规范

### 4.1 顶部品牌区

**内容：**
- 应用 Logo（绿色 M 图标，约 48×48 px）
- 应用名称："美家卡智影"

**样式：**
- Logo 与文字水平排列，间距 12 px
- 文字颜色：`#111827` (`--text-primary`)
- 文字字号：28 px，字重 600
- 整体居中于顶部，距上边距约 40 px

### 4.2 中部拖拽区

**内容：**
- 拖拽箭头或虚线引导线：从 `.app` 图标指向 `Applications` 文件夹
- 引导文字："将应用拖拽到 Applications 文件夹"

**样式：**
- 箭头颜色：`#36b26a` (`--primary`) 或 `#9ca3af` (`--text-tertiary`)
- 引导文字颜色：`#6b7280` (`--text-secondary`)
- 引导文字字号：15 px，字重 500

### 4.3 底部提示卡片（核心区域）

由于应用未注册 Apple 开发者账号，macOS Gatekeeper 会拦截首次打开。必须通过醒目的提示卡片告知用户解决方法。

**卡片样式：**
- 背景：`#ffffff` (`--bg-card`)
- 边框：1 px solid `#e5e7eb` (`--border-color`)
- 圆角：12 px (`--radius-lg`)
- 阴影：`0 1px 3px rgb(0 0 0 / 5%)` (`--shadow-card`)
- 内边距：左右 24 px，上下 16 px
- 最大宽度：约 440 px，水平居中

**卡片内容：**

```
[绿色圆点图标] 首次安装提示
─────────────────────────────────
由于未注册 Apple 开发者，首次打开时请：

方法 1：右键点击应用图标 → 选择「打开」
方法 2：系统设置 → 隐私与安全性 → 仍要打开
```

**文字样式：**
- 提示标题：14 px，600，颜色 `#36b26a` (`--primary`)
- 说明正文：13 px，400，颜色 `#6b7280` (`--text-secondary`)
- 行高：1.6

**提示图标：**
- 使用绿色圆点（8 px）或 Info 图标（16 px）
- 颜色：`#36b26a` (`--primary`)

### 4.4 底部版本号（可选）

**内容：** "v1.5.18"

**样式：**
- 字号：11 px (`--font-xs`)
- 颜色：`#9ca3af` (`--text-tertiary`)
- 位置：底部居中，距下边距约 16 px

---

## 五、设计禁忌

| ❌ 禁止 | ✅ 推荐 |
|---------|---------|
| 使用鲜艳刺眼的背景色（大红、亮黄） | 使用浅灰 `#f9fafb` 或纯白 `#fff` |
| 文字过小（< 11 px）导致可读性差 | 最小字号 11 px，正文 13 px |
| 左右两侧放置重要信息（被系统图标遮挡） | 左右两侧 120 px 留白 |
| 使用纯黑 `#000` 文字 | 使用深灰 `#111827` |
| 阴影过重（如 0 10px 30px） | 使用轻微阴影 `0 4px 12px rgb(0 0 0 / 6%)` |
| 圆角过小（2-4 px）或直角 | 使用 8-12 px 大圆角 |
| 使用多种字体混排 | 统一使用 Inter / PingFang SC |

---

## 六、交付物

| 文件 | 说明 |
|------|------|
| `dmg-background.png` | 660 × 400 px，72 DPI，sRGB，PNG 格式 |
| `dmg-background@2x.png` | 1320 × 800 px（Retina 屏高清版本，可选） |
| 源文件 | PSD / Sketch / Figma 源文件 |

**放置路径：** `tauri-app/src-tauri/dmg-background.png`

---

## 七、参考案例

### 7.1 飞书 (Lark)
- 浅灰背景 `#f5f5f7`
- 中央大 Logo
- 两侧图标 + 拖拽箭头
- 底部小字提示

### 7.2 微信
- 纯白背景
- 简洁的拖拽指引
- 无 Gatekeeper 提示（已签名）

### 7.3 推荐风格
参考 **Apple 官方设计风格** + **应用自身绿色品牌色**：
- 背景：`#f9fafb`
- 卡片：纯白 + 浅灰边框 + 轻微阴影
- 强调：绿色 `#36b26a`
- 整体简洁、专业、无多余装饰
