Banner 尺寸与艺术方向全参考ui-ux-pro-max-skill 的 22 种风格与多平台规格实战指南【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill本指南以 ui-ux-pro-max-skill 仓库中 cli/assets/skills/design/references/banner-sizes-and-styles.md 为核心骨架系统梳理社交平台、展示广告、网页与印刷四类 Banner 的精确尺寸与宽高比逐一解读 22 种艺术方向风格的视觉特征与适用场景并完整展开安全区、CTA、排版、文本占比与印刷工艺等设计原则。读完本文你将能在设计社交封面、Google 展示广告、网页 Hero 与展会物料时直接查表取用规格结合仓库内置的banner-design技能工作流快速产出多风格、多尺寸的 Banner 方案。一、这份参考在 ui-ux-pro-max-skill 中的定位在 ui-ux-pro-max-skill 的八类设计子技能体系中Banner 设计是覆盖社交、广告、网页与印刷四类场景的独立能力。仓库中有两个入口会加载这份尺寸与风格参考banner-design 专用技能cli/assets/skills/banner-design/SKILL.md 将references/banner-sizes-and-styles.md定义为该技能唯一内置参考self-contained其 Step 2 明确要求先读取这份文档确认目标格式、安全区与合适的艺术方向再进入设计阶段。统一 design 技能cli/assets/skills/design/SKILL.md 的 Banner Design 内建模块同样声明Loadreferences/banner-sizes-and-styles.mdfor complete sizes and styles reference并在其快速尺寸表、Top 风格表与设计规则中摘录了本文档的核心结论。值得一提的是这份路径依赖是被测试锁定的仓库中的 cli/tests/e2e/banner-design-path-contract.spec.ts 会逐一校验 SKILL.md 中引用的references/banner-sizes-and-styles.md真实存在、技能内容自包含且不依赖未安装的外部脚本同时验证 CLI 安装generatePlatformFiles生成.claude/skills/banner-design/SKILL.md后该路径契约依然成立。这意味着本文档是从设计决策到代码安装整条链路都依赖的规格基准。二、完整 Banner 尺寸规格2.1 社交媒体平台类型尺寸 (px)宽高比FacebookCover桌面端820 × 312~2.6:1FacebookCover移动端640 × 360~16:9Facebook活动封面1920 × 108016:9Twitter/X头图1500 × 5003:1Twitter/X广告横幅800 × 418~2:1LinkedIn公司封面1128 × 191~6:1LinkedIn个人横幅1584 × 3964:1YouTube频道横幅2560 × 144016:9YouTube安全区1546 × 423~3.7:1Instagram快拍1080 × 19209:16Instagram帖子1080 × 10801:1Pinterest图钉1000 × 15002:3实操要点YouTube 频道横幅的 2560 × 1440 是画布尺寸实际可见内容必须落在 1546 × 423 的安全区内详见第四节安全区规则Facebook 封面在桌面端与移动端展示区域不同因此文档分别给出 820 × 312 与 640 × 360 两组尺寸设计时应保证关键内容在两种裁切下都不丢失。2.2 Web / 展示广告Google 展示网络名称尺寸 (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桌面端主视觉实操要点广告尺寸选择与投放位置强相关——300 × 250 因出现在内容流中部而点击率最高970 × 250 常见于页面顶部 Hero 区160 × 600 专为侧边栏设计。设计时应先确定广告位再选尺寸而非先设计后裁切。需要特别注意的是展示广告受 Meta/Google 文本占比约束见 5.5 节文案须精炼。2.3 网站类型尺寸 (px)全宽 Hero1920 × 600–1080区块横幅1200 × 400博客头图1200 × 628邮件头图600 × 200实操要点1920 是桌面端最主流视口宽度Hero 高度 600–1080 之间按内容信息量浮动1200 × 628 与社交分享卡Open Graph常用比例接近可一图多用。仓库的 design/SKILL.md 在快速尺寸参考中同样把 Website Hero 记为 1920 × 600-1080与此表一致。2.4 印刷类型尺寸易拉宝Roll-up850mm × 2000mm重复铺设背景Step-and-repeat8ft × 8ft户外喷绘Vinyl outdoor6ft × 3ft展会横幅33in × 78in实操要点印刷尺寸使用物理单位mm/ft/in而非像素设计时必须按 300 DPI大幅面至少 150 DPI换算位图分辨率并预留 3–5mm 出血详见 5.6 节印刷规格。三、22 种艺术方向风格详解原文档完整列出 22 种艺术方向以下是逐条解读与适用场景Minimalist极简— 留白主导、单一焦点元素、1–2 种颜色、干净的无衬线字体。适合 SaaS、科技类品牌。Bold Typography大胆字体— 字体即设计本身超大、富有表现力的字形填满画布。适合发布公告、活动宣发。Gradient / Color Wash渐变/色彩晕染— 平滑过渡、网格渐变、色彩混合。适合现代品牌。Photo-Based照片基底— 出血式摄影配文字叠加生活化主视觉。适合生活方式、电商。Illustrated / Hand-Drawn插画/手绘— 定制插画、专属图标、手作质感。适合有手作/艺术调性的品牌。Geometric / Abstract几何/抽象— 以形状、线条、网格为主要视觉元素。适合科技、金融科技。Retro / Vintage复古/怀旧— 做旧纹理、低饱和配色、衬线字体、半调网点。适合餐饮、手工艺。Glassmorphism玻璃拟态— 磨砂玻璃面板、背景模糊、微妙的描边发光。适合 SaaS、应用类产品。3D / Sculptural3D/雕塑感— 渲染物体、深度、阴影以产品为中心。Neon / Cyberpunk霓虹/赛博朋克— 深色背景、发光霓虹点缀、高对比。适合游戏、活动。Duotone双色调— 双色照片处理品牌色叠加在图像上。适合强品牌色的宣传。Editorial / Magazine编辑/杂志— 网格重排版、引用句pull quotes、新闻式构图。适合媒体、奢侈品牌。Collage / Mixed Media拼贴/混合媒介— 剪纸纹理、照片剪裁、分层元素。Retro Futurism复古未来主义— 太空时代怀旧、镀铬、渐变、乐观感。Expressive / Anti-Design表现/反设计— 混乱布局、混搭字体、刻意错误的构图。适合先锋设计项目。Digi-Cute / Kawaii数字可爱风— 圆润形状、粉彩渐变、像素艺术、俏皮角色。适合年轻向、娱乐向。Tactile / Sensory触感/感官— 蓬松/柔软纹理、超写实材质、浮雕感。Data / Infographic数据/信息图— 数据前置、图表、数字作为主角。适合数据驱动营销。Dark Mode / Moody深色/情绪化— 近黑背景、浓郁宝石色调、高对比。适合夜场景、高端感。Flat / Solid Color扁平/纯色— 单一背景色、干净图标、无渐变。Nature / Organic自然/有机— 大地色调、植物母题、可持续品牌感。Motion-Ready / Kinetic动态就绪/动效— 为动画而设计分层元素、可无缝循环。从仓库数据佐证风格落地本项目 src/ui-ux-pro-max/data/styles.csv 中收录的视觉风格条目如 Glassmorphism 的frosted glass, blurred background, layered、Retro-Futurism 的neon glow, geometric patterns, CRT scanlines、Flat Design 的2D, no shadows, clean lines与上述艺术方向的视觉特征高度同源且各自标注了适用场景、技术成本与可访问性风险如 Glassmorphism 被标记为低对比背景有可访问性风险、需要contrast-text-4.5可作为从艺术方向落到可实现性的补充决策依据——选风格时不仅看审美还要看它能否在目标设备上可靠实现。四、设计原则Design Principles4.1 视觉层级3 区法则将横幅在垂直方向划分为三个信息区从上到下依次承载顶部区Logo 或核心价值主张main value prop中部区支撑信息 视觉元素底部区行动召唤 CTA按钮 / QR 码 / URL这与 Banner 技能的工作流相呼应cli/assets/skills/banner-design/SKILL.md 在合成最终横幅时要求overlay the headline, supporting copy, CTA, and logo并核对层级、安全区、对比度与裁切行为——3 区法则正是这条合成顺序的理论依据。4.2 安全区Safe Zones关键内容放置在画布中央 70–80% 区域文字/CTA 距边缘至少 50–100pxYouTube在 2560 × 1440 画布内实际安全区为 1546 × 423pxMeta/Instagram保留中央 80%避开平台 UI 元素遮挡。安全区规则直接对应banner-design技能 Step 3 中Apply safe-zone rules (critical content in the central 70–80%)的执行动作是导出后不被平台 UI 裁切的关键。4.3 CTA 规则每个横幅只有一个 CTA与背景高对比放置在右下角视觉终结区移动端触控目标最小高度 44px使用行动动词GetStartDownloadClaim。cli/assets/skills/design/SKILL.md 的 Banner Design 设计规则同样强调One CTA per banner, bottom-right, min 44px height与本文档完全一致。4.4 排版Typography每个横幅最多 2 种字体数字端正文最小 16px标题 ≥32px对比度最低 4.5:1对应 WCAG AA 级文本对比要求每行最多 7 个单词广告最多 3 行。4.5 文本-图像占比Text-to-Image Ratio广告文字占比低于 20%Meta 会对文字过多的广告降权社交封面图像与文字 60/40印刷3–5m 观看距离下标题至少 70pt。4.6 印刷规格Print Specs分辨率最低 300 DPI大幅面可降至 150 DPI四周出血 3–5mm色彩模式 CMYK观看距离经验法则每英尺观看距离对应约 1pt 字号。五、Pinterest 研究查询在寻找艺术方向参考时可直接套用以下查询模板在 Pinterest 上搜索[用途] banner design [风格]例social media banner minimalist[平台] cover design inspiration例youtube channel art designcreative banner layout [行业]例creative banner layout tech startup[风格] graphic design 2026例gradient graphic design 2026banner ad design [产品类型]例banner ad design saasbanner-design技能的工作流中Step 2 会先读取本文档确定目标格式与风格再collect 3–5 references for composition and art-direction inspiration——这些模板正是该调研环节的检索配方其作用是把抽象的风格名称转化为可参考的真实案例。六、实战落地与 banner-design 技能工作流结合这份参考文档不是孤立的数据表而是完整 Banner 生产流程的规格起点。将其接入 cli/assets/skills/banner-design/SKILL.md 的五个步骤即可得到一条可复现的产出链路需求收集通过 AskUserQuestion 确认用途社交封面 / 广告 / 网页 Hero / 印刷 / 创意素材、平台与尺寸、内容标题、副文案、CTA、Logo 位置、品牌资料、风格偏好、方案数量默认 3 个。研究与艺术方向读取本文档锁定目标格式、安全区与合适风格从 22 种方向中选出 2–3 个互补方案并说明各自如何服务 Banner 的用途。设计与生成用 HTML/CSS 按本文档的精确尺寸创建横幅——套用安全区规则关键内容在中央 70–80%、最多 2 种字体、单一 CTA、文本对比 ≥4.5:1视觉素材优先使用用户提供或已授权资产也可用渐变、几何形、字体等纯 CSS 视觉元素若运行时有授权的图像生成能力则生成与目标宽高比一致的背景提示词中避免出现文字保证文案可编辑。导出为图片在浏览器中按精确目标视口预览将横幅元素截图导出为 PNG核对导出像素尺寸、安全区裁切、字体加载与图像质量若超过平台大小限制则压缩图片质量或在平台规格内缩小尺寸。呈现与迭代并排展示所有方案说明艺术方向名称、设计理由、文件路径与尺寸根据反馈迭代直至通过。输出路径约定技能内置规范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 文件夹。七、易被忽略的三个坑别把画布尺寸当安全尺寸YouTube 2560 × 1440 画布、1546 × 423 安全区是最典型的差异Facebook 桌面/移动封面同理——先在安全区内排布关键内容再补背景装饰。广告文案占比是硬约束Meta 会对文字占比超过 20% 的广告降权展示广告应把信息量压到最小用视觉而非文字表达卖点。印刷必须先定工艺再定尺寸300 DPI、CMYK、3–5mm 出血、按观看距离定字号每英尺约 1pt是印刷与数字设计的本质差异直接套用 72 DPI 的 RGB 文件会导致印刷模糊或偏色。这份参考文档完整继承了上述全部规格、风格与原则并被banner-design技能与统一design技能共同引用、被 e2e 契约测试锁定路径——它既是查表手册也是 Banner 自动化生产链路中的规格基准。【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考