CTA
行动号召按钮
WebMobile上手难度: 中等
整个页面里最重要的那一个按钮——它就是希望用户接下来要做的事。
Live Demo
真的可以点开始整理你的相册
扫描、找出重复照片，一键释放空间。
无需信用卡 · 不上传照片
你刚才看到的这个：注册页那个占满宽度的「免费开始使用」、落地页右上角高亮的「立即购买」——它们之所以显眼，是因为整页只有它在推动转化。
它到底是什么
CTA 不是「长得不一样的按钮」，它是一个角色：当前页面的唯一主操作。次要按钮可以有五个，CTA 只能有一个。判断标准很简单——去掉它，用户还能不能完成任务？
CTA 按钮行动召唤call to action转化按钮主按钮primary button
Anatomy · 它由什么组成
Container容器
更大内边距，通常通栏或显著加宽
Value Label价值文案
写收益不写功能：「免费开始」优于「注册」
Visual Weight视觉权重
页面上唯一的实心高亮按钮
Optional Hint辅助说明
按钮下方一行小字降低顾虑
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 页面有一个明确的、最希望用户完成的动作 | 用 |
| 落地页 / 注册页 / 空状态页 | 用 |
| 需要用视觉权重引导下一步 | 用 |
| 页面里同时存在多个同等重要的主操作 | 不用 |
把每个按钮都做成 CTA 等于没有 CTA——视觉权重一旦平均，重点就消失了。
高频使用的工作台界面里，强行放 CTA 只会干扰。
Similar Patterns
别搞混一句话区分：整个页面里最重要的那一个按钮——它就是希望用户接下来要做的事。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在注册页加一个通栏主 CTA「免费开始使用」，深色实心，通栏宽度，下方加一行小字「无需信用卡」。
不要只对 AI 说
Bad → Better不要这样对 AI 说
帮我加个按钮让用户点。
改成这样说
在注册页加唯一主 CTA：通栏、深色实心、文案「免费开始使用」（写收益不写功能），下方加 13px 灰字「无需信用卡」。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。