top-banner-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: Top Banner (Announcement Bar)

组件：Top Banner（Announcement Bar）

Guides top announcement bar and sticky banner design for conversion. Top banners answer visitor questions in ~3 seconds (trust, discount, free shipping, urgency) and can increase coupon redemption by 30-50% when used well.

When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

本指南针对用于提升转化的顶部公告栏和粘性横幅设计提供指导。优质的顶部横幅能在约3秒内解答访客的疑问（如信任背书、折扣、免运费、紧迫感等），使用得当可使优惠券兑换率提升30-50%。

调用时机：首次使用时，如有必要，先用1-2句话说明本技能的覆盖范围及重要性，再提供主要输出内容。后续使用或用户要求跳过介绍时，直接输出主要内容。

Initial Assessment

初始评估

Check for product marketing context first: If

.claude/product-marketing-context.md

.cursor/product-marketing-context.md

exists, read it for offers, messaging, and Section 12 (Visual Identity).

Identify:

Goal: Lead capture, promo, urgency, trust, free shipping
Placement: Above header (sticky) or below; dismissible or persistent
Audience: All visitors vs segmented (geo, returning, cart abandoners)

首先检查产品营销背景：若存在

.claude/product-marketing-context.md

或

.cursor/product-marketing-context.md

文件，请读取其中的优惠信息、品牌话术及第12节（视觉识别）内容。

需明确以下几点：

目标：获客、促销、制造紧迫感、建立信任、免运费
位置：页眉上方（粘性）或下方；可关闭或固定显示
受众：所有访客或细分群体（按地域、回头客、购物车弃购者等划分）

Best Practices

最佳实践

Use Cases

使用场景

Use	Example
Lead capture	Newsletter, lead magnet, demo request
Promo	Discount code, flash sale, free shipping threshold
Urgency	Limited-time offer, countdown
Trust	Guarantee, security, shipping info
Launch	Product launch, event, cross-sell

用途	示例
获客	新闻通讯订阅、获客磁铁、演示申请
促销	折扣码、限时闪购、免运费门槛
制造紧迫感	限时优惠、倒计时
建立信任	品质保证、安全认证、配送信息
新品/活动发布	产品上线、活动推广、交叉销售

Design

设计要点

Clear hierarchy: Message + CTA in ~400ms "blink test"
Minimal copy: One line typical; link for "Learn more"
High contrast: Stand out from page; CTA color distinct
Mobile-first: 70%+ traffic on mobile; thumb-friendly close/CTA

清晰的层级结构：信息+CTA需通过约400毫秒的“眨眼测试”（即快速识别）
精简文案：通常为一行内容；可通过“了解更多”链接补充信息
高对比度：与页面其他元素区分开；CTA按钮颜色需醒目
移动端优先：70%以上的流量来自移动端；需确保关闭按钮和CTA便于拇指操作

Technical

技术规范

Desktop: 1920x600px keeps content above fold; 16:9 common
Mobile: 800x1200px (2:3 portrait); use separate assets, not scaled
Performance: Optimize images; oversized banners hurt LCP and SEO

桌面端：1920x600px尺寸可确保内容在首屏显示；16:9为常见比例
移动端：800x1200px（2:3竖屏比例）；需使用独立素材，而非缩放桌面端素材
性能优化：优化图片大小；过大的横幅会影响LCP（最大内容绘制）和SEO

Avoid

注意事项

Crowding the header; leave space for nav and logo
Too many CTAs; one primary action
Stale messaging; refresh every 2-4 weeks

避免挤占页眉空间；需为导航栏和Logo预留位置
避免设置多个CTA；仅保留一个主要操作按钮
避免使用过时话术；每2-4周更新一次横幅内容

Output Format

输出格式

Message and CTA copy
Placement (sticky top, below header)
Targeting (all vs segment)
Design notes (contrast, mobile)

文案及CTA内容
位置（顶部粘性、页眉下方）
受众定位（全部访客或细分群体）
设计说明（对比度、移动端适配）