# FocusBuddy 图标设计教程 - Figma 完整指南

> **设计目标**: 制作"温柔专注伙伴"图标 (Design 1: Gentle Focus Buddy)
> **工具**: Figma (免费版即可)
> **时间**: 约 30-45 分钟
> **难度**: ⭐⭐☆☆☆ (适合初学者)

---

## 📋 准备工作

### 1. 注册 Figma 账号
1. 访问 [figma.com](https://www.figma.com)
2. 点击右上角 **"Sign up"** 注册免费账号
3. 可以使用 Google 账号快速登录

### 2. 创建新文件
1. 登录后点击左上角 **"+ New design file"**
2. 等待加载完成,进入空白画布

---

## 🎨 第一步: 创建画布和背景

### 1.1 创建 1024×1024 画布

1. **创建 Frame (画布框架)**
   - 按键盘 `F` 键 (或点击顶部工具栏的方框图标)
   - 在右侧面板找到 **"Frame"** 区域
   - 在 **"W"** (宽度) 输入 `1024`
   - 在 **"H"** (高度) 输入 `1024`
   - 在画布上点击创建

2. **重命名 Frame**
   - 双击左侧图层面板的 "Frame 1"
   - 重命名为 `FocusBuddy Icon`

### 1.2 添加圆角矩形背景

1. **创建背景矩形**
   - 按键盘 `R` 键选择矩形工具
   - 在 Frame 内点击并拖动,创建一个完全覆盖 Frame 的矩形
   - 在右侧面板确保尺寸是:
     - **W**: `1024`
     - **H**: `1024`
     - **X**: `0`
     - **Y**: `0`

2. **添加圆角**
   - 选中矩形
   - 在右侧找到 **"Corner radius"** (圆角半径)
   - 输入 `180`

3. **添加渐变色**
   - 选中矩形
   - 在右侧 **"Fill"** 区域,点击颜色方块
   - 点击 **"Solid"** 下拉菜单,选择 **"Linear"** (线性渐变)
   - 调整渐变:
     - **顶部颜色** (第一个色标): `#A7C4BC`
     - **底部颜色** (第二个色标): `#88C9A1`
   - 确保渐变方向是从上到下 (拖动渐变线可调整)

4. **重命名图层**
   - 在左侧图层面板,双击矩形图层
   - 重命名为 `Background`

---

## 🔵 第二步: 创建外圆环

### 2.1 绘制外圆环

1. **创建圆形**
   - 按键盘 `O` 键 (或点击工具栏椭圆工具)
   - 按住 `Shift` 键,在画布中心拖动创建正圆
   - 在右侧面板设置:
     - **W**: `800` (半径 400 × 2)
     - **H**: `800`
   - 按 `Option/Alt + H` 水平居中
   - 按 `Option/Alt + V` 垂直居中

2. **设置为描边样式**
   - 选中圆形
   - 点击右侧 **"Fill"** 右边的 `-` 号删除填充
   - 点击 **"Stroke"** 旁边的 `+` 号添加描边
   - 点击描边颜色,输入 `#F8F6F2`
   - 设置描边粗细:
     - 在 **"Stroke"** 下方输入 `60`
   - 设置透明度:
     - 在右侧顶部找到 **"Layer"** 区域
     - **"Opacity"** (不透明度) 调整为 `90%`

3. **重命名图层**
   - 重命名为 `Outer Ring`

---

## ⚪ 第三步: 创建内圆

### 3.1 绘制内圆

1. **创建圆形**
   - 按键盘 `O` 键
   - 按住 `Shift` 创建正圆
   - 设置尺寸:
     - **W**: `560` (半径 280 × 2)
     - **H**: `560`
   - 居中对齐: `Option/Alt + H` 和 `Option/Alt + V`

2. **设置填充色**
   - 选中圆形
   - **"Fill"**: `#F8F6F2`
   - **"Opacity"**: `95%`

3. **重命名图层**
   - 重命名为 `Inner Circle`

---

## 😊 第四步: 绘制友好的笑脸

### 4.1 绘制左眼

1. **创建圆形**
   - 按 `O` 键创建圆形
   - 设置尺寸:
     - **W**: `48` (半径 24 × 2)
     - **H**: `48`
   - 设置位置 (相对于整个 Frame):
     - **X**: `428` (中心点 452 - 半径 24)
     - **Y**: `456` (中心点 480 - 半径 24)

2. **设置颜色**
   - **"Fill"**: `#5B6D6D`
   - **"Opacity"**: `70%`

3. **重命名**: `Left Eye`

### 4.2 绘制右眼

1. **复制左眼**
   - 选中左眼
   - 按 `Cmd/Ctrl + D` 复制
   - 设置新位置:
     - **X**: `548` (中心点 572 - 半径 24)
     - **Y**: 保持 `456`

2. **重命名**: `Right Eye`

### 4.3 绘制微笑曲线

1. **使用钢笔工具**
   - 按键盘 `P` 键 (钢笔工具)
   - 在画布上点击三个点创建曲线:
     - **起点**: X: `432`, Y: `560`
     - **中间控制点**: X: `512`, Y: `600`
     - **终点**: X: `592`, Y: `560`

2. **调整为平滑曲线**
   - 选中钢笔工具创建的路径
   - 按键盘 `Enter` 键进入编辑模式
   - 选中中间的点,在顶部工具栏点击 **"Bend tool"** (弯曲工具)
   - 向下拖动中间点,创建向下的弧形

   **提示**: 如果钢笔工具太复杂,可以使用简化方法:
   - 创建椭圆 (W: `160`, H: `80`)
   - 位置: X: `432`, Y: `560`
   - 选中椭圆,按 `Enter` 进入编辑模式
   - 选中顶部两个点并删除 (保留底部半圆)
   - 旋转 180° 形成微笑

3. **设置描边样式**
   - 删除填充 (点击 Fill 的 `-`)
   - 添加描边 (点击 Stroke 的 `+`)
   - **"Stroke"** 颜色: `#5B6D6D`
   - **"Stroke"** 粗细: `16`
   - **"Opacity"**: `70%`
   - 在描边选项中,选择 **"Round cap"** (圆形端点)

4. **重命名**: `Smile`

---

## 🎯 第五步: 添加中心点 (可选装饰)

### 5.1 绘制中心圆点

1. **创建小圆**
   - 按 `O` 键
   - 创建圆形:
     - **W**: `80` (半径 40 × 2)
     - **H**: `80`
   - 居中对齐

2. **设置颜色**
   - **"Fill"**: `#A7C4BC`
   - **"Opacity"**: `30%`

3. **重命名**: `Center Dot`

---

## 📐 第六步: 整理图层结构

### 6.1 调整图层顺序

在左侧图层面板,从上到下的顺序应该是:
```
FocusBuddy Icon (Frame)
  ├── Center Dot
  ├── Smile
  ├── Right Eye
  ├── Left Eye
  ├── Inner Circle
  ├── Outer Ring
  └── Background
```

如果顺序不对,拖动图层调整位置。

### 6.2 创建图层分组 (可选)

1. **选中所有脸部元素**
   - 按住 `Shift` 点击: Left Eye, Right Eye, Smile
   - 右键点击,选择 **"Group selection"**
   - 重命名为 `Face`

---

## 💾 第七步: 导出图标

### 7.1 导出 1024×1024 PNG

1. **选中整个 Frame**
   - 点击左侧图层面板的 `FocusBuddy Icon`

2. **设置导出选项**
   - 在右侧底部找到 **"Export"** 区域
   - 点击 `+` 号添加导出设置
   - 格式选择 **"PNG"**
   - 倍数选择 **"1x"**
   - 点击 **"Export FocusBuddy Icon"** 按钮
   - 选择保存位置,保存为 `focusbuddy-icon-1024.png`

### 7.2 生成所有尺寸

1. **访问 AppIcon.co**
   - 打开浏览器访问 [https://www.appicon.co](https://www.appicon.co)

2. **上传图标**
   - 点击 **"Choose File"** 或拖动刚才导出的 PNG 文件
   - 等待处理完成

3. **下载图标包**
   - 点击 **"Download"** 按钮
   - 会下载包含 iOS 和 Android 所有尺寸的图标包

---

## 🎨 调整和优化技巧

### 微调笑脸表情

如果觉得笑容太大或太小:
- 选中 `Smile` 图层
- 调整起点和终点的 Y 坐标 (往上=笑容变小,往下=笑容变大)
- 或调整中间控制点的 Y 坐标 (往上=笑容变小,往下=笑容变大)

### 调整眼睛位置

如果觉得眼睛间距太宽或太窄:
- 选中两只眼睛
- 使用键盘方向键微调位置
- 或直接修改 X 坐标值

### 改变颜色主题

如果想尝试其他配色:
1. 选中 `Background`
2. 修改渐变颜色
3. 保持柔和的莫兰迪色系风格

---

## ✅ 检查清单

完成后,检查以下项目:

- [ ] Frame 尺寸是 1024×1024
- [ ] 背景圆角半径是 180
- [ ] 背景渐变从 #A7C4BC 到 #88C9A1
- [ ] 外圆环描边粗细 60,颜色 #F8F6F2,透明度 90%
- [ ] 内圆填充 #F8F6F2,透明度 95%
- [ ] 两只眼睛大小相同,对称分布
- [ ] 微笑曲线居中,端点圆润
- [ ] 导出的 PNG 文件清晰无锯齿

---

## 🚀 下一步

1. **应用到 Flutter 项目**
   - 解压 AppIcon.co 下载的文件
   - iOS: 将 `AppIcon.appiconset` 文件夹放到 `ios/Runner/Assets.xcassets/`
   - Android: 将对应尺寸的图标放到 `android/app/src/main/res/` 各个 `mipmap-*` 文件夹

2. **测试效果**
   - 在真机或模拟器上运行应用
   - 检查桌面图标显示效果

---

## 🆘 常见问题

### Q: 钢笔工具太难用怎么办?
**A**: 使用椭圆工具替代:
1. 创建椭圆 W: 160, H: 80
2. 按 Enter 进入编辑模式
3. 删除顶部两个锚点
4. 保留底部弧线即可

### Q: 图层无法居中?
**A**: 确保选中了 Frame 内的图层,然后:
- Mac: `Option + H` (水平居中), `Option + V` (垂直居中)
- Windows: `Alt + H`, `Alt + V`
- 或使用右侧 **"Alignment"** 对齐工具

### Q: 导出的图标边缘有白边?
**A**: 确保 Background 图层完全覆盖了 Frame,且没有透明间隙。

### Q: 颜色看起来不够柔和?
**A**: 检查所有元素的不透明度 (Opacity) 设置,适当降低可以让设计更柔和。

---

## 📚 扩展学习

### Figma 快捷键

| 功能 | Mac | Windows |
|------|-----|---------|
| 矩形 | R | R |
| 圆形 | O | O |
| 钢笔 | P | P |
| Frame | F | F |
| 复制 | Cmd + D | Ctrl + D |
| 水平居中 | Option + H | Alt + H |
| 垂直居中 | Option + V | Alt + V |
| 缩放视图 | Cmd + 滚轮 | Ctrl + 滚轮 |

### 推荐资源

- [Figma 官方教程](https://help.figma.com/hc/en-us/categories/360002051613-Get-started) (中文)
- [Figma 中文社区](https://www.figma.cool/)
- [YouTube: Figma 入门教程](https://www.youtube.com/results?search_query=figma+tutorial+chinese)

---

## 🎉 完成!

恭喜您完成了 FocusBuddy 图标的设计!这个图标传达了:
- ✨ **温柔友好** - 柔和的颜色和圆润的形状
- 😊 **情感支持** - 友好的笑脸象征陪伴
- 🎯 **专注** - 同心圆代表专注的中心
- 🌿 **无压力** - 莫兰迪色系带来平静感

如果有任何问题,欢迎随时提问!

---

**文档版本**: 1.0
**最后更新**: 2025年11月24日
**作者**: FocusBuddy 开发团队