CTA按鈕要有人點，靠的是三件事：文字直接說出點了會得到什麼、顏色和周圍有足夠對比讓人一眼找到、位置剛好出現在讀者被說服的地方。按鈕顏色沒有萬用答案，關鍵是同一個畫面只有一個視覺上突出的主要按鈕，次要動作改用外框或文字連結；手機上按鈕要夠大、彼此留間距，點下去要立刻有回饋。設計完不要憑感覺定案，用點擊追蹤與 A/B 測試比較版本，才知道改動有沒有效果。
按鈕文案：用動詞說出點了會得到什麼
按鈕上的字是訪客決定要不要點的依據。「送出」「了解更多」只描述動作，沒有說出結果；改成「取得報價」「預約諮詢」「下載產品型錄」，訪客點之前就知道會發生什麼事。寫文案時可以用三個問題檢查：
- 是否以動詞開頭：例如取得、預約、下載、試用，讓按鈕讀起來像一個行動。
- 是否和頁面承諾一致：廣告寫「免費估價」，落地頁的按鈕就不要變成「立即購買」。
- 是否回應訪客的疑慮：在按鈕下方加一行補充，例如「只需留下電話與需求」「回覆前不會加入電子報」，降低點擊前的猶豫。
另外，按鈕在程式裡的名稱要包含畫面上看到的文字。WCAG 的「名稱包含標籤」準則就是這個要求，使用語音操作的人說出看到的字，才叫得出這個按鈕。
顏色與對比：讓主要按鈕一眼被找到
沒有哪一種顏色一定比較多人點，紅、綠、橘的效果都取決於整個頁面的配色。判斷原則是主要按鈕要和周圍形成對比：頁面以冷色系為主時，暖色按鈕容易跳出來；品牌主色已經大量用在標題與背景時，按鈕就要換一個不會和背景混在一起的顏色。
無障礙規範可以當作檢查底線。WCAG（網頁內容無障礙指引）要求一般文字和背景的對比至少四點五比一、大字至少三比一；用來辨識介面元件與狀態的視覺資訊，和相鄰顏色的對比至少三比一。也不能只靠顏色傳達資訊，例如只用「綠色可點、灰色不可點」區分，建議再加上文字或形狀變化。
按鈕的狀態也要一起設計：滑鼠移上去、鍵盤聚焦、送出中與停用時各長什麼樣子，訪客才知道按鈕有沒有反應。
尺寸與點擊範圍：手指點得到才算數
按鈕看得到卻點不準，在手機上很常見。WCAG 的目標尺寸準則要求可點擊目標至少二十四乘二十四 CSS 像素；目標比這小時，周圍要留出足夠間距，避免誤觸相鄰的目標。這只是基本門檻，WCAG 也建議重要的按鈕考慮更嚴格的加強版目標尺寸準則。
- 整塊都能點：點擊範圍要涵蓋整個按鈕，而不是只有中間的文字。
- 相鄰按鈕留間距：「取消」和「送出」緊貼在一起時，很容易按錯。
- 文字不要被截斷：手機寬度變窄時，按鈕文字要能換行或改用短版，不要只剩半個字。
- 黏底按鈕不遮內容：手機版固定在畫面底部的按鈕方便隨時點擊，但不能遮住內文或表單欄位。
位置與數量：一個畫面只放一個主按鈕
按鈕應該出現在訪客剛被說服的地方，而不是只放在頁首或頁尾。一般落地頁可以在三個位置放同一個主要行動：首屏的價值說明旁、產品優點或證明之後、頁面結尾的常見問題之後。長頁面重複出現按鈕沒有問題，重點是每次的動作都相同。
同一個畫面若同時出現「立即購買」「加入會員」「訂閱電子報」三個一樣醒目的按鈕，訪客反而不知道該點哪一個。建議分成三個層級：
- 主要按鈕：實心色塊，對應這一頁的主要目標。
- 次要按鈕：外框或淺色，例如「查看規格」。
- 文字連結：較不重要的動作，例如「了解退換貨規定」。
整頁的版面安排可以參考 Landing Page 設計原則，按鈕只是其中一環。
手機與無障礙的按鈕檢查清單
按鈕做好後，用下面的清單逐項檢查：
- 用手機實際點擊主要按鈕，確認不會誤觸旁邊的連結。
- 只用鍵盤操作時，按 Tab 鍵能移到按鈕，而且看得到明顯的焦點框。
- 聚焦在按鈕上時，按空白鍵或 Enter 都能觸發動作。
- 前往其他頁面用連結，在同一頁執行動作（送出表單、開啟視窗）用按鈕元素，兩者不要混用。
- 把畫面轉成灰階檢視時，仍能分辨哪個是主要按鈕。
- 點擊後馬上有回饋，例如按鈕顯示處理中、頁面跳轉或出現成功訊息。
WAI-ARIA 的設計模式指南指出，按鈕用來觸發動作或事件，和連結的功能不同。語意用對，鍵盤與螢幕閱讀器使用者才能預期點下去會發生什麼事。
追蹤按鈕點擊：GTM、GA4 與 Clarity
要知道按鈕有沒有人點，先把點擊記錄下來。常見做法是用 Google 代碼管理工具（GTM）建立點擊觸發條件：「所有元素」可追蹤按鈕、圖片等任何元素的點擊，「僅連結」只追蹤 a 元素的連結。再用 Click Text、Click ID、Click Classes、Click URL 等內建變數鎖定特定按鈕，把事件送到 GA4。
GA4 現在把「轉換」改稱「重要事件」，可以把表單送出或詢價完成標示為重要事件，和流量來源一起看。按鈕點擊只是中間步驟，真正要比較的通常是後面的送出與詢價。事件命名與參數可參考 GA4 事件追蹤。
Microsoft Clarity 則能補上「為什麼沒人點」的線索：點擊熱圖顯示訪客實際點了哪裡，dead clicks 標記點了卻沒有回饋的地方，rage clicks 標記短時間在同一區域連續點擊的行為。如果很多人點的是一張看起來像按鈕的圖片，就代表設計讓人誤會了。
按鈕 A/B 測試的步驟
- 先寫假設：例如「把『送出』改成『取得報價』，表單送出會增加」，一次只改一個變數，才知道是哪個改動造成差異。
- 決定主要指標：用表單送出、詢價完成等重要事件判斷勝負，不要只看按鈕點擊。
- 同時隨機分流：兩個版本同時上線、隨機分配流量，避免某一版剛好遇到促銷或假日。
- 跑滿完整週期：至少涵蓋平日與週末的完整循環，看到某一版暫時領先也不要提早結束。
- 分裝置檢查：桌機與手機的結果可能相反，分開看才不會被平均值誤導。
- 記錄結果：不論輸贏都寫下假設、期間與結論，避免日後重複測同一件事。
流量少的網站不容易在短時間得到明確結果，可以先把版本間的差異做得明顯一些，例如整句改寫文案或調整按鈕位置，或用熱圖觀察使用者行為，找出明顯的問題直接修正。
常見問題
CTA按鈕的文字要寫多長？
以能讀出動作與結果的短詞組為主，例如四到六個字。文字太長在手機上容易換行或被截斷，需要補充的條件與說明，交給按鈕周圍的文字處理即可。
按鈕要用圓角還是直角？
形狀本身的影響不大，重點是和頁面其他元素的風格一致，並讓訪客認得出這是可以點的元件。同一頁若混用多種形狀，容易讓人分不清哪些能點、哪些只是裝飾。
按鈕上可以只放圖示嗎？
不建議只放圖示。箭頭或下載圖示可以輔助理解，但搭配文字才不會被誤解；若一定要用純圖示按鈕，要另外設定可讀的名稱，讓螢幕閱讀器使用者知道它的用途。
按鈕點擊變多，詢問卻沒有增加怎麼辦？
代表按鈕吸引了點擊，但下一步沒有接住訪客。檢查點擊後的頁面是否和按鈕文字一致、表單欄位是否太多，並改用表單送出作為判斷改版成效的依據。
電子報或 LINE 訊息裡的按鈕也適用這些原則嗎？
適用。訊息中的按鈕同樣要用動詞說明結果、和背景有足夠對比，並確認在手機上點得到；點擊後的頁面要延續訊息裡的承諾，追蹤時可在連結加上 UTM 參數區分來源。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
如果頁面流量不少、詢問卻不多，可以先檢查主要按鈕的文案、對比與位置，並確認點擊與表單送出都有被記錄。京采的轉換優化與數據追蹤服務可以協助設定按鈕與表單的事件追蹤、搭配熱圖找出訪客卡住的地方，並規劃 A/B 測試的假設與指標。想討論你的頁面，歡迎與我們聯繫。
