ui-ux-pro-max banner-design：Banner 尺寸规格、22 种艺术方向风格与设计原则全解

本文基于 ui-ux-pro-max-skill 仓库中 banner-design 技能自带的核心参考文档 banner-sizes-and-styles.md 展开，完整覆盖社交/广告/网页/印刷四大类 banner 尺寸规格、22 种艺术方向风格以及安全区、CTA、排版、印刷等设计原则。读完本文，你可以直接按规格表产出一套跨平台 banner，理解每条设计规则背后的约束来源，并知道该技能在 AI 工作流中是如何被调用和校验的。

参考文档在仓库中的位置与可信边界

这份尺寸与风格参考表是 banner-design 技能 的唯一 references 文件。design 技能的路由指南 中明确将 banner-design 定位为“Banners for social, ads, web, print (22 styles)”，并把「Design a Facebook cover」「Create ad banners for Google」「Make a website hero banner」等问题全部路由到它。

从源码结构看，该参考表受到仓库工程化机制的约束，保证内容不会随版本漂移：

• cli/assets/skills/banner-design/references/banner-sizes-and-styles.md 是 .claude/skills/ 下同名文件的静态打包副本（uipro init 安装时随技能一起分发），仓库构建脚本 sync-assets.mjs 负责将 6 个子技能（含 banner-design）从 .claude/skills/ 镜像到 cli/assets/skills/；
• 端到端测试 banner-design-path-contract.spec.ts 断言了两件事：SKILL.md 中引用的 references/banner-sizes-and-styles.md 必须真实存在（自包含路径契约），且两份副本内容必须逐字节一致（"the bundled banner skill matches the plugin source"）。

因此，下文所有尺寸数字与设计规则都以该文档为准，且在 Claude/Cursor 等 20+ 平台安装版本中保持一致。

完整 Banner 尺寸规格

社交媒体

平台	类型	尺寸 (px)	宽高比
Facebook	封面（桌面端）	820 × 312	~2.6:1
Facebook	封面（移动端）	640 × 360	~16:9
Facebook	活动封面	1920 × 1080	16:9
Twitter/X	头像横幅	1500 × 500	3:1
Twitter/X	广告横幅	800 × 418	~2:1
LinkedIn	公司封面	1128 × 191	~6:1
LinkedIn	个人横幅	1584 × 396	4:1
YouTube	频道艺术图	2560 × 1440	16:9
YouTube	安全区	1546 × 423	~3.7:1
Instagram	Stories	1080 × 1920	9:16
Instagram	帖子	1080 × 1080	1:1
Pinterest	Pin	1000 × 1500	2:3

几个需要特别注意的点：

• Facebook 封面存在桌面/移动双规格（820 × 312 与 640 × 360），意味着同一份封面素材在两种视口下会被不同比例裁切，关键内容必须落在两规格的重叠区域内；
• YouTube 单独列出了安全区 1546 × 423，这是 2560 × 1440 画布中各端设备（TV/桌面/移动）都能稳定展示的交集区域，后续设计原则章节会再次强调；
• LinkedIn 公司封面比例极扁（~6:1），只适合横向排布 logo + 一句 value prop，不适合放复杂构图。

网页 / 展示广告（Google Display Network）

名称	尺寸 (px)	备注
Medium Rectangle	300 × 250	点击率最高
Leaderboard	728 × 90	页面顶部
Wide Skyscraper	160 × 600	侧边栏
Half Page	300 × 600	高价值位
Large Rectangle	336 × 280	高表现规格
Mobile Banner	320 × 50	移动端默认
Large Mobile	320 × 100	移动端主视觉
Billboard	970 × 250	桌面端主视觉

这组尺寸对应 GDN 的标准广告位。从备注可以看出选型逻辑：Medium Rectangle（300 × 250）是文档标注「Highest CTR」的主力规格，Mobile Banner（320 × 50）则是移动端信息流中高度极窄的默认位——做这一档时需要把 headline + logo 压进 50px 高度内，CTA 往往只能退化为文字链接。

网站

类型	尺寸 (px)
全宽 Hero	1920 × 600–1080
Section Banner	1200 × 400
Blog 头图	1200 × 628
Email 头图	600 × 200

网站类尺寸中，全宽 Hero 给出的是 600–1080 的高度区间而非单一值：宽度固定 1920px，高度按页面节奏取。Blog header 的 1200 × 628 对应社交分享卡片的常见裁剪习惯，Email header 的 600px 宽度则受邮件客户端排版上限约束。

印刷

类型	尺寸
易拉宝 (Roll-up)	850mm × 2000mm
签名背景墙 (Step-and-repeat)	8ft × 8ft
户外刀旗布 (Vinyl outdoor)	6ft × 3ft
展会桁架 (Trade show)	33in × 78in

印刷尺寸使用毫米/英尺/英寸的实物单位而非像素，对应的设计约束（DPI、出血、色彩模式）见下文「印刷规格」一节。

22 种艺术方向风格（Art Direction Styles）

参考文档给出了完整的 22 种风格清单，覆盖从极简到反设计的整个光谱：

1. Minimalist（极简） — 白空间主导，单一视觉焦点，1-2 种颜色，干净的无衬线字体
2. Bold Typography（大字排版） — 文字即设计；超大号、表现力强的字形填满画布
3. Gradient / Color Wash（渐变/色晕） — 平滑过渡、网状渐变、彩色混合
4. Photo-Based（照片主导） — 满版摄影 + 文字叠加；生活方式类主视觉
5. Illustrated / Hand-Drawn（插画/手绘） — 定制插画、专属图标、手工艺质感
6. Geometric / Abstract（几何/抽象） — 形状、线条、网格作为主要视觉元素
7. Retro / Vintage（复古） — 做旧纹理、低饱和配色、衬线字体、半调网点
8. Glassmorphism（玻璃拟态） — 磨砂玻璃面板、背景模糊、细微边框光晕
9. 3D / Sculptural（3D/雕塑感） — 渲染物体、深度、阴影；以产品为中心
10. Neon / Cyberpunk（霓虹/赛博朋克） — 深色背景、发光霓虹点缀、高对比
11. Duotone（双色调） — 双色照片处理；用品牌色大胆覆盖图像
12. Editorial / Magazine（编辑/杂志风） — 重网格布局、引语块、新闻式构图
13. Collage / Mixed Media（拼贴/混合媒介） — 剪纸纹理、照片抠图、图层叠加元素
14. Retro Futurism（复古未来主义） — 太空时代怀旧感、镀铬、渐变、乐观主义
15. Expressive / Anti-Design（表现主义/反设计） — 混乱布局、混排字体、故意"错误"的构图
16. Digi-Cute / Kawaii（数字可爱风） — 圆角形状、粉彩渐变、像素画、趣味角色
17. Tactile / Sensory（触感/感官） — 蓬松/软糯质感、超写实材质、压印手感
18. Data / Infographic（数据/信息图） — 数据前置、图表、数字即主角
19. Dark Mode / Moody（暗色/氛围） — 近黑背景、浓郁宝石色调、高对比
20. Flat / Solid Color（扁平/纯色） — 单一背景色、干净图标、无渐变
21. Nature / Organic（自然/有机） — 大地色系、植物纹样、可持续品牌感
22. Motion-Ready / Kinetic（动效就绪/动态） — 为动画而设计；分层元素、可循环

SKILL.md 在这 22 种之上提炼了一张「Top 10 × 适用场景」速查表，方便在需求收集阶段快速推荐风格：

风格	最适合	关键元素
Minimalist	SaaS、科技	白空间、1-2 色、干净字体
Bold Typography	公告类	超大字体作为主视觉
Gradient	现代品牌	网状渐变、彩色混合
Photo-Based	生活方式、电商	满版照片 + 文字叠加
Geometric	科技、金融科技	形状、网格、抽象图案
Retro/Vintage	餐饮、手作	做旧纹理、低饱和色
Glassmorphism	SaaS、App	磨砂玻璃、模糊、发光边框
Neon/Cyberpunk	游戏、活动	深色底、发光霓虹点缀
Editorial	媒体、奢侈品	网格布局、引语块
3D/Sculptural	产品、科技	渲染物体、深度、阴影

工作流要求（SKILL.md Step 2）是：为每个 banner 需求选定 2–3 种互补风格并逐一说明各自如何服务于 banner 目的，而不是只出一种——这与「默认生成 3 个方案」的数量约定相互对应。

设计原则：从构图到印刷的完整约束

参考文档的 Design Principles 一节是所有风格共用的硬性规则，按重要性拆解如下。

视觉层级：三区法则（3-Zone Rule）

• 上区：Logo 或核心价值主张
• 中区：辅助信息 + 视觉元素
• 下区：CTA（按钮/二维码/URL）

这一条把「阅读动线」固定为从上到下、CTA 收尾，与 CTA 规则的「右下角放置」互为补充。

安全区（Safe Zones）

• 关键内容落在画布中央 70–80% 范围内
• 文字/CTA 距离边缘至少 50–100px
• YouTube：2560 × 1440 内部的安全区是 1546 × 423px
• Meta/Instagram：使用中央 80% 以避开平台 UI 控件

安全区规则的本质原因是：社交平台会对封面图做视口自适应裁切（头像遮挡、顶部状态栏、底部 UI chrome 等），而 GDN 广告位在不同浏览器宽度下也可能出现滚动裁切。SKILL.md 的 HTML/CSS 制作步骤明确要求「Apply safe-zone rules (critical content in the central 70–80%)」，并在导出后验证「safe-zone crop」，说明这些数值会在实际生成流程中被逐条执行而非仅作文档建议。

CTA 规则

• 每个 banner 有且仅有一个 CTA
• 与背景高对比
• 放置在右下角（终端阅读区）
• 移动端点击目标最小高度 44px
• 使用动作动词："Get"、"Start"、"Download"、"Claim"

44px 是通用的可点击目标尺寸下限，对应移动端拇指热区的工程惯例；「右下角」则源于 F 型/Z 型阅读路径的终点。

排版（Typography）

• 每个 banner 最多 2 种字体
• 正文最小 16px，数字端标题 ≥32px
• 文字对比度至少 4.5:1
• 每行最多 7 个词，广告文案限 3 行

4.5:1 对比度对应 WCAG AA 级别；「2 种字体上限」与「≤7 词/行」是为了保证 banner 在缩略图尺寸下仍然可读——banner 大量出现在信息流小图位，长行与多字体会在 300px 宽下完全糊掉。

图文比（Text-to-Image Ratio）

• 广告：文字占比低于 20%（Meta 会对重文字广告降权）
• 社交封面：图像/文字约 60/40
• 印刷：3–5 米观看距离需 70pt 以上标题

这条直接对应投放平台的算法事实：Meta 广告系统历史上对「文字过多」的创意做负面信号处理，因此广告类 banner 的信息密度上限由平台规则而非审美决定。

印刷规格（Print Specs）

• 最低 300 DPI（大幅面 150 DPI 即可）
• 四边 3–5mm 出血
• CMYK 色彩模式
• 1pt 对应 1 英尺观看距离规则（即观看距离 1 英尺时最小可读字号约 1pt）

对照尺寸表中的印刷档位：易拉宝 2000mm 高的观看距离通常在 1m 以上，按 1pt/ft 规则换算，标题需要数寸级字号；Step-and-repeat 8ft × 8ft 背景墙属于大幅面，150 DPI 即可满足出片要求——这正是表中「150 DPI for large format」条目的应用场景。

工作流视角：参考表如何被技能执行

参考表本身是静态知识，SKILL.md 定义了它被消费的五步流程，理解这五步能看出文档中每条规则的落点：

1. Step 1 需求收集：目的（社交封面/广告/网站 Hero/印刷）、平台与尺寸、内容（标题/副文案/CTA/logo）、品牌资产、风格偏好、方案数量（默认 3）——其中「平台/尺寸」一项直接索引上文尺寸表；
2. Step 2 研究与艺术方向：读取参考文档获取目标格式、安全区与适配风格；可选做浏览器调研收集 3–5 个参考；选定 2–3 种互补风格并说明理由；
3. Step 3 设计生成：用 HTML/CSS 制作，使用尺寸表中的精确平台尺寸、套用 70–80% 安全区、≤2 种字体、单 CTA、≥4.5:1 对比度；视觉来源优先用户提供的素材或 CSS 构建（渐变/几何/文字），仅在运行时提供合规图像生成能力时才生成无文字背景，保证最终文案在 HTML 中可编辑；
4. Step 4 导出：按精确目标视口预览并截取 PNG；若截图能力不可用，则交付 HTML/CSS 源码并明确标注「PNG 导出待定」，而不是假装完成；
5. Step 5 展示与迭代：并排展示所有方案，附风格名、预览、设计理由、文件路径与尺寸。

导出文件遵循固定的命名约定，便于多规格批量管理：

assets/banners/{campaign}/
├── minimalist-1500x500.png
├── gradient-1500x500.png
├── bold-type-1500x500.png
├── minimalist-1080x1080.png    # 多规格请求时
└── ...

• 文件名用 kebab-case：{style}-{width}x{height}.{ext}
• 时效性活动加日期前缀：{YYMMDD}-{style}-{size}.png
• 同一 campaign 的所有变体集中在一个文件夹

从源码结构看，这套「自包含 + 可选能力降级」的设计（浏览器调研、图像生成、截图均为可选）正是被端到端测试 banner-design-path-contract.spec.ts 锁定的：测试维护了一份 unavailableDependencies 清单（如 frontend-design、chrome-devtools、screenshot.js 等），断言 SKILL.md 不得依赖任何不在打包产物中的外部技能或脚本——这解释了为什么 SKILL.md 的 Step 2/3/4 处处是「If available... otherwise...」的条件式写法：参考表是技能的硬依赖，外部工具链则是可插拔增强。

用 Pinterest 查询模板做风格调研

文档末尾给出一组可直接套用的 Pinterest 搜索式模板（用于 Step 2 的人工/浏览器调研）：

• [purpose] banner design [style]（例："social media banner minimalist"）
• [platform] cover design inspiration（例："youtube channel art design"）
• creative banner layout [industry]（例："creative banner layout tech startup"）
• [style] graphic design 2026（例："gradient graphic design 2026"）
• banner ad design [product type]（例："banner ad design saas"）

模板把「目的、平台、行业、风格、品类」五个维度组合成检索式，恰好对应 Step 1 需求收集的前四项——调研查询从需求字段直接生成，避免凭空翻找。

小结

banner-sizes-and-styles.md 用一份文档完成了三件事：给出社交（12 行）、GDN（8 行）、网站（4 行）、印刷（4 行）四张可直接套用的尺寸表；提供 22 种风格分类与 Top 10 场景速查；固化安全区、单 CTA、44px 点击目标、4.5:1 对比度、广告 20% 文字上限、300 DPI/CMYK/出血等硬性设计规则。配合 SKILL.md 的五步工作流和 design 路由指南，它让「给某个平台做几张 banner」这件事从凭经验试尺寸，变成按表取值、按规则检查的可复现流程；而打包同步脚本与端到端路径契约测试则保证了这份规格在 20+ 个 AI 平台安装版本中保持字节级一致。