Mini_Program/static/tabbar/图标说明.md

底部导航栏图标说明

图标要求

底部导航栏需要8个图标文件（每个tab需要2个：未选中和选中状态），请放置在 static/tabbar/ 目录下。

图标规格

• 格式: PNG
• 尺寸: 81x81px（推荐）或 81x81 的倍数
• 背景: 透明背景
• 颜色:
  • 未选中状态：灰色 (#999999)
  • 选中状态：蓝色 (#4FC3F7)

图标文件列表

1. 电子书 (Book)

• 未选中: book.png - 书籍图标（灰色）
• 选中: book-active.png - 书籍图标（蓝色）

设计建议:

• 使用打开的书本图标
• 线条简洁，现代风格
• 未选中时使用灰色，选中时使用主题蓝色

2. 听书 (Listen)

• 未选中: listen.png - 耳机/音频图标（灰色）
• 选中: listen-active.png - 耳机/音频图标（蓝色）

设计建议:

• 使用耳机或音频波形图标
• 体现"听"的概念
• 线条流畅，符合音频主题

3. 书架 (Bookshelf)

• 未选中: bookshelf.png - 书架图标（灰色）
• 选中: bookshelf-active.png - 书架图标（蓝色）

设计建议:

• 使用书架或书堆图标
• 体现收藏、整理的概念
• 简洁的线条设计

4. 我的 (Profile)

• 未选中: profile.png - 用户头像图标（灰色）
• 选中: profile-active.png - 用户头像图标（蓝色）

设计建议:

• 使用圆形头像轮廓图标
• 或使用用户/个人图标
• 简洁的人形轮廓设计

图标设计参考

风格统一性

• 所有图标应保持相同的设计风格
• 线条粗细一致
• 圆角或尖角风格统一
• 视觉重量平衡

颜色规范

• 未选中: #999999 (灰色)
• 选中: #4FC3F7 (主题蓝色)

图标设计工具推荐

1. 在线工具:

   • IconFont (阿里巴巴图标库)
   • Flaticon
   • Icons8

2. 设计软件:

   • Figma
   • Sketch
   • Adobe Illustrator

快速生成图标方法

方法一：使用在线图标库

1. 访问 IconFont
2. 搜索关键词：
   • 电子书：搜索 "book"、"书籍"
   • 听书：搜索 "headphone"、"耳机"、"audio"
   • 书架：搜索 "bookshelf"、"书架"
   • 我的：搜索 "user"、"profile"、"用户"
3. 下载PNG格式，尺寸选择81x81
4. 使用图片编辑工具调整颜色

方法二：使用图标字体

1. 下载图标字体文件
2. 转换为PNG格式
3. 调整颜色和尺寸

方法三：使用AI生成

1. 使用Midjourney、DALL-E等AI工具生成图标
2. 导出为PNG格式
3. 调整尺寸和颜色

文件结构

books/
└── static/
    └── tabbar/
        ├── book.png
        ├── book-active.png
        ├── listen.png
        ├── listen-active.png
        ├── bookshelf.png
        ├── bookshelf-active.png
        ├── profile.png
        └── profile-active.png

注意事项

1. 文件命名: 必须严格按照上述文件名命名
2. 文件路径: 图标文件必须放在 static/tabbar/ 目录下
3. 图标尺寸: 建议使用81x81px，确保在不同设备上显示清晰
4. 背景透明: 图标背景必须是透明的
5. 颜色一致: 确保选中和未选中状态的颜色与配置一致

测试

配置完成后，请：

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