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，「熱點」：左上角（標題），右上角（次要），屏幕底部（完成）。

• 在短屏幕的折彎上方，或者在外觀線上的形狀底部，
• 移動底部的「粘性」面板（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就會起作用：一個主要步驟，清晰的文本，足夠的對比，在註意/拇指區域的正確位置以及誠實的反饋。在設計系統中記錄下來，測量行為-點擊變成自信，有意識的行動，沒有錯誤或煩惱。