danyang-match/miniapp/assets/tabbar/DESIGN.md

# 丹阳公益婚恋平台 - 底部导航栏图标设计规范

## 概述

为小程序 5 个底部导航 Tab 设计的圆润线性风格图标，包含未选中（藏青蓝 `#47528C`）和选中（玫红 `#F4005A`）两种状态，适配三种屏幕密度（1x/2x/3x）。配色取自产品参考图，藏青蓝与导航栏品牌色（`#171D72`）同系、玫红作为高对比激活色。

> ⚠️ **改动本目录前必读 —— 图标整排变「破图」的头号原因**
>
> 微信开发者工具自 `1.05.2112301` 起默认开启**「过滤无依赖文件」**（`ignoreDevUnusedFiles`）。
> 它的依赖分析只看 **WXML/JS**，而 **tabBar 图标只在 `app.json` 里被引用**，
> 于是被判定为「无依赖文件」并从**开发包中剔除** → 模拟器/真机上 5 个图标**全部加载失败**，
> 表现为底部导航整排破图（而 WXML 引用的图片一切正常，极易误判为图片损坏）。
>
> 本目录的 `assets/tabbar/*.png` 是**全仓库唯一「只被 app.json 引用」的图片资源**，因此是唯一受害者。
>
> 处置：`project.config.json`（仓库根 + `miniapp/`）与本地 `project.private.config.json`
> 中 `setting.ignoreDevUnusedFiles` / `setting.ignoreUploadUnusedFiles` **必须为 `false`**。
> 已由守卫 `ui-tests/tabbar-icons.mjs` 强制校验，请勿改回 `true`。


## 设计规范

| 属性 | 规范值 |
|------|--------|
| 图标尺寸 | 81 × 81 px (基础) |
| 安全区域 | 53 × 53 px（最小边距 14px） |
| 线宽 | 4px（缩放到导航栏后约 1.3px） |
| 圆角 | 端点圆角 + 转折圆角 |
| 填充 | 默认态线性描边；选中态实心填充 + 白点/白线点缀 |

## 颜色规范

| 状态 | 颜色值 | 用途 |
|------|--------|------|
| 未选中 | `#47528C` | 默认状态图标（藏青蓝，与导航栏品牌色同系） |
| 选中 | `#F4005A` | 激活状态图标（玫红/品红，高对比） |
| 背景 | 透明 | PNG 支持 alpha，无需底色 |

## 图标清单

### 1. 首页 (home)
- **意象**: 家
- **元素**: 圆角屋顶 + 房屋主体 + 门洞（线条描边，选中态实心玫红）
- **文件**: `home.png` / `home-active.png`

### 2. 找对象 (discover)
- **意象**: 心动缘分
- **元素**: 单颗爱心轮廓（选中态实心玫红），呼应「找对象」主题
- **文件**: `discover.png` / `discover-active.png`

### 3. 消息 (message)
- **意象**: 真诚沟通
- **元素**: 圆角对话气泡 + 三个圆点（选中态气泡实心玫红、圆点为白）
- **文件**: `message.png` / `message-active.png`

### 4. 活动 (activity)
- **意象**: 公益相遇
- **元素**: 圆角日历主体 + 顶部双挂环 + 中央加号（选中态日历实心玫红、加号为白）
- **文件**: `activity.png` / `activity-active.png`

### 5. 我的 (mine)
- **意象**: 个人中心
- **元素**: 圆形头像 + 半身轮廓（选中态实心玫红）
- **文件**: `mine.png` / `mine-active.png`

## 导出尺寸

| 尺寸 | 像素 | 适用场景 |
|------|------|---------|
| 1x | 81 × 81 | 标准屏设备 |
| 2x | 162 × 162 | Retina 屏设备 |
| 3x | 243 × 243 | 超高清晰屏设备 |

文件名约定：`{icon-name}.png` / `{icon-name}-active.png` / `{icon-name}_2x.png` / `{icon-name}_3x.png`

## SVG 源文件

所有图标均提供可编辑的 SVG 版本，位于 `svg/` 目录：
- 可直接在 Figma 中导入编辑
- 可调整颜色、粗细、圆角等参数
- 颜色替换：将 `stroke="#47528C"` 改为 `fill="#F4005A" stroke="#F4005A"` 即可切换激活状态（选中态为实心填充 + 白色点缀）

## 文件位置

```
miniapp/assets/tabbar/
├── svg/                    # SVG 源文件（可编辑）
│   ├── home.svg / home-active.svg
│   ├── discover.svg / discover-active.svg
│   ├── message.svg / message-active.svg
│   ├── activity.svg / activity-active.svg
│   └── mine.svg / mine-active.svg
├── home.png / home-active.png
├── home_2x.png / home-active_2x.png
├── home_3x.png / home-active_3x.png
├── discover.png / discover-active.png
├── discover_2x.png / discover-active_2x.png
├── discover_3x.png / discover-active_3x.png
├── message.png / message-active.png
├── message_2x.png / message-active_2x.png
├── message_3x.png / message-active_3x.png
├── activity.png / activity-active.png
├── activity_2x.png / activity-active_2x.png
├── activity_3x.png / activity-active_3x.png
├── mine.png / mine-active.png
├── mine_2x.png / mine-active_2x.png
└── mine_3x.png / mine-active_3x.png
```

## 更新说明

小程序 TabBar 配置无需修改，文件名与原有配置保持一致。

原配置 (`app.json`)：
```json
{
  "tabBar": {
    "list": [
      { "pagePath": "pages/index/index", "iconPath": "assets/tabbar/home.png", "selectedIconPath": "assets/tabbar/home-active.png" },
      { "pagePath": "pages/discover/discover", "iconPath": "assets/tabbar/discover.png", "selectedIconPath": "assets/tabbar/discover-active.png" },
      { "pagePath": "pages/messages/messages", "iconPath": "assets/tabbar/message.png", "selectedIconPath": "assets/tabbar/message-active.png" },
      { "pagePath": "pages/activity/activity", "iconPath": "assets/tabbar/activity.png", "selectedIconPath": "assets/tabbar/activity-active.png" },
      { "pagePath": "pages/mine/mine", "iconPath": "assets/tabbar/mine.png", "selectedIconPath": "assets/tabbar/mine-active.png" }
    ]
  }
}
```