小鱼开发
7.3 KiB
7.3 KiB
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 - 整体简洁、专业、无多余装饰