popup-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: Popup / Modal

组件：Popup / Modal

Guides popup and modal design for conversion. Well-designed popups can achieve up to 25% conversion; poorly timed or intrusive ones hurt UX and SEO. Google penalizes intrusive mobile popups.

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.

本指南用于指导可提升转化率的弹窗与模态框设计。设计优秀的弹窗最高可实现25%的转化率；时机不当或侵入性过强的弹窗则会损害UX和SEO，谷歌会对侵入性的移动端弹窗做出处罚。

调用规则：首次使用时，如果适用，先用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 and audience.

Identify:

Goal: Newsletter, discount, lead magnet, demo
Trigger: Time delay, scroll %, exit intent, click
Mobile: Critical; smaller screens = easier to interrupt

首先确认产品营销上下文：如果存在

.claude/product-marketing-context.md

或

.cursor/product-marketing-context.md

文件，读取其中的优惠信息和受众定位。

明确以下要素：

目标：新闻通讯订阅、折扣发放、潜客诱饵、演示预约
触发条件：时间延迟、滚动百分比、退出意图、点击触发
移动端适配：至关重要；屏幕越小越容易打断用户体验

Best Practices

最佳实践

Timing and Context

时机与场景

Avoid: Popup on page load; users hate it
Prefer: After engagement (scroll 25-50%, time on page, exit intent)
Personalize: Returning visitors, cart abandoners, discount users
Value-first: Offer genuine value; act as "helpful teammate" not spam

避免：页面加载时立即弹出弹窗，用户对此非常反感
优先选择：用户产生互动后触发（滚动25-50%、页面停留一定时长、退出意图）
个性化：针对回访访客、购物车遗弃用户、领取过折扣的用户做差异化展示
价值优先：提供真实价值，定位是“有帮助的助手”而非垃圾广告

Design

设计规范

Short copy: Clear headline, one benefit, single CTA
Visual hierarchy: Guide attention to CTA; don't distract
Easy exit: Clear X, visible "No Thanks"; friction-free exit increases trust and conversion
Brand consistency: Build instant comfort

文案简洁：清晰的标题、单一利益点、单个CTA
视觉层级：引导用户注意力聚焦到CTA，不要有冗余干扰元素
退出便捷：清晰的关闭按钮、明显的“不，谢谢”选项；无摩擦的退出流程能提升信任度和转化率
品牌一致性：快速建立用户熟悉感

Mobile

移动端适配

Size: Fit screen; thumb-friendly close
Lightweight: Avoid heavy assets; affects LCP
SEO: Google penalizes intrusive interstitials; avoid full-page takeover on mobile

尺寸：适配屏幕大小；关闭按钮位于拇指易操作的区域
轻量化：避免使用大体积资源，否则会影响LCP
SEO合规：谷歌会处罚侵入性的插屏广告，移动端避免使用全屏弹窗

Avoid

禁用行为

Dark patterns (fake close, hidden options)
Too early or too frequent
Multiple popups in one session
Blocking content without clear value

暗黑模式（虚假关闭按钮、隐藏选项）
弹出时机过早或过于频繁
单次会话中弹出多个弹窗
没有明确价值的前提下遮挡内容

Triggers

触发方式

Trigger	Use
Time delay	5-15s typical; after some engagement
Scroll %	25-50% read; user invested
Exit intent	Mouse leaving viewport; last chance
Click	User-initiated; least intrusive

触发方式	适用场景
Time delay	通常设置5-15秒，用户产生一定互动后触发
Scroll %	用户阅读了25-50%内容、已经投入注意力时触发
Exit intent	鼠标离开视口时触发，属于最后挽留机会
Click	用户主动发起，侵入性最低