From 92359e98f86042f90229ab94db2febb1b9b588a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E9=B1=BC=E5=BC=80=E5=8F=91?= Date: Tue, 19 May 2026 10:05:12 +0800 Subject: [PATCH] docs: update DMG background design spec with app design system --- docs/dmg-background-design-spec.md | 245 +++++++++++++++++++++++------ 1 file changed, 196 insertions(+), 49 deletions(-) diff --git a/docs/dmg-background-design-spec.md b/docs/dmg-background-design-spec.md index 135a4a0..b57e572 100644 --- a/docs/dmg-background-design-spec.md +++ b/docs/dmg-background-design-spec.md @@ -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` +- 整体简洁、专业、无多余装饰