TravelContentCreator/docs/POSTER_DESIGN_ASSETS.md

# 海报设计资产库

> 以小红书风格为参考  
> 创建日期: 2024-12-10

---

## 一、小红书风格分析

### 1.1 视觉特征

| 特征 | 小红书风格 | 设计启示 |
|-----|-----------|---------|
| **比例** | 3:4 或 4:5 竖版 | 移动端优先 |
| **图片占比** | 60-80% | 图大字少 |
| **色彩** | 明亮、高饱和 | 吸引眼球 |
| **字体** | 粗大、醒目 | 一眼抓住重点 |
| **排版** | 简洁、留白多 | 不拥挤 |
| **装饰** | 贴纸、emoji、手写 | 年轻活泼 |

### 1.2 常见布局类型

```
类型A: 大图+底部文字        类型B: 图片+顶部标题        类型C: 文字叠加图片
┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│                 │      │   [大标题]       │      │                 │
│    [大图]       │      │   [小标题]       │      │   [背景图]       │
│    70%         │      ├─────────────────┤      │                 │
│                 │      │                 │      │   ┌─────────┐   │
├─────────────────┤      │    [大图]       │      │   │ 标题    │   │
│  [标题]         │      │    65%         │      │   │ 副标题  │   │
│  [副标题]       │      │                 │      │   └─────────┘   │
│  [价格/标签]    │      │                 │      │                 │
└─────────────────┘      └─────────────────┘      └─────────────────┘

类型D: 左右分栏           类型E: 卡片式              类型F: 纯色+大字
┌────────┬────────┐      ┌─────────────────┐      ┌─────────────────┐
│        │        │      │  ╭───────────╮  │      │                 │
│ [图片] │[标题]  │      │  │           │  │      │    [大标题]     │
│  50%   │        │      │  │  [内容]   │  │      │                 │
│        │[价格]  │      │  │           │  │      │    [副标题]     │
│        │        │      │  ╰───────────╯  │      │                 │
│        │[详情]  │      │                 │      │    [装饰]       │
└────────┴────────┘      └─────────────────┘      └─────────────────┘
```

### 1.3 文字风格

| 元素 | 小红书常见做法 |
|-----|---------------|
| **标题** | 粗体、大号 (40-80px)、常用感叹号 |
| **副标题** | 手写体或细体、小号 (20-30px) |
| **价格** | 特大号、红色或对比色 |
| **标签** | 圆角背景色块、贴纸风格 |
| **emoji** | 大量使用、增加活泼感 |

---

## 二、布局骨架定义

### 2.1 基础布局 (5种)

```yaml
# config/design_assets/layouts.yaml

layouts:

  # A: 大图在上，文字在下 (最常用)
  hero_bottom:
    name: 大图底部文字
    suitable_for: [景点, 美食, 酒店]
    regions:
      image:
        position: [0, 0]
        size: [100%, 65%]
      content:
        position: [0, 60%]
        size: [100%, 40%]
        effect: gradient_overlay  # 渐变遮罩融合
    content_slots:
      - title: { align: center, margin_top: 5% }
      - subtitle: { align: center }
      - price: { align: center }
      - tags: { align: center, margin_bottom: 5% }

  # B: 文字叠加在图片上 (视觉冲击强)
  overlay_center:
    name: 居中叠加
    suitable_for: [景点, 活动, 攻略]
    regions:
      image:
        position: [0, 0]
        size: [100%, 100%]
        effect: darken_overlay  # 压暗便于看字
      content:
        position: [10%, 30%]
        size: [80%, 40%]
    content_slots:
      - title: { align: center, style: bold_shadow }
      - subtitle: { align: center }
      - tags: { align: center, position: bottom }

  # C: 文字叠加在底部 (小红书最爱)
  overlay_bottom:
    name: 底部叠加
    suitable_for: [美食, 探店, 穿搭]
    regions:
      image:
        position: [0, 0]
        size: [100%, 100%]
      content:
        position: [5%, 55%]
        size: [90%, 40%]
        effect: frosted_glass  # 毛玻璃
    content_slots:
      - title: { align: left, style: bold }
      - subtitle: { align: left }
      - price: { align: left }

  # D: 左右分栏 (信息量大)
  split_vertical:
    name: 左图右文
    suitable_for: [酒店, 民宿, 商品]
    regions:
      image:
        position: [0, 0]
        size: [50%, 100%]
      content:
        position: [50%, 0]
        size: [50%, 100%]
        background: solid_color
    content_slots:
      - title: { align: left, margin_top: 15% }
      - subtitle: { align: left }
      - features: { type: list }
      - price: { align: left, position: bottom }

  # E: 卡片式 (精致感)
  card_float:
    name: 悬浮卡片
    suitable_for: [酒店, 攻略, 清单]
    regions:
      image:
        position: [0, 0]
        size: [100%, 100%]
      content:
        position: [8%, 50%]
        size: [84%, 45%]
        style: card  # 圆角、阴影、白底
    content_slots:
      - title: { align: left }
      - subtitle: { align: left }
      - features: { type: list }
      - price: { align: right, position: bottom }
```

### 2.2 布局示意图

```
hero_bottom           overlay_center        overlay_bottom
┌─────────────┐      ┌─────────────┐      ┌─────────────┐
│             │      │             │      │             │
│   IMAGE     │      │   ┌─────┐   │      │   IMAGE     │
│   65%       │      │   │TEXT │   │      │             │
│             │      │   └─────┘   │      │ ┌─────────┐ │
├─────────────┤      │             │      │ │ TEXT    │ │
│   TEXT      │      │   IMAGE     │      │ │ glass   │ │
│   35%       │      │   100%      │      │ └─────────┘ │
└─────────────┘      └─────────────┘      └─────────────┘

split_vertical        card_float
┌──────┬──────┐      ┌─────────────┐
│      │      │      │             │
│IMAGE │ TEXT │      │   IMAGE     │
│ 50%  │      │      │  ╭───────╮  │
│      │      │      │  │ CARD  │  │
│      │      │      │  │       │  │
│      │      │      │  ╰───────╯  │
└──────┴──────┘      └─────────────┘
```

---

## 三、配色方案定义

### 3.1 小红书常见配色 (10种)

```yaml
# config/design_assets/colors.yaml

color_schemes:

  # === 清新系 ===
  
  mint_fresh:
    name: 薄荷清新
    mood: 清新、自然、放松
    suitable_for: [民宿, 咖啡, 文艺景点]
    colors:
      primary: "#4ECDC4"      # 薄荷绿
      secondary: "#A8E6CF"    # 浅绿
      accent: "#FF6B6B"       # 珊瑚红 (点缀)
      text_light: "#FFFFFF"
      text_dark: "#2C3E50"
    gradient: ["#4ECDC4", "#44A08D"]
    
  sky_blue:
    name: 天空蓝
    mood: 清爽、干净、舒适
    suitable_for: [海边, 游泳, 夏日活动]
    colors:
      primary: "#74B9FF"
      secondary: "#A29BFE"
      accent: "#FDCB6E"
      text_light: "#FFFFFF"
      text_dark: "#2D3436"
    gradient: ["#74B9FF", "#0984E3"]

  # === 温暖系 ===
  
  sunset_warm:
    name: 日落暖橙
    mood: 温暖、活力、热情
    suitable_for: [美食, 亲子, 户外活动]
    colors:
      primary: "#FF7675"
      secondary: "#FDCB6E"
      accent: "#FFFFFF"
      text_light: "#FFFFFF"
      text_dark: "#2D3436"
    gradient: ["#FF7675", "#F39C12"]
    
  peach_pink:
    name: 蜜桃粉
    mood: 甜美、少女、浪漫
    suitable_for: [下午茶, 甜品, 约会]
    colors:
      primary: "#FFB8B8"
      secondary: "#FFEAA7"
      accent: "#FF6B81"
      text_light: "#FFFFFF"
      text_dark: "#6C5B7B"
    gradient: ["#FFB8B8", "#FF9A9E"]

  # === 高级系 ===
  
  mocha_brown:
    name: 摩卡棕
    mood: 高级、复古、质感
    suitable_for: [咖啡, 酒店, 精品店]
    colors:
      primary: "#8B7355"
      secondary: "#D4A574"
      accent: "#F5E6D3"
      text_light: "#FFFFFF"
      text_dark: "#4A3728"
    gradient: ["#8B7355", "#5D4E37"]
    
  forest_green:
    name: 森林绿
    mood: 自然、治愈、高端
    suitable_for: [森林, 温泉, 度假村]
    colors:
      primary: "#2D5A27"
      secondary: "#68A357"
      accent: "#F4D03F"
      text_light: "#FFFFFF"
      text_dark: "#1E3A1E"
    gradient: ["#2D5A27", "#1D4D1D"]

  # === 活力系 ===
  
  electric_purple:
    name: 电光紫
    mood: 潮流、时尚、年轻
    suitable_for: [演出, 夜生活, 潮玩]
    colors:
      primary: "#A855F7"
      secondary: "#EC4899"
      accent: "#22D3EE"
      text_light: "#FFFFFF"
      text_dark: "#1E1B4B"
    gradient: ["#A855F7", "#6366F1"]
    
  ocean_blue:
    name: 深海蓝
    mood: 神秘、深邃、高端
    suitable_for: [海洋馆, 潜水, 游轮]
    colors:
      primary: "#1A5F7A"
      secondary: "#159895"
      accent: "#57C5B6"
      text_light: "#FFFFFF"
      text_dark: "#0A2647"
    gradient: ["#1A5F7A", "#0E4A5D"]

  # === 极简系 ===
  
  pure_white:
    name: 纯净白
    mood: 简约、干净、日系
    suitable_for: [民宿, 文艺空间, 极简设计]
    colors:
      primary: "#FFFFFF"
      secondary: "#F8F9FA"
      accent: "#212529"
      text_light: "#FFFFFF"
      text_dark: "#212529"
    gradient: ["#FFFFFF", "#E9ECEF"]
    
  ink_black:
    name: 水墨黑
    mood: 高端、神秘、质感
    suitable_for: [高端餐厅, 酒吧, 艺术展]
    colors:
      primary: "#1A1A2E"
      secondary: "#16213E"
      accent: "#E94560"
      text_light: "#FFFFFF"
      text_dark: "#0F0F1A"
    gradient: ["#1A1A2E", "#0F0F1A"]
```

### 3.2 配色速查表

| 配色 | 主色 | 适用场景 | 情绪 |
|-----|------|---------|------|
| 🌿 薄荷清新 | #4ECDC4 | 民宿、咖啡 | 清新放松 |
| 🌊 天空蓝 | #74B9FF | 海边、夏日 | 清爽干净 |
| 🌅 日落暖橙 | #FF7675 | 美食、亲子 | 温暖活力 |
| 🍑 蜜桃粉 | #FFB8B8 | 甜品、约会 | 甜美少女 |
| ☕ 摩卡棕 | #8B7355 | 咖啡、酒店 | 高级复古 |
| 🌲 森林绿 | #2D5A27 | 森林、度假 | 自然治愈 |
| 💜 电光紫 | #A855F7 | 演出、潮玩 | 潮流时尚 |
| 🐋 深海蓝 | #1A5F7A | 海洋馆 | 神秘深邃 |
| ⚪ 纯净白 | #FFFFFF | 民宿、极简 | 简约干净 |
| ⚫ 水墨黑 | #1A1A2E | 高端餐厅 | 高端神秘 |

---

## 四、字体组合定义

### 4.1 可用字体资源 (assets/font/)

| 字体文件 | 风格 | 推荐用途 |
|---------|------|---------|
| 兰亭特黑简 GBK.TTF | 粗黑、冲击力强 | 大标题 |
| 兰亭粗黑简.TTF | 粗黑、稳重 | 标题、价格 |
| 华康海报体简.ttc | 海报风、醒目 | 活动标题 |
| 华康方圆体W7-GB.TTC | 圆润、亲和 | 亲子主题 |
| 字体管家棉花糖.TTF | 可爱、软萌 | 甜品、少女风 |
| 腾祥麦黑简.TTF | 简洁、易读 | 正文、说明 |
| 邓玉二笔体.ttf | 手写、文艺 | 文艺风格 |
| 经典综艺体简.TTF | 综艺感、活泼 | 娱乐主题 |
| 方正粗倩_GBK.ttf | 优雅、女性 | 美妆、时尚 |
| SmileySans-Oblique.OTF | 斜体、现代 | 潮流风格 |

### 4.2 字体配对 (4种)

```yaml
# config/design_assets/fonts.yaml

font_pairs:

  # 活力现代 - 小红书最常见
  modern_bold:
    name: 活力现代
    mood: 年轻、活力、直接
    title: "兰亭特黑简 GBK.TTF"      # 粗黑标题
    subtitle: "腾祥麦黑简.TTF"        # 简洁副标题
    body: "腾祥麦黑简.TTF"

  # 可爱甜美 - 甜品/亲子
  cute_sweet:
    name: 可爱甜美
    mood: 可爱、甜美、温馨
    title: "字体管家棉花糖.TTF"       # 软萌标题
    subtitle: "华康方圆体W7-GB.TTC"   # 圆润副标题
    body: "腾祥麦黑简.TTF"

  # 文艺手写 - 文艺气质
  handwritten:
    name: 文艺手写
    mood: 文艺、随性、个性
    title: "邓玉二笔体.ttf"          # 手写标题
    subtitle: "腾祥麦黑简.TTF"
    body: "腾祥麦黑简.TTF"

  # 海报冲击 - 活动促销
  poster_impact:
    name: 海报冲击
    mood: 醒目、紧迫、促销
    title: "华康海报体简.ttc"         # 海报体
    subtitle: "兰亭粗黑简.TTF"
    body: "腾祥麦黑简.TTF"
```

### 4.3 字体层级规范

```yaml
typography_scale:

  # 标题 - 最大、最醒目
  hero_title:
    size_range: [80, 150]      # 根据文字长度自适应
    weight: bold
    line_height: 1.1
    effects: [shadow, outline]  # 可选效果
    
  # 副标题
  subtitle:
    size_range: [30, 50]
    weight: regular
    line_height: 1.3
    
  # 价格 - 突出
  price:
    size_range: [60, 120]
    weight: bold
    color: accent              # 使用强调色
    
  # 正文
  body:
    size: 24
    weight: light
    line_height: 1.6
    
  # 标签
  tag:
    size: 18
    weight: medium
    padding: [12, 8]
    background: accent
    border_radius: 20
```

---

## 五、装饰元素定义

### 5.1 小红书风格装饰

```yaml
# config/design_assets/decorations.yaml

decorations:

  # 无装饰 - 简洁风格
  none:
    elements: []

  # 标题下划线
  title_underline:
    type: line
    position: below_title
    width: 40%
    thickness: 3
    style: solid
    color: accent

  # 渐变遮罩 (底部渐变)
  gradient_overlay:
    type: gradient
    position: bottom
    height: 50%
    direction: bottom_up
    opacity: [0, 0.8]
    color: from_image  # 从图片取色

  # 毛玻璃效果
  frosted_glass:
    type: blur
    blur_radius: 20
    opacity: 0.85
    tint: from_image

  # 角标/徽章
  corner_badge:
    type: badge
    position: top_right
    offset: [15, 15]
    style: ribbon  # ribbon | circle | tag
    text: "HOT"
    background: "#FF6B6B"

  # 圆形标签
  circle_tag:
    type: badge
    position: top_left
    style: circle
    size: 60
    text: "必去"

  # 价格标签
  price_tag:
    type: tag
    position: bottom_right
    style: flag
    background: "#FF4757"

  # emoji 装饰
  emoji_scatter:
    type: emoji
    items: ["✨", "🔥", "💕"]
    position: random
    count: 3
    size: 30

  # 卡片阴影
  card_shadow:
    type: shadow
    offset: [0, 8]
    blur: 24
    color: "rgba(0,0,0,0.15)"
```

---

## 六、场景模板配方

### 6.1 景点门票

```yaml
scenario: 景点门票

recommended:
  layouts: [hero_bottom, overlay_bottom]
  colors: [ocean_blue, sunset_warm, forest_green]
  fonts: [modern_bold]
  decorations: [gradient_overlay, corner_badge]

template_examples:
  - name: 海洋馆活力款
    layout: hero_bottom
    color: ocean_blue
    font: modern_bold
    decorations: [gradient_overlay, price_tag]
    
  - name: 乐园暖阳款
    layout: overlay_bottom
    color: sunset_warm
    font: modern_bold
    decorations: [frosted_glass, emoji_scatter]
```

### 6.2 酒店民宿

```yaml
scenario: 酒店民宿

recommended:
  layouts: [card_float, split_vertical, hero_bottom]
  colors: [pure_white, mocha_brown, mint_fresh]
  fonts: [elegant_serif, modern_bold]
  decorations: [card_shadow, title_underline]

template_examples:
  - name: 日式简约款
    layout: card_float
    color: pure_white
    font: elegant_serif
    decorations: [card_shadow]
    
  - name: 度假温馨款
    layout: hero_bottom
    color: mint_fresh
    font: modern_bold
    decorations: [gradient_overlay]
```

### 6.3 美食探店

```yaml
scenario: 美食探店

recommended:
  layouts: [overlay_bottom, overlay_center]
  colors: [sunset_warm, peach_pink, mocha_brown]
  fonts: [modern_bold, handwritten]
  decorations: [frosted_glass, emoji_scatter, circle_tag]

template_examples:
  - name: 美食诱惑款
    layout: overlay_bottom
    color: sunset_warm
    font: modern_bold
    decorations: [frosted_glass, emoji_scatter]
    
  - name: 甜品少女款
    layout: overlay_center
    color: peach_pink
    font: handwritten
    decorations: [circle_tag]
```

---

## 七、快速生成矩阵

### 7.1 组合计算

```
5 布局 × 10 配色 × 4 字体 × 6 装饰 = 1200 种理论组合
```

### 7.2 推荐组合 (精选30个)

| # | 场景 | 布局 | 配色 | 字体 | 装饰 |
|---|-----|------|------|------|------|
| 1 | 景点 | hero_bottom | ocean_blue | modern_bold | gradient_overlay |
| 2 | 景点 | overlay_bottom | sunset_warm | modern_bold | frosted_glass |
| 3 | 景点 | overlay_center | forest_green | modern_bold | none |
| 4 | 酒店 | card_float | pure_white | elegant_serif | card_shadow |
| 5 | 酒店 | hero_bottom | mocha_brown | elegant_serif | gradient_overlay |
| 6 | 酒店 | split_vertical | mint_fresh | modern_bold | none |
| 7 | 美食 | overlay_bottom | sunset_warm | modern_bold | frosted_glass |
| 8 | 美食 | overlay_center | peach_pink | handwritten | circle_tag |
| 9 | 美食 | hero_bottom | mocha_brown | modern_bold | gradient_overlay |
| 10 | 活动 | overlay_center | electric_purple | modern_bold | corner_badge |
| ... | ... | ... | ... | ... | ... |

---

## 八、下一步

1. **验证设计** - 用 Figma/PS 手动实现几个模板，验证视觉效果
2. **补充字体** - 确认字体文件可用性
3. **实现引擎** - 基于这些资产实现模板渲染引擎