chore: establish V1.1 recovery baseline
@@ -0,0 +1,113 @@
|
||||
# 丹阳公益婚恋平台 - 底部导航栏图标设计规范
|
||||
|
||||
## 概述
|
||||
|
||||
为小程序 5 个底部导航 Tab 设计的圆润线性风格图标,包含未选中(灰色)和选中(玫瑰红)两种状态,适配三种屏幕密度(1x/2x/3x)。
|
||||
|
||||
## 设计规范
|
||||
|
||||
| 属性 | 规范值 |
|
||||
|------|--------|
|
||||
| 图标尺寸 | 81 × 81 px (基础) |
|
||||
| 安全区域 | 56 × 56 px (边距 12px) |
|
||||
| 线宽 | 2px |
|
||||
| 圆角 | 端点圆角 + 转折圆角 |
|
||||
| 填充 | 无(纯线性) |
|
||||
|
||||
## 颜色规范
|
||||
|
||||
| 状态 | 颜色值 | 用途 |
|
||||
|------|--------|------|
|
||||
| 未选中 | `#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`):
|
||||
```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" }
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
After Width: | Height: | Size: 436 B |
|
After Width: | Height: | Size: 741 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 433 B |
|
After Width: | Height: | Size: 737 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 274 B |
|
After Width: | Height: | Size: 528 B |
|
After Width: | Height: | Size: 819 B |
|
After Width: | Height: | Size: 274 B |
|
After Width: | Height: | Size: 527 B |
|
After Width: | Height: | Size: 816 B |
|
After Width: | Height: | Size: 457 B |
|
After Width: | Height: | Size: 865 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 452 B |
|
After Width: | Height: | Size: 858 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 405 B |
|
After Width: | Height: | Size: 719 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 401 B |
|
After Width: | Height: | Size: 714 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 419 B |
|
After Width: | Height: | Size: 826 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 413 B |
|
After Width: | Height: | Size: 821 B |
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,12 @@
|
||||
<!-- 活动 - 日历图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="25" cy="18" r="5" stroke="#E96B6B" stroke-width="2"/>
|
||||
<circle cx="56" cy="18" r="5" stroke="#E96B6B" stroke-width="2"/>
|
||||
<rect x="12" y="26" width="57" height="40" rx="8" stroke="#E96B6B" stroke-width="2"/>
|
||||
<line x1="16" y1="36" x2="65" y2="36" stroke="#E96B6B" stroke-width="2"/>
|
||||
<circle cx="25" cy="46" r="3" fill="#E96B6B"/>
|
||||
<circle cx="40.5" cy="46" r="3" fill="#E96B6B"/>
|
||||
<circle cx="56" cy="46" r="3" fill="#E96B6B"/>
|
||||
<circle cx="33" cy="56" r="3" fill="#E96B6B"/>
|
||||
<circle cx="48" cy="56" r="3" fill="#E96B6B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 696 B |
@@ -0,0 +1,16 @@
|
||||
<!-- 活动 - 日历图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 挂环 -->
|
||||
<circle cx="25" cy="18" r="5" stroke="#999999" stroke-width="2"/>
|
||||
<circle cx="56" cy="18" r="5" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 日历主体 -->
|
||||
<rect x="12" y="26" width="57" height="40" rx="8" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 分隔线 -->
|
||||
<line x1="16" y1="36" x2="65" y2="36" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 日期点 -->
|
||||
<circle cx="25" cy="46" r="3" fill="#999999"/>
|
||||
<circle cx="40.5" cy="46" r="3" fill="#999999"/>
|
||||
<circle cx="56" cy="46" r="3" fill="#999999"/>
|
||||
<circle cx="33" cy="56" r="3" fill="#999999"/>
|
||||
<circle cx="48" cy="56" r="3" fill="#999999"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 765 B |
@@ -0,0 +1,5 @@
|
||||
<!-- 找对象 - 双心图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28 32C28 26 32 22 36 22C38 22 40 23 41 25C42 23 44 22 46 22C50 22 54 26 54 32C54 38 48 44 41 50C34 44 28 38 28 32Z" stroke="#E96B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M42 36C42 30 46 26 50 26C52 26 54 27 55 29C56 27 58 26 60 26C64 26 68 30 68 36C68 42 62 48 55 54C48 48 42 42 42 36Z" stroke="#E96B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 574 B |
@@ -0,0 +1,7 @@
|
||||
<!-- 找对象 - 双心图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 左心 -->
|
||||
<path d="M28 32C28 26 32 22 36 22C38 22 40 23 41 25C42 23 44 22 46 22C50 22 54 26 54 32C54 38 48 44 41 50C34 44 28 38 28 32Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 右心 -->
|
||||
<path d="M42 36C42 30 46 26 50 26C52 26 54 27 55 29C56 27 58 26 60 26C64 26 68 30 68 36C68 42 62 48 55 54C48 48 42 42 42 36Z" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 595 B |
@@ -0,0 +1,7 @@
|
||||
<!-- 首页 - 房子图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="58" y="18" width="8" height="14" rx="2" stroke="#E96B6B" stroke-width="2"/>
|
||||
<path d="M40.5 16L22 34H59L40.5 16Z" stroke="#E96B6B" stroke-width="2" stroke-linejoin="round"/>
|
||||
<rect x="24" y="34" width="33" height="22" rx="4" stroke="#E96B6B" stroke-width="2"/>
|
||||
<rect x="35" y="46" width="11" height="10" rx="2" stroke="#E96B6B" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 511 B |
@@ -0,0 +1,11 @@
|
||||
<!-- 首页 - 房子图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 烟囱 -->
|
||||
<rect x="58" y="18" width="8" height="14" rx="2" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 屋顶 -->
|
||||
<path d="M40.5 16L22 34H59L40.5 16Z" stroke="#999999" stroke-width="2" stroke-linejoin="round"/>
|
||||
<!-- 房屋主体 -->
|
||||
<rect x="24" y="34" width="33" height="22" rx="4" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 门 -->
|
||||
<rect x="35" y="46" width="11" height="10" rx="2" stroke="#999999" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 571 B |
@@ -0,0 +1,8 @@
|
||||
<!-- 消息 - 对话气泡图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="12" y="18" width="57" height="36" rx="10" stroke="#E96B6B" stroke-width="2"/>
|
||||
<path d="M22 54L16 64L28 54" stroke="#E96B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="20" y1="28" x2="61" y2="28" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="20" y1="36" x2="53" y2="36" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="20" y1="44" x2="45" y2="44" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 655 B |
@@ -0,0 +1,11 @@
|
||||
<!-- 消息 - 对话气泡图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 气泡主体 -->
|
||||
<rect x="12" y="18" width="57" height="36" rx="10" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 小三角 -->
|
||||
<path d="M22 54L16 64L28 54" stroke="#999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 文字线条 -->
|
||||
<line x1="20" y1="28" x2="61" y2="28" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="20" y1="36" x2="53" y2="36" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="20" y1="44" x2="45" y2="44" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 709 B |
@@ -0,0 +1,7 @@
|
||||
<!-- 我的 - 用户图标 (选中状态) -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="40.5" cy="28" r="14" stroke="#E96B6B" stroke-width="2"/>
|
||||
<path d="M22 62C22 50 30 44 40.5 44C51 44 59 50 59 62" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="22" y1="52" x2="22" y2="62" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="59" y1="52" x2="59" y2="62" stroke="#E96B6B" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 534 B |
@@ -0,0 +1,10 @@
|
||||
<!-- 我的 - 用户图标 -->
|
||||
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 头部 -->
|
||||
<circle cx="40.5" cy="28" r="14" stroke="#999999" stroke-width="2"/>
|
||||
<!-- 身体 -->
|
||||
<path d="M22 62C22 50 30 44 40.5 44C51 44 59 50 59 62" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<!-- 身体两侧 -->
|
||||
<line x1="22" y1="52" x2="22" y2="62" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="59" y1="52" x2="59" y2="62" stroke="#999999" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 579 B |