507 lines
12 KiB
Markdown
507 lines
12 KiB
Markdown
# 🎨 FocusBuddy 图标设计教程（Figma 中文版）
|
||
|
||
**日期**: 2025年11月22日
|
||
**工具**: Figma（免费）
|
||
**所需时间**: 20-30分钟
|
||
**难度**: ⭐⭐☆☆☆ 简单
|
||
|
||
---
|
||
|
||
## 📋 准备工作
|
||
|
||
### 1. 注册 Figma 账号
|
||
1. 打开浏览器，访问 **https://www.figma.com**
|
||
2. 点击右上角 **"Sign up"**（注册）
|
||
3. 使用 Google 账号或邮箱注册（完全免费）
|
||
4. 验证邮箱后登录
|
||
|
||
### 2. 准备颜色代码
|
||
把这些颜色复制到记事本，待会要用：
|
||
```
|
||
主色调（平静的绿色）： #A7C4BC
|
||
成功色（明亮的绿色）： #88C9A1
|
||
背景色（温暖的米白）： #F8F6F2
|
||
文字色（柔和的灰色）： #5B6D6D
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 推荐设计方案：温柔专注圈
|
||
|
||
这个设计最符合 FocusBuddy 的理念：
|
||
- 同心圆代表专注的力量
|
||
- 可选的笑脸让图标更友善
|
||
- 柔和的配色传达温暖支持
|
||
|
||
---
|
||
|
||
## 📐 第一步：创建画布（2分钟）
|
||
|
||
### 1.1 新建文件
|
||
1. 登录 Figma 后，点击左上角 **"New design file"**（新建设计文件）
|
||
2. 会自动打开一个空白画布
|
||
|
||
### 1.2 创建正方形画框
|
||
1. 按键盘 **F** 键（Frame 工具）
|
||
2. 在右侧属性面板找到 **"Frame"** 区域
|
||
3. 在宽度（W）输入：**1024**
|
||
4. 在高度（H）输入：**1024**
|
||
5. 按 **Enter** 确认
|
||
|
||
**✅ 检查点**：你应该看到一个白色的正方形
|
||
|
||
### 1.3 命名画框
|
||
1. 双击画框名称（左侧图层面板）
|
||
2. 改名为：**FocusBuddy 图标**
|
||
|
||
---
|
||
|
||
## 🎨 第二步：创建背景渐变（3分钟）
|
||
|
||
### 2.1 绘制背景矩形
|
||
1. 按键盘 **R** 键（矩形工具）
|
||
2. 在画框内拖拽，绘制一个矩形
|
||
3. 在右侧属性面板输入：
|
||
- **W**（宽度）：1024
|
||
- **H**（高度）：1024
|
||
- **X**：0
|
||
- **Y**：0
|
||
|
||
### 2.2 添加渐变色
|
||
1. 右侧找到 **"Fill"**（填充）
|
||
2. 点击颜色方块，打开颜色选择器
|
||
3. 在颜色选择器顶部，找到填充类型图标区域
|
||
4. 点击渐变图标（通常是第二个图标，有渐变效果的图标）
|
||
5. 或者直接在颜色方块上看到一个方形图标，点击它切换到 **Linear gradient**（线性渐变）
|
||
|
||
### 2.3 设置渐变颜色
|
||
**第一个色块（顶部）**：
|
||
1. 点击渐变条上的第一个圆点
|
||
2. 删除原来的代码，输入：**A7C4BC**
|
||
3. 按 Enter
|
||
|
||
**第二个色块（底部）**：
|
||
1. 点击渐变条上的第二个圆点
|
||
2. 删除原来的代码，输入：**88C9A1**
|
||
3. 按 Enter
|
||
|
||
### 2.4 调整渐变方向
|
||
1. 将渐变条旋转为竖直方向（从上到下）
|
||
2. 确保顶部是 #A7C4BC（浅绿色）
|
||
3. 底部是 #88C9A1（明绿色）
|
||
|
||
**✅ 检查点**：背景应该是从上到下的绿色渐变
|
||
|
||
---
|
||
|
||
## 🔵 第三步：绘制外圆环（5分钟）
|
||
|
||
### 3.1 创建圆环
|
||
1. 按键盘 **O** 键（椭圆工具）
|
||
2. **按住 Shift 键**，在画布中心拖拽出一个正圆
|
||
3. 在右侧输入尺寸：
|
||
- **W**：800
|
||
- **H**：800
|
||
|
||
### 3.2 居中对齐
|
||
1. 选中这个圆（点击它）
|
||
2. 同时按住 **Ctrl**（Windows）或 **Cmd**（Mac），点击背景画框
|
||
3. 顶部工具栏会出现对齐按钮
|
||
4. 点击 **居中对齐** 和 **垂直居中**
|
||
|
||
### 3.3 设置圆环样式
|
||
**填充（Fill）**：
|
||
1. 点击 Fill 右边的减号 **-**，删除填充
|
||
|
||
**描边（Stroke）**：
|
||
1. 点击 **"Stroke"** 旁边的 **+** 号
|
||
2. 点击颜色方块，输入：**F8F6F2**（米白色）
|
||
3. 找到 **"Stroke weight"**（描边粗细）
|
||
4. 输入：**60**
|
||
|
||
**透明度**：
|
||
1. 找到右上角的 **"Pass through"** 下拉菜单
|
||
2. 拖动下方的透明度滑块到 **90%**
|
||
|
||
**✅ 检查点**：应该看到一个粗粗的白色圆环
|
||
|
||
---
|
||
|
||
### 💾 随时保存你的工作
|
||
|
||
**Figma 会自动保存**，但你也可以手动保存：
|
||
|
||
1. **快捷键保存**：
|
||
- Windows: 按 **Ctrl + S**
|
||
- Mac: 按 **Cmd + S**
|
||
|
||
2. **查看保存状态**：
|
||
- 文件名旁边会显示 **"Saved"**（已保存）
|
||
- 如果显示 **"Saving..."**（保存中），等几秒即可
|
||
|
||
3. **重命名文件**：
|
||
- 点击顶部的文件名（"Untitled"）
|
||
- 输入新名字，如：**"FocusBuddy 图标"**
|
||
- 按 Enter
|
||
|
||
4. **下次继续**：
|
||
- 关闭浏览器后，你的设计会保存在云端
|
||
- 下次登录 Figma，在首页找到你的文件
|
||
- 点击即可继续编辑
|
||
|
||
**💡 提示**：可以随时暂停，Figma 会自动保存你的进度！
|
||
|
||
---
|
||
|
||
## 🔵 第四步：绘制内圆（4分钟）
|
||
|
||
### 4.1 创建内圆
|
||
1. 按 **O** 键
|
||
2. **按住 Shift** 拖拽出一个圆
|
||
3. 设置尺寸：
|
||
- **W**：560
|
||
- **H**：560
|
||
|
||
### 4.2 居中对齐
|
||
1. 选中内圆
|
||
2. 按住 **Ctrl/Cmd**，点击画框
|
||
3. 点击居中对齐按钮
|
||
|
||
### 4.3 设置内圆颜色
|
||
1. **Fill**（填充）：**F8F6F2**（米白色）
|
||
2. **Opacity**（不透明度）：**95%**
|
||
|
||
**✅ 检查点**：中间有一个大大的白色圆
|
||
|
||
---
|
||
|
||
## 😊 第五步：添加笑脸（可选，8分钟）
|
||
|
||
### 5.1 绘制左眼
|
||
1. 按 **O** 键
|
||
2. 按住 Shift 画一个小圆
|
||
3. 尺寸：**W: 48, H: 48**
|
||
4. 位置：**X: 445, Y: 465**
|
||
5. 填充颜色：**5B6D6D**（灰色）
|
||
6. 不透明度：**70%**
|
||
|
||
### 5.2 绘制右眼
|
||
1. 按 **Ctrl/Cmd + D** 复制左眼
|
||
2. 拖动到右边对称位置
|
||
3. 或直接设置 **X: 530**
|
||
|
||
### 5.3 绘制微笑
|
||
1. 按 **P** 键（钢笔工具）
|
||
2. 在左眼下方点一下（起点）
|
||
3. 在中间点一下，**向下拖动** 形成弧度
|
||
4. 在右眼下方点一下（终点）
|
||
5. 按 **Esc** 退出钢笔工具
|
||
|
||
### 5.4 调整微笑样式
|
||
1. 选中刚画的曲线
|
||
2. 删除 **Fill**（填充）
|
||
3. 添加 **Stroke**（描边）：
|
||
- 颜色：**5B6D6D**
|
||
- 粗细：**24**
|
||
- 不透明度：**70%**
|
||
4. 找到 **Cap** 选项，选择 **Round**（圆角）
|
||
|
||
**💡 提示**：如果微笑弧度不满意，可以用 **A** 键（选择工具）拖动中间的点调整
|
||
|
||
**✅ 检查点**：应该看到一个温柔的笑脸
|
||
|
||
---
|
||
|
||
## 🎯 第六步：添加中心点（2分钟）
|
||
|
||
### 6.1 绘制中心圆点
|
||
1. 按 **O** 键
|
||
2. 按住 Shift 画圆
|
||
3. 尺寸：**W: 160, H: 160**
|
||
4. 居中对齐
|
||
5. 填充颜色：**A7C4BC**（主色）
|
||
6. 不透明度：**30%**
|
||
|
||
**✅ 检查点**：中心有一个淡淡的圆点
|
||
|
||
---
|
||
|
||
## 🎨 第七步：整体优化（3分钟）
|
||
|
||
### 7.1 添加阴影（可选）
|
||
1. 选中内圆（大白圆）
|
||
2. 右侧找到 **"Effects"**
|
||
3. 点击 **+** 号
|
||
4. 选择 **"Drop Shadow"**（投影）
|
||
5. 设置：
|
||
- **X**: 0
|
||
- **Y**: 4
|
||
- **Blur**: 20
|
||
- **Color**: 黑色，透明度 10%
|
||
|
||
### 7.2 检查整体效果
|
||
1. 按 **Ctrl/Cmd + 0**（数字零）缩放到适合大小
|
||
2. 查看整体是否和谐
|
||
3. 确保所有元素都居中对齐
|
||
|
||
---
|
||
|
||
## 📤 第八步：导出图标（5分钟）
|
||
|
||
### 8.1 选择导出对象
|
||
1. 点击最外层的画框（FocusBuddy 图标）
|
||
2. 确保左侧图层面板中画框名称高亮
|
||
|
||
### 8.2 设置导出参数
|
||
1. 右侧滚动到最底部
|
||
2. 找到 **"Export"**（导出）区域
|
||
3. 点击 **+** 号
|
||
|
||
### 8.3 导出 PNG
|
||
1. 格式选择：**PNG**
|
||
2. 尺寸选择：**1x**（保持 1024×1024）
|
||
3. 点击 **"Export FocusBuddy 图标"** 按钮
|
||
4. 保存到电脑，文件名：**icon-1024.png**
|
||
|
||
**✅ 检查点**：你应该得到一个 1024×1024 的 PNG 文件
|
||
|
||
---
|
||
|
||
## 🔧 第九步：生成所有尺寸（5分钟）
|
||
|
||
### 9.1 使用在线工具
|
||
1. 打开浏览器，访问：**https://appicon.co**
|
||
2. 点击 **"Choose File"**
|
||
3. 上传刚才导出的 **icon-1024.png**
|
||
|
||
### 9.2 生成图标包
|
||
1. 等待上传完成（几秒钟）
|
||
2. 勾选 **iOS** 和 **Android**
|
||
3. 点击 **"Generate"**（生成）
|
||
|
||
### 9.3 下载
|
||
1. 点击 **"Download"** 按钮
|
||
2. 会下载一个 ZIP 文件
|
||
3. 解压到桌面
|
||
|
||
---
|
||
|
||
## 📱 第十步：安装到项目（10分钟）
|
||
|
||
### 10.1 iOS 图标安装
|
||
1. 打开项目文件夹：
|
||
```
|
||
f:\cursor-auto\focusBuddy\ios\Runner\Assets.xcassets\AppIcon.appiconset
|
||
```
|
||
|
||
2. 删除原有的图标文件
|
||
|
||
3. 从下载的 ZIP 中找到 **iOS** 文件夹
|
||
|
||
4. 复制所有图标文件到上面的文件夹
|
||
|
||
### 10.2 Android 图标安装
|
||
1. 打开项目文件夹：
|
||
```
|
||
f:\cursor-auto\focusBuddy\android\app\src\main\res
|
||
```
|
||
|
||
2. 你会看到多个文件夹：
|
||
- mipmap-mdpi
|
||
- mipmap-hdpi
|
||
- mipmap-xhdpi
|
||
- mipmap-xxhdpi
|
||
- mipmap-xxxhdpi
|
||
|
||
3. 从 ZIP 中的 **Android** 文件夹，找到对应尺寸的图标
|
||
|
||
4. 复制到对应文件夹，全部命名为：**ic_launcher.png**
|
||
|
||
### 10.3 测试
|
||
```bash
|
||
# 打开终端，运行：
|
||
flutter clean
|
||
flutter run -d edge
|
||
```
|
||
|
||
**✅ 检查点**：浏览器标签页应该显示新图标
|
||
|
||
---
|
||
|
||
## 🎯 快速参考表
|
||
|
||
### 常用快捷键
|
||
| 快捷键 | 功能 |
|
||
|--------|------|
|
||
| F | 创建画框 |
|
||
| R | 矩形工具 |
|
||
| O | 椭圆/圆形工具 |
|
||
| P | 钢笔工具 |
|
||
| V 或 A | 选择工具 |
|
||
| Ctrl/Cmd + D | 复制 |
|
||
| Ctrl/Cmd + 0 | 缩放到适合大小 |
|
||
| Shift + 拖动 | 保持等比例 |
|
||
|
||
### 元素尺寸速查
|
||
| 元素 | 宽度 | 高度 | 位置 |
|
||
|------|------|------|------|
|
||
| 画框 | 1024 | 1024 | - |
|
||
| 背景 | 1024 | 1024 | 0, 0 |
|
||
| 外圆环 | 800 | 800 | 居中 |
|
||
| 内圆 | 560 | 560 | 居中 |
|
||
| 眼睛 | 48 | 48 | 左眼 X:445, 右眼 X:530 |
|
||
| 中心点 | 160 | 160 | 居中 |
|
||
|
||
### 颜色速查
|
||
| 用途 | 颜色代码 | 说明 |
|
||
|------|----------|------|
|
||
| 渐变顶部 | #A7C4BC | 主色调 |
|
||
| 渐变底部 | #88C9A1 | 成功色 |
|
||
| 圆环/内圆 | #F8F6F2 | 背景色 |
|
||
| 笑脸 | #5B6D6D | 文字色 |
|
||
|
||
---
|
||
|
||
## ❓ 常见问题
|
||
|
||
### Q1: 渐变色看起来不对？
|
||
**A**: 确保渐变方向是竖直的，顶部浅色 (#A7C4BC)，底部深色 (#88C9A1)
|
||
|
||
### Q2: 圆形不居中怎么办？
|
||
**A**:
|
||
1. 选中圆形
|
||
2. 按住 Ctrl/Cmd，点击背景画框
|
||
3. 点击顶部的居中对齐按钮（两个都要点）
|
||
|
||
### Q3: 笑脸的弧度不满意？
|
||
**A**:
|
||
1. 用 **A** 键选择钢笔工具画的线
|
||
2. 拖动中间的点上下移动
|
||
3. 或者删除重画
|
||
|
||
### Q4: 颜色输入在哪里？
|
||
**A**:
|
||
1. 选中对象
|
||
2. 右侧 Fill 或 Stroke 区域
|
||
3. 点击颜色方块
|
||
4. 在 **HEX** 输入框输入颜色代码
|
||
|
||
### Q5: 导出的图片太小？
|
||
**A**:
|
||
1. 确保选中的是最外层的画框
|
||
2. 导出尺寸选择 **1x**
|
||
3. 不要选择 0.5x 或其他缩放
|
||
|
||
---
|
||
|
||
## 💡 设计技巧
|
||
|
||
### 技巧 1: 使用网格对齐
|
||
1. 按 **Ctrl/Cmd + '**（单引号）显示网格
|
||
2. 确保所有元素对齐到网格
|
||
|
||
### 技巧 2: 组合元素
|
||
1. 选中笑脸的所有元素（两个眼睛+嘴巴）
|
||
2. 按 **Ctrl/Cmd + G** 组合
|
||
3. 方便统一移动和调整
|
||
|
||
### 技巧 3: 保存备份
|
||
1. 按 **Ctrl/Cmd + S** 保存
|
||
2. Figma 会自动保存到云端
|
||
3. 下次可以直接打开继续编辑
|
||
|
||
### 技巧 4: 快速测试小尺寸
|
||
1. 选中画框
|
||
2. 按 **Ctrl/Cmd + D** 复制
|
||
3. 将复制的画框缩小到 48×48
|
||
4. 查看小尺寸效果
|
||
|
||
---
|
||
|
||
## 📝 完成清单
|
||
|
||
制作过程：
|
||
- [ ] 创建 1024×1024 画框
|
||
- [ ] 添加绿色渐变背景
|
||
- [ ] 绘制外圆环（800×800）
|
||
- [ ] 绘制内圆（560×560）
|
||
- [ ] 添加笑脸（可选）
|
||
- [ ] 添加中心点
|
||
- [ ] 导出 PNG 文件
|
||
|
||
生成和安装：
|
||
- [ ] 上传到 appicon.co
|
||
- [ ] 下载生成的图标包
|
||
- [ ] 安装 iOS 图标
|
||
- [ ] 安装 Android 图标
|
||
- [ ] 运行测试
|
||
|
||
---
|
||
|
||
## 🎉 完成效果
|
||
|
||
完成后你应该得到：
|
||
1. ✅ 一个温柔友善的图标
|
||
2. ✅ 符合 FocusBuddy 品牌色
|
||
3. ✅ 在小尺寸下依然清晰
|
||
4. ✅ iOS 和 Android 所有尺寸
|
||
|
||
---
|
||
|
||
## 📚 学习资源
|
||
|
||
如果遇到困难，可以看这些教程：
|
||
|
||
### 视频教程（搜索关键词）
|
||
- Bilibili: "Figma 入门教程"
|
||
- Bilibili: "如何用 Figma 设计 App 图标"
|
||
- YouTube: "Figma tutorial for beginners"
|
||
|
||
### 文字教程
|
||
- Figma 官方文档（有中文）: https://help.figma.com
|
||
- 设计导航网站搜索 "Figma 教程"
|
||
|
||
---
|
||
|
||
## ⏱️ 时间估算
|
||
|
||
| 步骤 | 时间 |
|
||
|------|------|
|
||
| 注册登录 Figma | 3 分钟 |
|
||
| 创建画布和背景 | 5 分钟 |
|
||
| 绘制圆环和圆形 | 9 分钟 |
|
||
| 添加笑脸 | 8 分钟（可选） |
|
||
| 整体优化 | 3 分钟 |
|
||
| 导出和生成 | 10 分钟 |
|
||
| 安装测试 | 10 分钟 |
|
||
| **总计** | **30-40 分钟** |
|
||
|
||
---
|
||
|
||
## 🚀 下一步
|
||
|
||
完成图标后：
|
||
1. 📸 准备应用商店截图（6张）
|
||
2. 🧪 在真机上测试
|
||
3. 📝 完善应用描述
|
||
4. 🚀 提交到应用商店
|
||
|
||
---
|
||
|
||
## 💬 需要帮助？
|
||
|
||
如果在设计过程中遇到问题：
|
||
|
||
1. **重新查看本教程** - 确保每一步都按顺序完成
|
||
2. **查看预览文件** - 打开 `icon-preview.html` 对比效果
|
||
3. **简化设计** - 可以不加笑脸，只保留圆环
|
||
4. **使用模板** - 搜索 "Figma app icon template" 找现成模板
|
||
|
||
---
|
||
|
||
**祝你设计顺利！** 🎨
|
||
|
||
你正在创作一个温暖、友善、支持性的图标，它完美代表了 FocusBuddy 的理念：一个温柔的专注伙伴，而不是严格的任务监工。
|
||
|
||
**加油！** 💪
|