# APP视觉设计规范文档
> 文档版本：V1.0
> 参考产品：倍进AI写作助手、趣露营APP
> 适用平台：移动端App / 小程序
> 底层栅格：**8pt网格系统**，所有尺寸优先使用8的倍数

## 1. 色彩系统
### 1.1 主色
|产品|色值|用途说明|
|---|---|---|
|倍进AI写作助手（工具向）|`#6366F1`|主按钮、选中态、导航高亮、重点图标|
|趣露营APP（户外社交向）|`#76D247`|品牌标题、主行动按钮、标签强调色|

### 1.2 辅助色
#### 倍进AI写作助手
|色彩|色值|使用场景|
|---|---|---|
|浅紫辅助|`#C8B8F8`|卡片浅背景、模块底色|
|浅蓝辅助|`#D7E8FF`|功能模块容器背景|
|警示强调橙|`#FF7D33`|NEW角标、提示标签、运营提示|

#### 趣露营APP
|色彩|色值|使用场景|
|---|---|---|
|活力橙|`#FF8A29`|次级按钮、运营标签、活动强调|
|青蓝色|`#32C5FF`|3D装饰元素、次要图标点缀|
|深色板块|`#121214`|深色内容区块背景|

### 1.3 中性色（全局通用）
|层级|色值|应用场景|
|---|---|---|
|页面背景|`#FFFFFF`|浅色模式页面底色|
|深色块背景|`#171717`|深色板块容器|
|一级标题文字|`#111111`|页面大标题、模块标题|
|二级正文文字|`#444444`|卡片标题、列表正文|
|辅助说明文字|`#86868B`|描述文案、备注信息|
|失效占位文字|`#C7C7CC`|占位符、不可点击文本|
|分割线|`#E8E8ED`|模块分割、卡片内分割|

## 2. 字体规范
> 默认字体：PingFang SC（苹方），字体单位pt
|文本层级|字号|字重|行高|使用场景|
|---|---|---|---|---|
|页面大标题|24pt|Semibold 600|1.2|页面顶部标题、板块大标题|
|模块标题|20pt|Medium 500|1.2|功能分区标题，如「精选功能」「营地预订」|
|卡片标题|17‑18pt|Medium 500|1.3|功能入口名称、卡片标题|
|正文内容|15‑16pt|Regular 400|1.4‑1.5|功能描述、列表正文|
|辅助小字|12‑13pt|Regular 400|1.3|简介、时间、备注说明|
|角标标签文字|11pt|Medium 500|1.2|NEW标签、tag标签文字|

## 3. 圆角规范
|组件对象|圆角半径|说明|
|---|---|---|
|页面大模块容器|24px|首页整块功能容器、板块外框|
|功能入口卡片/Feed流卡片|18px|网格入口卡片、帖子内容卡片|
|按钮（主/次按钮）|12‑14px|操作按钮、预订、开始定制等按钮|
|标签Tag、角标|8px|NEW标签、话题标签、分类标签|
|搜索框 / 表单输入框|12px|顶部搜索栏、表单输入组件|
|头像/小图标容器|10px|用户头像、客服头像、小图标外框|
|弹窗浮层|24‑28px|弹窗、预约成功提示弹窗|

## 4. 间距规范（8pt栅格）
### 页面边距
- 页面左右安全边距：`16px`（页面内容不贴屏幕边缘）

### 模块间距
- 大模块之间间距：`24px`（不同功能板块上下距离）
- 卡片与卡片间距：`16px`（网格布局卡片间隙）
- 卡片内部内边距：`16‑20px`（卡片边框距离内部内容）
- 标题到下方内容间距：`12px`
- 段落内部文字间距：`8px`

### 组件内部间距
1. 功能入口卡片padding：上下`20px`，左右`16px`
2. Feed帖子卡片padding：`12px`
3. 按钮内边距：垂直`12px`，水平`24px`
4. 底部Tab导航栏高度：`56px`；图标与下方文字间距`4px`

## 5. 通用组件规范
### 5.1 按钮
1. **主按钮**
- 样式：主色填充 + 白色文字
- 圆角：14px
- 最小点击高度：48px
- 内边距：上下12px，左右24px

2. **次要按钮**
- 样式：白色底色 + 描边，主色文字
- 圆角：14px

3. **标签小Tag**
- 高度：28px，圆角8px，字号11‑12pt

### 5.2 卡片
- 背景：白色底色
- 阴影：`0px 2px 12px rgba(0,0,0,0.06)`，使用轻柔和阴影，禁止过重投影

### 5.3 图标
- 普通功能图标尺寸：`24px`
- 首页大入口图标尺寸：`48‑56px`
- 风格区分：
  - AI工具类：2D扁平渐变图标
  - 户外社交类：3D卡通膨胀风格图标

### 5.4 弹窗&浮层
- 弹窗圆角24‑28px，弹窗距离屏幕边缘16px
- Toast轻提示圆角：12px

## 6. 布局规则
1. 全局统一使用**8pt栅格系统**，所有间距、尺寸取8的整数倍数。
2. 首页通用布局流：顶部Banner区 → 核心功能网格入口 → 多组业务模块 → 底部Tab导航。
3. 双列网格布局：卡片间距16px，页面左右边距各16px。
4. 文字层级严格遵循：大标题>模块标题>卡片标题>正文>辅助小字，字号与颜色逐级弱化。

## 7. 产品风格差异化说明
### 倍进AI写作助手（效率工具）
- 视觉调性：简约、科技感，2D轻渐变
- 卡片大量使用浅底色区分功能分区
- 视觉重点突出功能入口名称，辅助描述文字缩小弱化

### 趣露营APP（户外社交）
- 视觉调性：活泼趣味，大量3D膨胀插画元素
- 支持深色板块分区，运营属性强
- Feed内容流占比高，强化签到、话题、营地预订等运营组件