first commit

2025-11-22 18:17:35 +08:00
commit d427916c6a
169 changed files with 15241 additions and 0 deletions
--- a/FIGMA设计教程.md
+++ b/FIGMA设计教程.md
@@ -0,0 +1,506 @@
+# 🎨 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 的理念：一个温柔的专注伙伴，而不是严格的任务监工。
+
+**加油！** 💪