# 海报设计资产库 > 以小红书风格为参考 > 创建日期: 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. **实现引擎** - 基于这些资产实现模板渲染引擎