CTA 不只是一個按鈕,是你和用戶之間的對話
"Submit"。這個按鈕文字每天出現在數百萬個網站表單上,卻是最爛的 CTA 文字之一。它告訴用戶「你要做的動作是『提交』」,但沒有說明「提交之後你會得到什麼」。
最有效的 CTA 文字應該從用戶的角度出發,說的是他們將要獲得的價值或將要發生的事:「免費看一下你的網站評估報告」比「提交表單」的轉換率可以高出 2-3 倍。
這個差距就是我們這篇要深入的設計心理學——不是要讓你「操縱」用戶,而是讓你的 CTA 更清楚地傳達用戶會得到什麼,降低他們的行動摩擦。
CTA 文字:消除摩擦,強調價值
使用動詞開頭
最有效的 CTA 文字都是以行動動詞開始:
「免費開始 30 天試用」(不是「試用計劃」)
「預約免費諮詢 15 分鐘」(不是「聯絡我們」)
「立即下載品牌規劃清單」(不是「下載」)
「看看過去的作品案例」(不是「查看更多」)
明確說明將發生什麼
移除模糊性。用戶點擊前應該知道點擊後會發生什麼:
- 「填完就立刻看到報價」
- 「點擊後跳轉到 LINE 諮詢」
- 「下載後收到一封確認信」
善用「我的」和「你的」
有研究顯示使用第一人稱的 CTA 文字("Take me to my report") vs 第二人稱 ("Take you to your report"),第一人稱版本的轉換率更高約 90%。
中文案例:「帶我去看報告」vs「帶你去看報告」——前者讓用戶感覺更有主動權。
CTA 顏色的心理學
沒有一個顏色在所有情況下都是「最好的 CTA 顏色」——最重要的原則是「對比」。
CTA 按鈕必須在視覺上從頁面中突出出來。深色系頁面(常見於設計師、攝影師網站)用亮色(白色、黃色)按鈕;淺色系頁面用深色(深藍、深綠、品牌主色)按鈕。
幾個常見的有效 CTA 顏色心理效應:
橘色:被廣泛研究為高轉換率顏色,它傳遞熱情、可親近感,在大多數配色中都有足夠的對比度。Amazon 的「加入購物車」就是橘色。
綠色(特定情境):心理上帶有「繼續」「OK」的含義(紅燈/綠燈的聯想),在有填寫表單的情境下效果不錯。
品牌主色:如果你有清楚的品牌色系,CTA 使用品牌強調色(通常是飽和度最高的那個)是最好的選擇,因為它同時強化品牌認知和視覺引導。
避免:灰色按鈕(看起來像停用狀態)、和背景顏色過於相近的按鈕(沒有視覺跳出感)。
CTA 大小和形狀
大小
按鈕不夠大是常見錯誤,尤其在行動裝置上。Apple 的 Human Interface Guidelines 建議最小觸控目標大小為 44×44 points。對網站 CTA,建議至少 48-56px 高,寬度依照文字長度調整(不要太緊)。
太小的按鈕讓用戶需要非常精確地點擊,增加操作摩擦,手機上尤其明顯。
圓角程度
完全直角(0px 圓角)的按鈕感覺更正式、硬朗;大圓角(pill 形)的按鈕感覺更友善、現代。選擇符合你整體品牌調性的圓角程度,並在整個網站保持一致。
CTA 的位置策略
Above the Fold(第一屏可見)
至少應該有一個主要 CTA 在用戶不需要滾動就能看到的位置(即「第一屏」)。用戶在決定是否繼續閱讀之前,如果沒有看到清楚的「我可以做什麼」,很可能直接離開。
重複 CTA(多個入口點)
長頁面上不能只有一個 CTA(例如只放在頁面最底部)。建議在以下位置重複放置 CTA:
- Hero Section 下方(進入頁面後第一個)
- 服務介紹或作品集之後(看完有興趣的時候)
- 客戶評價之後(信任建立後)
- 頁面末尾
每個 CTA 的文字可以稍有不同,但目標保持一致。
避免競爭性 CTA
同一個視覺位置(例如 Hero Section)不要放兩個同等重要的按鈕,會稀釋注意力,讓用戶不知道該點哪個。如果需要兩個選項,一個用 Primary 按鈕(填滿),一個用 Secondary(輪廓或幽靈按鈕),視覺上清楚分出主次。
測試你的 CTA:A/B Testing 基礎
理論上說哪個 CTA 更好,最終還是要靠實際數據。如果你的流量夠(至少每月幾千個訪客),可以進行 A/B Test:
只改一個變數(例如只改按鈕文字,顏色不變);讓兩個版本同時運行至少 2 週(有足夠樣本);用轉換率(點擊數/瀏覽數)來比較,而不是直覺。
Google Optimize 已停止服務,目前常用的免費 A/B Testing 工具包括 VWO(有免費版)或透過 Google Analytics 的 GA4 Experiments 功能。
設計好的 CTA 是將流量轉化為潛在客戶的最後一哩路。花時間優化這個細節,往往比花同樣時間引更多流量的 ROI 更高。