# 微信支付分合作品牌线上应用规范

> **文档版本**：2023-03-22 更新版  
> **适用场景**：先享后付类、免押类业务场景  
> **来源**：微信支付设计

---

## 目录

1. [品牌标语](#1-品牌标语)
2. [应用指南 - 基本说明](#2-应用指南---基本说明)
3. [商品展示页](#3-商品展示页)
4. [订单提交页](#4-订单提交页)
5. [订单完成页](#5-订单完成页)
6. [运营位](#6-运营位)
7. [活动落地页](#7-活动落地页)

---

## 1. 品牌标语

### 1.1 视觉设计规范

| 元素 | 规范要求 |
|------|----------|
| **Logo** | 可选用彩色或单色 logo；选择单色时 logo 与文字颜色一致 |
| **字体** | 苹方 Regular，字号不小于 22px（@2x） |
| **文字颜色** | 浅色背景：`#666666`；深色背景：`#000000` |
| **分割线** | 颜色与文字颜色相同，透明度 60%，长度与文字高度平齐 |
| **整体高度** | 不小于 30px；图形与文字的间距、比例固定 |

### 1.2 标准版本

| 版本类型 | 文案 | 说明 |
|----------|------|------|
| **标准版本** | 微信支付分 先X后付 | 无分数要求时使用 |
| **带分数要求版** | 微信支付分 550分及以上优享 | 有明确分数要求时使用 |

### 1.3 业务场景文案示例

| 业务类型 | 表单/按钮文案 |
|----------|---------------|
| 先享后付类 | 微信支付分 先住后付、微信支付分 先用后付、微信支付分 先吃后付 |
| 免押类 | 微信支付分 免押速住、微信支付分 免押骑行 |
| 带分数要求 | 微信支付分 XXX分及以上优享 |

---

## 2. 应用指南 - 基本说明

### 2.1 主要体验路径

```
开通前：商品展示页 → 开通流程 → 订单提交页 → 订单完成页 → 订单详情页
       ↓
       运营位 → 活动落地页
       ↓
       其他路径
```

### 2.2 各场景展现形式

| 体验场景 | 展现形式 |
|----------|----------|
| 商品展示页 | 标签（标题、结构） |
| 订单提交页 | 表单、按钮 |
| 订单完成页 | 弹窗、标签、表单 |
| 运营位 | 标题、按钮 |
| 活动落地页 | 标题、按钮 |

---

## 3. 商品展示页

> **定义**：商家小程序中的商品列表或商品详情页  
> **目的**：强调权益感知，驱动用户做出开通决策

### 3.1 标签设计规范

#### 标准样式

| 业务类型 | 标签文案 | 示例 |
|----------|----------|------|
| 先享后付类 | 微信支付分 先X后付 | 微信支付分 先吃后付、微信支付分 先住后付 |
| 免押类 | 微信支付分 免押XX | 微信支付分 免押速住、微信支付分 免押骑行 |

#### 不带 Logo 样式

适用于各种纯文字、不宜出现 logo 的标签场景

#### 极简样式

适用于页面标签过多、位置展示空间不足的情况

> **注意**：标签的颜色、大小、风格建议与支付分 logo 协调且不影响 logo 自身的识别性

---

## 4. 订单提交页

> **定义**：支付行为发生前的内容确认页面，也可理解为"进入支付流程的上一页"  
> **用户行为**：订单内容确认、支付方式选择

### 4.1 表单规范

#### 多行表单

表单需与微信支付分品牌标语结合展示

| 版本 | 文案示例 |
|------|----------|
| 带分数要求版 | 微信支付分 先用后付 + 550分及以上优享 |
| 业务解释版 | 微信支付分 先用后付 + 0元下单，确认收货后付款 |

#### 单行表单

| 业务类型 | 简化版文案 | 完整版文案 |
|----------|------------|------------|
| 先享后付类 | 微信支付分先X后付 | 微信支付分 先用后付（确认收货后付款） |
| 免押类 | 微信支付分免押XX | 微信支付分 免押租借 |

### 4.2 按钮规范

| 版本 | 按钮文案 |
|------|----------|
| 带分数要求版 | 微信支付分 XXX分及以上优享 |
| 不带分数要求版 | 微信支付分优享 |

| 业务类型 | 按钮文案示例 |
|----------|--------------|
| 先享后付类 | 先住后付、微信支付分优享、微信支付分 XXX分及以上优享 |
| 免押类 | 免押租借、微信支付分优享、微信支付分 XXX分及以上优享 |

> **注意**：按钮自身颜色、大小、风格不受规范约束，可根据具体页面 UI 风格而定

---

## 5. 订单完成页

> **定义**：支付行为发生后的内容确认页面  
> **用户行为**：等待支付过程、确认支付内容

### 5.1 标签规范（标准样式）

| 业务类型 | 标签文案 | 示例 |
|----------|----------|------|
| 先享后付类 | 微信支付分 \| 先X后付 | 微信支付分 先用后付、微信支付分 先住后付 |
| 免押类 | 微信支付分 \| 免押XX | 微信支付分 免押速住、微信支付分 免押骑行 |

> **注意**：标签的颜色、大小、风格可根据具体页面 UI 风格而定

### 5.2 下单中弹窗规范

**适用场景**：App 端使用免确认模式下单时

| 元素 | 规范要求 |
|------|----------|
| **弹窗尺寸** | 150px × 150px |
| **背景颜色** | `#111111` 或 `rgba(17,17,17,0.7)` |
| **文字颜色** | `#FFFFFF` |

---

## 6. 运营位

> **定义**：先享后付类、免押类业务相关的宣传广告位，通常为活动落地页的入口  
> **目的**：着重福利展现，具备操作引导

### 6.1 标题规范

| 业务类型 | 标题结构 | 示例 |
|----------|----------|------|
| 先享后付类 | 主标题（商家配置）+ 副标题「微信支付分先X后付」 | 机舱购物轻松享 + 微信支付分先享后付 |
| 免押类 | 主标题（商家配置）+ 副标题「微信支付分免押XX」 | 你要的汉服都在这里 + 微信支付分免押租借 |

### 6.2 引导按钮规范

| 业务类型 | 按钮文案 | 说明 |
|----------|----------|------|
| 先享后付类 | 立即参与、立即使用 | 「立即XX」格式 |
| 免押类 | 立即租借、立即申请 | 「立即XX」格式 |

> **注意**：微信支付分 logo 需在文案前展示

---

## 7. 活动落地页

> **定义**：先享后付类、免押类业务的核心介绍页  
> **目的**：强化福利信息，简化信息层级降低理解成本，强化操作引导

### 展现形式

- **标题**：概括活动基本内容
- **按钮**：引导用户进行下一步操作

> 具体文案规范参照运营位标题、按钮规范执行

---

## 附录：错误示例提醒

### 品牌标语错误用法

❌ 禁止出现各类不规范使用情况，请严格按照视觉设计规范执行

### 正确用法要点

1. **Logo 使用**：确保展示清晰，可选用彩色或单色
2. **字体规范**：苹方 Regular，字号不小于 22px
3. **颜色规范**：根据背景颜色选择对应文字颜色
4. **比例规范**：图形与文字间距、比例固定，整体高度不小于 30px
5. **文案规范**：严格使用标准版本或带分数要求版，不得随意更改

---

*本文档根据微信支付官方《微信支付分合作品牌线上应用规范》整理，仅供学习和参考使用。*