jinye_huang
dcfd820ca4
- 新增 PosterSmartEngine，AI 生成文案 + 海报渲染 - 5 种布局支持文本换行和自适应字体 - 修复按钮/标签颜色显示问题 - 优化渐变遮罩和内容区域计算 - Prompt 优化：标题格式为产品名+描述
629 lines
18 KiB
Markdown
629 lines
18 KiB
Markdown
# 海报设计资产库
|
||
|
||
> 以小红书风格为参考
|
||
> 创建日期: 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. **实现引擎** - 基于这些资产实现模板渲染引擎
|