重构底部导航图标:照参考图重做形状与配色

- 5 个 Tab 图标形状改为参考图语言:房子(首页)/爱心(找对象)/对话气泡(消息)/日历加号(活动)/人物(我的)
- 配色改为参考图方案:默认态藏青蓝 #47528C、选中态玫红 #F4005A(与导航栏品牌色同系)
- 同步重生成 1x/2x/3x 共 30 张透明 RGBA PNG(Edge CDP 栅格化)
- app.json tabBar.color/selectedColor 对齐新配色
- 守卫 tabbar-icons.mjs 增加两态颜色与 app.json 一致性断言
- 静态预览复刻 tabBar 配色同步更新;DESIGN.md 同步
This commit is contained in:
WorkBuddy
2026-09-23 16:30:32 +08:00
parent 45e84722e1
commit 1ad9793ea2
45 changed files with 66 additions and 59 deletions
+14 -14
View File
@@ -2,7 +2,7 @@
## 概述
为小程序 5 个底部导航 Tab 设计的圆润线性风格图标,包含未选中(灰色)和选中(玫瑰红)两种状态,适配三种屏幕密度(1x/2x/3x)。
为小程序 5 个底部导航 Tab 设计的圆润线性风格图标,包含未选中(藏青蓝 `#47528C`)和选中(玫红 `#F4005A`)两种状态,适配三种屏幕密度(1x/2x/3x)。配色取自产品参考图,藏青蓝与导航栏品牌色(`#171D72`)同系、玫红作为高对比激活色。
> ⚠️ **改动本目录前必读 —— 图标整排变「破图」的头号原因**
>
@@ -26,41 +26,41 @@
| 安全区域 | 53 × 53 px(最小边距 14px) |
| 线宽 | 4px(缩放到导航栏后约 1.3px) |
| 圆角 | 端点圆角 + 转折圆角 |
| 填充 | 默认态线性;选中态填充核心爱心 |
| 填充 | 默认态线性描边;选中态实心填充 + 白点/白线点缀 |
## 颜色规范
| 状态 | 颜色值 | 用途 |
|------|--------|------|
| 未选中 | `#999999` | 默认状态图标 |
| 选中 | `#E96B6B` | 激活状态图标 |
| 背景 | `#FFFFFF` | 透明背景(PNG 支持 alpha) |
| 未选中 | `#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`
## 导出尺寸
@@ -78,7 +78,7 @@
所有图标均提供可编辑的 SVG 版本,位于 `svg/` 目录:
- 可直接在 Figma 中导入编辑
- 可调整颜色、粗细、圆角等参数
- 颜色替换:将 `stroke="#999999"` 改为 `stroke="#E96B6B"` 即可切换激活状态
- 颜色替换:将 `stroke="#47528C"` 改为 `fill="#F4005A" stroke="#F4005A"` 即可切换激活状态(选中态为实心填充 + 白色点缀)
## 文件位置