ytc/FocusBuddy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d427916c6a4785ddb0549206c5734d39d3893e2a
FocusBuddy/FIGMA设计教程.md
ytc1012 d427916c6a first commit
2025-11-22 18:17:35 +08:00

12 KiB
Raw Blame History

🎨 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 测试

# 打开终端，运行：
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 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 的理念：一个温柔的专注伙伴，而不是严格的任务监工。

加油！ 💪

Reference in New Issue View Git Blame Copy Permalink