Головна сторінка Огляд Довідка
Реєстрація Увійти
xiaoyu
/
Mini_Program
1
0
Відгалуження 0
Файли Проблеми 0 Запити на злиття 0 Wiki
Дерево: 06d26027ff
Гілки Теги
Mini_Program
/
static
/
tabbar
/
图标快速生成指南.md

图标快速生成指南.md 5.2 KB
Історія Запис

底部导航栏图标快速生成指南

📋 需要的图标文件清单

请在 static/tabbar/ 目录下放置以下8个PNG图标文件：

功能 未选中图标 选中图标 推荐图标样式
电子书 book.png book-active.png 📖 打开的书本
听书 listen.png listen-active.png 🎧 耳机
书架 bookshelf.png bookshelf-active.png 📚 书架
我的 profile.png profile-active.png 👤 用户头像

🎨 图标设计规范

尺寸要求

  • 推荐尺寸: 81x81px
  • 最小尺寸: 54x54px
  • 最大尺寸: 81x81px
  • 格式: PNG（必须透明背景）

颜色规范

  • 未选中状态: #999999（灰色）
  • 选中状态: #4FC3F7（主题蓝色）

设计风格

  • 风格: 现代扁平化、线条简洁
  • 线条粗细: 2-3px
  • 圆角: 统一使用圆角或直角
  • 视觉平衡: 所有图标视觉重量保持一致

🚀 快速生成方法

方法一：使用阿里巴巴IconFont（推荐）

  1. 访问网站: https://www.iconfont.cn/

  2. 搜索图标:

    • 电子书：搜索 "book" 或 "书籍"
    • 听书：搜索 "headphone" 或 "耳机"
    • 书架：搜索 "bookshelf" 或 "书架"
    • 我的：搜索 "user" 或 "用户"

  3. 下载步骤:

    • 选择线条风格图标
    • 点击下载 → 选择PNG格式
    • 尺寸选择 81x81
    • 下载后重命名为对应文件名

  4. 颜色调整:

    • 使用 Photoshop 或在线工具调整颜色
    • 未选中：改为 #999999
    • 选中：改为 #4FC3F7

方法二：使用 Icons8

  1. 访问网站: https://icons8.com/

  2. 搜索图标:

    • 电子书：搜索 "book"
    • 听书：搜索 "headphone"
    • 书架：搜索 "bookshelf"
    • 我的：搜索 "user profile"

  3. 下载:

    • 选择"线条"或"填充"风格
    • 下载PNG格式，81x81尺寸
    • 调整颜色

方法三：使用 Figma 设计

  1. 创建图标:

    • 新建 81x81px 画布
    • 使用线条工具绘制图标
    • 保持风格统一

  2. 导出:

    • 选择图标 → 导出 → PNG
    • 确保背景透明

  3. 颜色设置:

    • 未选中：填充 #999999
    • 选中：填充 #4FC3F7

方法四：使用在线图标生成器

  1. 访问: https://www.flaticon.com/
  2. 搜索对应关键词
  3. 下载PNG格式
  4. 调整尺寸和颜色

🎯 图标设计参考

电子书图标 (book)

推荐样式：
- 打开的书本（两页展开）
- 书籍轮廓
- 文档图标

设计要点：
- 体现"阅读"概念
- 线条简洁流畅

听书图标 (listen)

推荐样式：
- 耳机图标
- 音频波形
- 播放按钮+音频

设计要点：
- 体现"听"的概念
- 动态感强

书架图标 (bookshelf)

推荐样式：
- 书架轮廓
- 书堆叠
- 文件夹+书籍

设计要点：
- 体现"收藏"概念
- 整齐有序

我的图标 (profile)

推荐样式：
- 圆形头像轮廓
- 人形轮廓
- 用户图标

设计要点：
- 体现"个人"概念
- 简洁友好

🛠️ 颜色调整工具

在线工具

  1. Photopea: https://www.photopea.com/（免费在线PS）
  2. Remove.bg: https://www.remove.bg/（去除背景）
  3. TinyPNG: https://tinypng.com/（压缩图片）

桌面工具

  • Photoshop: 专业图片编辑
  • GIMP: 免费开源图片编辑
  • Figma: 在线设计工具

颜色调整步骤（以Photopea为例）

  1. 打开图标文件
  2. 选择图标图层
  3. 图像 → 调整 → 色相/饱和度
  4. 调整色相和饱和度匹配目标颜色
  5. 或使用"颜色替换"工具
  6. 导出为PNG格式

✅ 检查清单

完成图标后，请检查：

  • 所有8个图标文件都已放置在 static/tabbar/ 目录
  • 文件名完全匹配（区分大小写）
  • 图标尺寸为 81x81px
  • 背景透明
  • 未选中图标颜色为 #999999
  • 选中图标颜色为 #4FC3F7
  • 所有图标风格统一
  • 图标清晰，无锯齿

📱 测试步骤

  1. 重新编译小程序
  2. 检查底部导航栏图标显示
  3. 测试点击切换效果
  4. 检查选中和未选中状态的颜色
  5. 在不同设备上测试显示效果

💡 设计建议

  1. 统一性: 所有图标使用相同的设计语言
  2. 识别性: 图标要清晰易懂，用户一眼就能识别
  3. 美观性: 线条流畅，比例协调
  4. 简洁性: 避免过于复杂的细节
  5. 一致性: 选中和未选中状态保持相同的图标形状，只改变颜色

🎨 推荐图标库

📝 注意事项

  1. 文件命名: 必须严格按照配置中的文件名，区分大小写
  2. 文件路径: 图标必须放在 static/tabbar/ 目录下
  3. 文件格式: 必须是PNG格式，不支持SVG
  4. 背景透明: 图标背景必须是透明的
  5. 尺寸一致: 所有图标尺寸应该一致
  6. 颜色准确: 确保颜色值与配置完全一致

完成图标准备后，重新编译小程序即可看到效果！