admin/meijiaka-zy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update DMG background design spec with app design system

Browse Source
This commit is contained in:
小鱼开发
2026-05-19 10:05:12 +08:00
parent 88f913b511
commit 92359e98f8
1 changed files with 196 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/dmg-background-design-spec.md
+196 -49
View File
@@ -1,80 +1,227 @@
# DMG 背景图设计需求
# DMG 背景图设计规范
## 画布规格
> 本规范与美家卡智影桌面应用视觉体系保持一致。
---
## 一、画布规格
| 项目 | 规格 |
|------|------|
| 尺寸 | **660 x 400 px** |
| 格式 | PNG（不透明或带透明度均可）|
| 尺寸 | **660 × 400 px** |
| 格式 | PNG（不透明） |
| 分辨率 | 72 DPI |
| 色彩模式 | sRGB |
## 布局说明（Tauri 自动放置的元素）
---
背景图上**不需要画**这些元素，Tauri 会自动叠加：
## 二、视觉风格
| 元素 | 位置（相对 660x400 画布）|
|------|------------------------|
| `.app` 图标 | 左侧，中心偏上 (180, 170) |
| `Applications` 文件夹别名 | 右侧，中心偏上 (480, 170) |
### 2.1 设计语言
背景图只需在左右两侧预留足够的空白区域（约 120x140 px）给这两个图标。
与主应用保持一致：
- **卡片式布局** — 圆角卡片承载信息
- **轻微阴影** — 营造层级感
- **绿色主色调** — 品牌识别色 `#36b26a`
- **圆角设计** — 大圆角（12px）为主，小圆角（8px）为辅
- **毛玻璃质感** — 侧边栏/浮层使用半透明模糊效果
## 需要包含的内容
### 2.2 色彩规范（引用应用 CSS 变量）
### 1. 顶部：品牌标识
| 用途 | 色值 | 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（小尺寸，64x64 px 左右）
### 2. 中部偏下：安装指引
- 拖拽箭头或视觉引导线：从左图标指向右文件夹
- 文字："将应用拖拽到 Applications 文件夹"
**样式：**
- Logo 与文字水平排列，间距 12 px
- 文字颜色：`#111827` (`--text-primary`)
- 文字字号：28 px，字重 600
- 整体居中于顶部，距上边距约 40 px
### 3. 底部：首次安装提示（重点）
由于应用未注册 Apple 开发者账号，首次打开会被 macOS Gatekeeper 拦截。需要明确提示用户如何绕过：
### 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. 点击「仍要打开」
或右键点击应用图标，选择「打开」
方法 1：右键点击应用图标 → 选择「打开」
方法 2：系统设置 → 隐私与安全性 → 仍要打开
```
### 4. 底部边缘：版本号（可选）
- "v1.5.18"
**文字样式：**
- 提示标题：14 px，600，颜色 `#36b26a` (`--primary`)
- 说明正文：13 px，400，颜色 `#6b7280` (`--text-secondary`)
- 行高：1.6
## 设计风格建议
**提示图标：**
- 使用绿色圆点（8 px）或 Info 图标（16 px）
- 颜色：`#36b26a` (`--primary`)
- **整体风格**：简洁、专业、与 macOS 原生应用一致
- **背景色**：浅灰或纯白（推荐 `#F5F5F7` 或 `#FFFFFF`）
- **文字颜色**：深灰 `#1D1D1F`
- **提示框**：白色卡片 + 浅灰边框 + 轻微阴影
- **强调色**：品牌绿色 `#2EB872` 或系统蓝 `#007AFF`
- **字体**：PingFang SC / SF Pro（macOS 系统字体）
### 4.4 底部版本号（可选）
## 参考案例
**内容：** "v1.5.18"
### 飞书 (Lark)
- 浅灰背景
**样式：**
- 字号：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 提示（已签名）
## 交付物
1. `dmg-background.png`（660x400 px）
2. 源文件（PSD / Sketch / Figma）
## 注意事项
- 左右两侧预留空间给 Tauri 自动放置的图标（见「布局说明」）
- 文字确保在 660x400 分辨率下清晰可读（最小字号建议 12px）
- 避免使用纯白背景配纯白图标（对比度不足）
- 底部提示区域建议用卡片/底色区分，确保用户注意到
### 7.3 推荐风格
参考 **Apple 官方设计风格** + **应用自身绿色品牌色**：
- 背景：`#f9fafb`
- 卡片：纯白 + 浅灰边框 + 轻微阴影
- 强调：绿色 `#36b26a`
- 整体简洁、专业、无多余装饰