【2026 CTA 設計】不同頁面的 CTA 怎樣放？主次按鈕樣式分層與點擊轉化攻略 【2026 CTA 設計】不同頁面的 CTA 怎樣放？主次按鈕樣式分層與點擊轉化攻略

CTA 只有按鈕一種嗎？

不只。清潔公司的服務頁上，「索取報價」是按鈕，內文「深層清潔」連去服務細節頁的是文字連結，橫幅「秋季大掃除優惠」連去優惠頁又是另一種。分工在搶眼程度：按鈕留給全頁最重要的行動，文字連結負責內文延伸，圖片橫幅要檢查能否被認出是行動入口，而非被當成裝飾。

訪客為何看完內容就離開？

其中一個可能，是頁面答了問題，卻沒有交代下一步。訪客帶着「寫字樓清潔一個月多少錢」這類問題而來，服務頁答了他，這一刻他要的可能是查詢，也可能是再看服務範圍或案例；兩樣出口都沒有，他就帶着答案離開。整頁怎樣由瀏覽帶到行動，高轉換網頁設計邏輯一文有逐項拆解。

首頁需要「立即查詢」嗎？

看訪客屬哪一種。首次認識公司的人，更需要「查看服務」與「查看案例」的入口，先確認你做寫字樓還是住宅清潔、做過甚麼項目；但首頁也有品牌搜尋、回訪或急需服務的人，查詢入口不能缺，放在導覽列或頁頂。主視覺若只放「立即查詢」，對首次認識公司的人未必是最合適的下一步。

服務頁何時邀請訪客查詢？

來到服務頁的人通常已帶着具體需要，查詢按鈕在這頁角色最重。以清潔公司為例，頁面先講服務範圍與頻次（日常清潔、深層清潔、洗地毯），再講收費方式，最後放真實案例；主按鈕放在服務內容與案例之後，讀完資料的人在那裏自然遇到下一步。

按鈕寫法跟着服務性質走：查詢寫「索取報價」，涉及視察的寫「預約上門評估」，動作愈具體，訪客愈知道按下之後會發生甚麼。

產品頁的按鈕有甚麼不同？

以操作為主，但查詢仍在。清潔公司若兼營網店賣消耗品，產品頁訪客多數有購買意向，按鈕寫「加入購物車」「立即選購」，講求步驟短、干擾少；「先登記會員再購買」這類前置要求，每加一道都可能令人放棄。規格、大批訂購或訂造報價，就由查詢按鈕或聯絡連結承接，放在主按鈕附近而不搶位置。

文章頁適合放服務連結嗎？

適合，位置跟着讀者的問題走。讀者搜「辦公室清潔時間表怎樣排」進來，連結應承接當段問題：需要更多資料的，可先給延伸閱讀；需求已解答的，可接相關服務。位置按內容編排，中段或文末皆可。服務連結放在問題已獲解答的位置最自然，文末是常見選擇，某段講完一個具體問題後緊接該服務連結亦可。

按鈕文字要寫得多具體？

原則是「動詞＋訪客得到的東西」，再按頁面處境調整。下表左欄的寫法問題不在文法，而在訪客按下之前無法預期後果；右欄只是把動作與所得補回來。補回動作與所得，字數難免增加，所以要留意長度。手機上文字一旦換行分成兩截，可讀性打折扣。

表中的「免費」與「下載收費表」只是例子，公司確實提供這些安排，承諾才寫得上按鈕；套用時換成自己真正做得到的條件。

「了解更多」要另講一句：W3C 的 WCAG 2.2 連結目的準則指出，連結要讓人從文字本身、或配合前後文判斷會前往哪裏，前後文須能被輔助工具讀得出，不只是畫面上放得近。只要前後文能被輔助工具讀得出，「了解更多」並非一律不可用；寫成「了解辦公室清潔服務」，則不必依賴前後文。

按鈕旁的補充說明

寫訪客按下前最後想確認的兩件事：要填多少、多久有回覆。這類小字一般稱為微文案（microcopy），放在按鈕或表格上方；回覆安排沒有通用答案，寫公司真正做得到的，兌現得到才令人放心。變化還有很多，例如「不知道填甚麼？寫下大概呎數便可」，直接回應填表前的猶豫。

一頁可以放多少個按鈕？

GOV.UK 設計系統在同一份指引提醒，頁面上行動太多，下一步反而難以辨認，次要行動應該用次要的樣式呈現。清潔公司的服務頁可以這樣排：「索取報價」用實色主按鈕，「下載收費表」用外框，「查看案例」用文字連結。同一行動在長頁面重複設入口，與 GOV.UK「行動不宜太多」的提醒並不矛盾。重複的是同一個行動的入口，不是增加行動的數目。

主次按鈕以樣式分層

顏色、大小與留白

顏色方面，與背景有足夠對比，全站只用一兩種「行動色」，令訪客學會這種顏色代表可以按。哪一種顏色點擊最高，沒有必然答案，脫離頁面配色的「最佳顏色」不必盡信。

尺寸、色彩與留白做的是同一件事：把主按鈕從頁面分出來：範圍夠大、對比夠強、四周有呼吸空間，合起來就是層級；擠在輪播圖與段落之間的按鈕則較難被認出。配色與對比怎樣影響轉化，網站配色與 CRO/SEO 另有拆解。

按鈕應該放在頁面的哪些位置？

位置跟着閱讀順序走。清潔公司的服務頁，通常在三個位置需要行動入口：

• 首屏

  留入口給已準備好的人，例如廣告點進來的訪客或回頭客；不必搶主視覺，連導覽列的查詢連結已足夠。

• 服務內容與案例之後

  主按鈕的位置：訪客剛讀完服務範圍與真實案例，這裏出現「索取報價」承接得最自然。

• 頁尾與長頁面的重複入口

  頁尾再放一次主按鈕，連同聯絡電話與 WhatsApp，讓決定來得遲的人仍有出口；好過逼訪客向上捲動找回按鈕。

想逐頁檢查網站的行動入口？先看我們的網頁服務怎樣規劃頁面與查詢流程。

手機版的操作與顯示

手機上，手指取代游標，CTA 要先「按得到、不被遮住」，才輪到好看；桌面版沒問題的按鈕，到手機可能點不準。

• 觸控範圍與按鈕間距

  W3C 的 WCAG 2.2 目標尺寸準則在 AA 級把指針目標的最低標準定為 24×24 CSS 像素，另設間距等例外。這是無障礙的最低基準，不是理想的按鈕尺寸；實際設計應明顯大於下限，按鈕之間留距離，免得拇指想按「索取報價」時誤觸旁邊的「下載收費表」。

  拿自己的手機試按一次是起步；完整的無障礙檢查另有準則與工具，不能單靠試按。

• 固定按鈕與內容遮擋

  固定在屏幕底部的查詢列在手機版常見，方便之餘可能遮擋內容：頁尾聯絡電話、表格最後一格甚至提交按鈕，都可能在某些屏幕尺寸被擋住；鍵盤彈出時可見範圍再縮小，遮擋與誤觸更容易出現。

  上線前用幾部屏幕大小不同的手機檢查，包括打開鍵盤填一次表；被遮的內容要麼移位，要麼在固定列之上預留空間。

按鈕外觀與互動狀態

按鈕要看起來按得下去：實色底或明確邊框，令人一眼分出按鈕與文字。互動狀態也要交代：游標移過、按下有顏色變化，鍵盤操作時焦點落在哪裏同樣看得出。

這些回饋只表示「已按到」；查詢送出與否、有沒有出錯，由提交後的成功或錯誤提示交代。提交期間按鈕顯示「處理中」並暫時鎖定，可減少重複提交。

按鈕寫「查詢」，下一頁見到甚麼？

見到與按鈕文字對得上的頁面。訪客按「索取報價」，下一頁標題應是「索取清潔服務報價」，表格問的也是報價需要的資料；若變成「登記會員」或一份多選題問卷，頁面與按鈕承諾便對不上，訪客較難確認自己是否來對地方。標題、欄位與按鈕文字一致，訪客才確認自己走在正確的路上。

查詢表格要問多少資料？

只問完成首次跟進必需的欄位。稱呼、聯絡電話或電郵、清潔範圍的簡單描述，足以開始跟進一個查詢。這幾個欄位能否報出準確價錢，視乎服務。需要視察的服務，報價本來就留到視察之後，不必為此加設必填欄位。

「公司規模」「預算範圍」這類有用但訪客未必想答的，改為選填，或留到回覆時再問。

每格要有填寫提示，例如電郵寫明格式例子；填錯時在該格旁指出問題與改法，時機可待該欄填完或提交後。表單與流程體驗怎樣影響訪客停留，UI/UX 降低跳出率一文有分析。

按鈕到查詢再到回覆的流程

提交之後，訪客見到甚麼？

要見到明確的結果交代。W3C 的表格通知指引指出，提交後要讓用戶知道成功還是失敗：成功提示確認表格已送出，出錯時指出哪一格、怎樣改。

畫面顯示「已收到」只是給訪客看的提示，是否收妥以後台記錄為準；內部要有通知機制，並定期核對記錄與回覆。至於多久回覆，W3C 沒有規定，那是公司按回覆能力加上的補充，寫了就要兌現。

WhatsApp 按鈕按下去會發生甚麼？

按下 WhatsApp 按鈕，會開啟一個對話視窗，訊息仍未送出，公司通常還未收到任何東西。按WhatsApp 官方說明，wa.me 連結可以預填文字，文字會出現在對話輸入欄位，訪客確認後自己按送出，對話才算開始。在預填文字寫上服務名稱，比要訪客由零打第一句容易走完這步。

按鈕旁值得交代：會離開網站開啟 WhatsApp、由誰回覆、非辦公時間訊息何時處理。預填與開啟視窗都不等於收到查詢，數目以 WhatsApp 收到的來訊計。

點擊多，等於查詢多嗎？

不一定，三個數字要分開量。按鈕點擊要設了追蹤才記錄得到；表格查詢按後台實際收到的記錄數；WhatsApp 以收到的來訊計，除非已設整合，分析工具裏的點擊不等於對話已送出。

點擊上升而查詢沒有跟隨，先檢查表格能否正常提交，再核對各渠道收件；成因未必在表格，流量來源是否合適、按鈕承諾與頁面內容是否一致，同樣會令數字脫節。判斷的終點是實際收到的有效查詢，表格與 WhatsApp 都是入口。

小幅改動怎樣測試才準？

每次只改一項，而且先修已知的問題。按鈕文字、位置、表格欄位分開測；一次過改三樣，升了不知是哪一樣的功勞，跌了更無從入手，已發現表格壞了，先修好再談優化。

流量大的網站可以跑 A/B 測試：兩個版本在同一時期把訪客隨機分配，比較才站得住。香港中小企網站的流量未必支撐得起統計差異，前後對照可以做，但季節、流量來源與活動變化都會影響數字，它給的是線索，不是結論。