Files

T

WorkBuddy 1ad9793ea2 重构底部导航图标：照参考图重做形状与配色

- 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 同步

2026-09-23 16:30:32 +08:00

5.4 KiB

Raw Blame History

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

概述

为小程序 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)：

{
  "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" }
    ]
  }
}

5.4 KiB Raw Blame History Unescape Escape