icon，权限

2025-11-24 18:36:55 +08:00
parent 57ef852863
commit 005ad8ddf2
137 changed files with 1597 additions and 167 deletions
--- a/FIGMA_ICON_TUTORIAL_CN.md
+++ b/FIGMA_ICON_TUTORIAL_CN.md
@@ -0,0 +1,373 @@
+# 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 开发团队