CTA按钮和注意区域
1） CTA的作用和原则
1.屏幕上的主要步骤之一。Primary-CTA必须显而易见且唯一。
2.上下文→行动。在CTA旁边总是有一个简短的解释"接下来会发生什么"。
3.可见性没有侵略性。AA ≥对比，足够的大小和可读文本-而不是尖叫效果。
4.顺序。相同的CTA在所有屏幕上的行为相同。
5.安全。风险的CTA伴随着确认或undo。
2） CTA层次结构
Primary是页面的关键动作（"下注"，"补充"，"确认"）。1个单位。
Secondary-备用或辅助步骤（"阅读更多","更改方法"）。
Tertiary是视觉重量最小的文本/幽灵按钮（ghost）。
Destructive-一种单独的样式（颜色/警告图标）+确认/undo。
规则：如果屏幕上超过"强"CTA，则可能选择没有目标的选择。重新设计线程。
3）文桉写作CTA
动词+宾语，2-4个单词："下注"，"补充平衡"，"设置限制"。
具体情况："带出2000 ₴"比"发送"更好。
避免双重否认（"不要取消"）和模糊的隐喻。
对于冒险活动-副标题1，字符串： "如果不确认，则可以取消5秒钟。"
4）尺寸、形状、对比
最小点击区域：≥ 44 × 44 px （tach）, ≥ 32 × 32 px（台式机）。
按钮高度：40-48 px；10-12 px半径；内部。水平缩进16-20 px。
文本与背景的对比：WCAG AA；不要仅仅依靠颜色-使用图标/标签。
总和/-的表数字：'font-variant-numeric： tabular-nums；'。
5）状态和反馈
Hover/Focus/Active-可见且可区分（focus-ring不隐藏）。
忙碌：即时响应≤ 100毫秒,旋转器/骨架代替"沉默"。
Disabled：不仅仅是"灰色"-解释为什么不可用（tooltip/inline-hint）。
Undo/Confirm：用于破坏性CTA-确认调制解调器或面板Undo 5-10秒。
html
<button class =" btn btn--primary" aria-busy = "false" id = "cta "> Bid </button>
<script>
const cta = document. getElementById('cta');
cta. addEventListener('click', async () => {
cta. setAttribute('aria-busy','true'); cta. disabled = true ;//instant try {
const r = await fetch('/api/bet', {method:'POST', headers:{'Idempotency-Key':crypto. randomUUID()}});
if(!r.ok) throw new Error();
//success toast/navigation
} catch {
//show reason and suggest Retry
} finally {
cta. disabled = false; cta. setAttribute('aria-busy','false');
}
});
</script>6）注意区域（台式机）和拇指区域（移动）
观看模式：F-pattern/Z-pattern，"热点"：左上角（标题），右上角（次要），屏幕底部（完成）。
Primary-CTA托管：- 在短屏幕的折弯上方，或者在外观线上的形状底部，
- 移动底部的"粘性"面板（thumb-zone）。
- 移动"拇指"：更方便的底部1/3屏幕，右/左边缘-取决于占主导地位的手（默认情况下为底部中心/右侧）。
html
<footer class = "sticky-cta" role = "region" aria-label = "Action">
<div class = "sum"> Bid: 200 ₴</div>
<button class =" btn btn--primary "> Confirm </button>
</footer>
<style>
.sticky-cta{position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
padding:12px 16px; background:var(--bg-elevated); box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sticky-cta. btn{flex:1}
</style>7）住宿和务虚会
将primary-CTA与次要元素分离为白色空间（16-24 px）。
不要在附近放置两个小学-一个将成为"错误的"选择。
表格：最后一个字段后的CTA；次要-左/下CTA（"Bether"，"Cancel"）。
在地图/瓷砖上：右下角的CTA；对于长列表-每张卡上的inline-CTA。
8）动画和动作模式
入口/出口：120-180毫秒，"opacity/transform"（无布局抖动）。
新闻效果：减少到96-98％+阴影→"点击感知"。
对于"成功"：短片微动画≤ 400毫秒；对于reduce-motion，是静态图标。
避免无休止的闪烁效果（用于负责任的游戏的反模式）。
9）A11y和键盘
"role="button""在本地"<button>"中不需要。
焦环可见；Tab顺序是合乎逻辑的。Enter/Space激活CTA。
装载时的"aria-busy"；对于状态,请使用实时区域'role='status'。
SR提供按钮文本；图标是"aria-hidden="true"，并不是唯一的意义载体。
10）度量与实验
CTR CTA，点击后转换，从出现到点击。
Scroll-depth →点击："在弯道上方"/"弯道下方"发生的点击比例。
区域热图（desktop/mob）；Thumb-reach（暴民）。
高风险CTA的Cancel/Undo率。
A/B：文本，颜色/对比，大小，位置，"粘性"面板vs静态放置。
11）设计系统令牌（示例）
json
{
"cta": {
"height": { "sm": 40, "md": 44, "lg": 48 },
"radius": 12,
"px": { "sm": 14, "md": 16, "lg": 20 },
"gap": 8,
"icon": 18,
"focusRing": { "width": 2, "offset": 2 },
"motion": { "pressMs": 90, "hoverMs": 160, "inMs": 160, "outMs": 120 }
},
"sticky": { "enabled": true, "shadow": "0 -8px 24px rgba(0,0,0,.12)" },
"a11y": { "contrastAA": true, "tabularNums": true }
}css
.btn{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.btn--primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn--ghost{background:transparent; border:1px solid var(--border); color:var(--fg)}
.btn[aria-busy="true"]{pointer-events:none; opacity:.85}
.btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}12） iGaming模式
投注（初级）：附近显示金额和系数；延迟时>3 s-"等待确认"……+安全的返回。
押金：底部暴民的sticky-CTA。屏幕（"充值"），次要-"更改方法"；可见的佣金/时间表。
现金：CTA固定在比赛/优惠券屏幕上；始终显示现金的当前金额；执行前确认。
设定限制：CTA不具有侵略性；在附近-"通过……"生效。AAA对比，不闪烁。
比赛：CTA"加入"锦标赛卡+次要"规则/奖品"。
13）反模式
附近的两个primary-CTA（"下注"和"购买奖金"）是认知竞争。
"灰色"无缘无故。
无限的注意动画和重拍。
更改标记并消除焦点的按钮。
CTA在大型"装饰"下方弯曲。
在关键位置代替文本（无标签）的图标。
14）Snippets分析
js function trackCTA(name, meta={}) {
window. dataLayer?.push({ event:'cta_click', name,...meta });
}
//example document. querySelector('#deposit'). addEventListener('click', ()=>{
trackCTA('deposit_click', { placement:'sticky_footer', amount:getAmount() });
});15） QA支票清单
含义和层次结构
- 屏幕上恰好有一个主要CTA；次要的重量不会发生冲突。
- CTA文本清晰，没有双重否认；接下来会发生什么。
可用性
- 可以看到Focus-ring；Enter/Space在启动时工作；"aria-busy"。
- AA ≥文本/背景对比；图标并不是唯一的意义载体。
行为
- 即时响应≤ 100毫秒；崩溃时的忙碌状态和返回。
- 对于风险-确认或undo。
- Sticky-CTA正确地粘在移动设备上，不会重叠内容。
放置
- 拇指区域（暴民）或视线（台式机）的CTA。
- 相邻元素的足够缩进（16-24 px）。
度量
- 拍摄了CTR，点击后的转换，点击时间，Undo-rate。
- 有文本/颜色/大小/位置实验。
16）设计系统中的文档
Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
尺寸/对比/动画令牌，文案写作示例。
模式："每个屏幕一个小学"，"移动上的粘贴"，"Confirm/Undo有风险"。
Do/Do n't画廊，带有真实屏幕和热图。
简短摘要
当它具有目标，位置和含义时，CTA就会起作用：一个主要步骤，清晰的文本，足够的对比，在注意/拇指区域的正确位置以及诚实的反馈。在设计系统中记录下来，测量行为-点击变成自信，有意识的行动，没有错误或烦恼。