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

概述

为小程序 5 个底部导航 Tab 设计的圆润线性风格图标，包含未选中（灰色）和选中（玫瑰红）两种状态，适配三种屏幕密度（1x/2x/3x）。

设计规范

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

颜色规范

状态	颜色值	用途
未选中	`#999999`	默认状态图标
选中	`#E96B6B`	激活状态图标
背景	`#FFFFFF`	透明背景（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="#999999" 改为 stroke="#E96B6B" 即可切换激活状态

文件位置

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

3.9 KiB Raw Blame History Unescape Escape