CTA 按鈕設計指南：文字、顏色、大小與位置，讓訪客願意按下去

「把按鈕改成紅色，轉換率就會上升」——這類說法在網路上流傳很久，但真正影響訪客按不按的，從來不只是顏色。CTA 按鈕設計（Call to Action，行動呼籲）牽涉到文字、視覺層級、尺寸、位置，以及按鈕在使用者決策過程中出現的時機。

這篇文章整理 Nielsen Norman Group（NN/g）、Smashing Magazine 與 W3C 無障礙規範中與按鈕相關的研究與建議，轉換成台灣企業官網可以直接套用的做法。不論你是在改首頁的「立即諮詢」，還是電商的「加入購物車」，都能用得上。

先釐清：CTA 是「下一步」，不是裝飾

CTA 是頁面引導訪客採取的下一個行動：預約、詢價、加 LINE、下載、購買。一個好的 CTA 要同時通過三個檢驗：

1. 看得出來它是按鈕（可點擊性）
2. 看得懂按了會發生什麼（文字清楚）
3. 在需要它的時候剛好出現（位置與時機）

大部分「沒人點」的按鈕，都是卡在其中一關，而不是顏色選錯。

第一關：讓按鈕看起來像按鈕

扁平化設計流行之後，很多網站的按鈕變成一塊沒有邊框、沒有陰影的色塊，甚至只是一行文字。NN/g 做過一項眼動研究，把 9 個真實網頁各做成「點擊提示強」與「點擊提示弱」兩個版本，請 71 位受試者找出指定的可點擊元素。結果顯示，在提示弱的版本上，受試者平均多花 22% 的時間、多出 25% 的注視次數，而且視線散得更開，到處找「哪裡可以點」。

讓按鈕被認出來的實用做法：

• 形狀用矩形或圓角矩形。Smashing Magazine 的按鈕設計指南指出，這是使用者最熟悉的按鈕外觀；圓形或特殊造型風險較高。
• 加一點層次：輕微陰影或明確的邊框，讓按鈕看起來可以「按下去」。
• 全站一致：同樣層級的按鈕用同樣的樣式，使用者學一次就會。
• 不要讓標題看起來像連結：NN/g 的研究裡，有受試者停在一個看起來可點、其實不能點的副標題上，錯失真正的目標。

幽靈按鈕要小心使用

只有外框、內部透明的「幽靈按鈕（ghost button）」視覺上很精緻，但可辨識度和對比都較弱。比較穩妥的用法是把它當成次要按鈕，主要 CTA 仍使用實心按鈕。

第二關：按鈕文字要說清楚結果

按鈕文字是最便宜、效果也常最明顯的優化項目。原則只有一句：讓使用者在按之前就知道按了會發生什麼。

Smashing Magazine 建議用動詞開頭、描述具體動作，避免「送出」「確定」這類籠統的字；NN/g 也有一篇〈"Get Started" Stops Users〉，指出「立即開始」這類模糊按鈕會把還不了解產品的訪客推進註冊或問卷流程，讓人覺得被誤導。

文字長度方面，Smashing Magazine 的連結設計文章建議按鈕文字保持精簡、約 4–5 個英文單字以內；換算成中文，大約是 4–10 個字。如果需要更多說明（例如「不綁約、可隨時取消」），可以放在按鈕下方的一行小字，而不是全部塞進按鈕。

想讓整頁文案都更好掃讀，可以搭配閱讀網站文案與 UX Writing。

第三關：視覺層級——一頁只有一個主角

頁面上常同時有好幾個按鈕：「預約諮詢」「看案例」「下載型錄」「回首頁」。如果它們都長得一樣醒目，等於沒有一個醒目。

Smashing Magazine 的建議是：主要的正向動作要有最強的視覺權重，次要動作（例如「取消」「返回」）則用最弱的視覺權重，以減少誤按。實務上可以分成三級：

1. 主要按鈕：實心、品牌強調色、最大，一個區塊只放一個。
2. 次要按鈕：外框或淺色底，尺寸相同或略小。
3. 第三層動作：純文字連結。

在中性色為主的介面裡，保留一個只給主要 CTA 使用的強調色，是很有效的引導方式。這也是為什麼「紅色按鈕比較好」這種結論沒有意義：重點不是哪個顏色，而是它和周圍有沒有對比。

尺寸、間距與對比：有明確標準可循

這部分不需要靠感覺，有現成的規範可以當依據：

• 觸控尺寸：web.dev 建議觸控目標約 48 × 48 像素，相鄰目標之間保留約 8 像素間距；W3C WCAG 2.2 的成功準則 2.5.8 則規定最低至少 24 × 24 CSS 像素（AA 級，有例外情況）。
• 文字對比：按鈕上的文字屬於一般文字，WCAG 要求與背景的對比至少 4.5:1（大字為 3:1）。白字配淺橘、淺綠的按鈕，常常不及格。
• 按鈕本身的對比：WCAG 2.1 起也要求介面元件的視覺邊界與相鄰顏色有足夠對比，讓低視能使用者也辨識得出按鈕範圍。

更多無障礙規範的細節，請參考網站無障礙設計（WCAG 2.2）。

位置與時機：在使用者準備好的時候出現

放在決策點，而不只是首屏

首屏放一個 CTA 是基本，但訪客常常要先看完價格、案例或評價才準備好行動。在這些內容段落之後重複放置同一個 CTA，給已經被說服的人一個就近的出口。

手機上考慮固定按鈕

長頁面在手機上，可以在畫面底部放一條固定的行動列（例如「撥打電話」＋「加 LINE」）。但要注意不要和 LINE 浮動圖示、Cookie 提示、回到頂端按鈕疊在一起，把內容蓋住。

主次按鈕的位置要一致

「確認」與「取消」的左右順序，全站要統一。最重要的是讓主要按鈕在視覺上明顯不同，使用者就不會因為位置差異而按錯。

常見陷阱：停用按鈕與互動狀態

停用（disabled）按鈕常常弊大於利

很多表單會在欄位沒填完時把「送出」按鈕變灰。Smashing Magazine 有篇文章專門討論這個模式的問題：使用者不知道自己卡在哪裡；灰色按鈕通常對比不足；而且多數停用按鈕無法用鍵盤聚焦，鍵盤使用者連「為什麼不能按」都查不到。

比較好的做法是讓按鈕保持可按，按下後再明確指出哪些欄位需要修正，並把畫面帶到第一個錯誤欄位。真的需要停用的情況（例如送出中防止重複扣款），則把按鈕文字改成「處理中…」，讓使用者知道系統正在動作。表單錯誤訊息的設計，可以參考表單設計指南。

每種狀態都要設計

按鈕至少要有：一般、滑鼠懸停、鍵盤聚焦、按下、處理中五種狀態。其中鍵盤聚焦樣式最常被設計師刪掉（因為覺得藍框不好看），但這是鍵盤使用者唯一能知道自己在哪裡的線索。

CTA 按鈕檢查清單

• 不看文字，光看外觀能認出它是按鈕嗎？
• 按鈕文字有沒有說清楚按下去的結果？
• 每個區塊是否只有一個視覺最強的主要按鈕？
• 文字與背景對比是否達到 4.5:1？
• 觸控區域是否夠大、與其他按鈕保持間距？
• 在價格、案例、評價段落之後，是否有就近的 CTA？
• 是否避免了無說明的停用按鈕？
• 懸停、聚焦、按下、處理中狀態都有設計嗎？

常見問題

CTA 按鈕用什麼顏色轉換率最高？

沒有固定答案。影響可點擊性的是按鈕與周圍環境的對比，以及全站配色中是否保留一個專屬於主要動作的強調色。與其爭論紅色或綠色，不如確認它是畫面中最醒目的元素，且文字對比符合標準。

一個頁面可以放幾個 CTA？

同一個目標的 CTA 可以重複出現多次，例如首屏、中段、底部各一個。要避免的是多個不同目標的按鈕同時搶注意力。若真的有多個動作，請用主要、次要、文字連結分出層級。

按鈕文字用「立即」「免費」有用嗎？

具體描述結果比堆砌急迫詞更重要。「免費」如果是真的，例如免費估價、免費試用，寫出來能降低門檻；但若按下去後才發現要付費或綁約，反而會損害信任，NN/g 的研究就觀察到這類情況。

手機版需要另外設計按鈕嗎？

按鈕樣式可以一致，但尺寸、位置要依手機調整：觸控區域至少達到建議尺寸、避免按鈕過於靠近，長頁面可考慮底部固定行動列，並確認不會遮住內容。

結語：好按鈕讓使用者「不用想」

CTA 按鈕設計的目標，是讓使用者一眼認出、一看就懂、在需要時伸手可及。與其不斷換顏色做測試，不如先把可點擊性、文字清晰度、視覺層級與無障礙標準這些基本功做好，再用 A/B 測試微調。

網軍行銷的轉換率優化服務會從追蹤數據與使用者行為出發，找出頁面上真正卡住轉換的環節。想了解按鈕在整個到達頁中的角色，可以接著閱讀到達頁設計與轉換率，或回到企業官網設計完整指南看完整流程。

參考資料

• Nielsen Norman Group，Flat UI Elements Attract Less Attention and Cause Uncertainty：https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/
• Nielsen Norman Group，"Get Started" Stops Users：https://www.nngroup.com/articles/get-started/
• Smashing Magazine，How To Design Better Buttons：https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
• Smashing Magazine，Usability Pitfalls of Disabled Buttons, and How To Avoid Them：https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/
• Smashing Magazine，Designing Better Links For The Web：https://www.smashingmagazine.com/2021/12/designing-better-links-websites-emails-guideline/
• W3C WAI，Understanding Success Criterion 1.4.3: Contrast (Minimum)：https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html