# 底部导航栏图标说明

## 图标要求

底部导航栏需要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](https://www.iconfont.cn/)
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. 在不同设备上测试显示效果