1. 首頁
2. 知識庫
3. Sharing AI 架站平台教學
4. 網站 CTA 怎麼設計？按鈕文案、擺放位置與全站同步更新

Sharing AI 架站平台教學

網站 CTA 怎麼設計？按鈕文案、擺放位置與全站同步更新

作者：JamXu更新日期：2026-10-11

CTA 是什麼？網站上的「下一步」不只是一顆按鈕

CTA 是英文 Call to Action 的縮寫，中文常譯為「行動呼籲」。它指的是網頁上請訪客採取下一個動作的元素，例如「預約免費諮詢」按鈕、「用 LINE 詢問」連結，或頁尾的一段聯絡表單。訪客看完內容之後，CTA 負責回答一個問題：如果我有興趣，現在可以做什麼？

很多公司網站的內容其實寫得不差，卻很少收到詢問，常見的原因不是內容不夠好，而是沒有給訪客一個清楚的下一步：按鈕只寫「了解更多」、聯絡方式藏在頁尾最下面、手機上找不到電話。CTA 的設計，就是把「想聯絡你的人」和「聯絡你的方法」之間的距離縮到最短。

CTA 不一定是按鈕。依照訪客的狀態，它可以有好幾種形式，下表整理企業網站最常見的幾種，後面的章節會分別說明怎麼寫、放在哪裡。

第一步：替每一頁決定一個「主要行動」

設計 CTA 之前，先不要急著挑按鈕顏色，而是回到每一頁的任務。訪客從搜尋或廣告進到某一頁時，心裡的問題不一樣，適合的下一步也不一樣。服務頁的訪客多半已經在比較廠商，適合直接邀請諮詢；知識文章的讀者大多還在了解問題，硬要他立刻填表，通常只會讓人關掉頁面。

比較實用的做法是先列一張「頁面任務表」：每一頁寫下訪客是誰、讀完之後最可能想做什麼，再決定主要行動與次要行動。一頁只選一個主要行動，其他選擇都降為次要，訪客才不會在五個看起來一樣重要的按鈕之間猶豫。

按鈕文案怎麼寫？用「動詞＋會得到什麼」

按鈕上的文字是整個 CTA 最關鍵的部分。訪客在決定要不要按之前，只會花一兩秒看這幾個字，所以文字要直接說出「按下去會發生什麼事」。一個好用的公式是：動詞＋會得到什麼，必要時再加上一句降低顧慮的補充說明。

「了解更多」「點這裡」是最常見、也最沒有資訊量的寫法。國際通用的W3C 網頁內容無障礙指引 WCAG有一條「連結目的（依上下文）」的成功準則（2.4.4，A 級），要求每個連結的目的可以從連結文字本身，或連結文字加上程式可判定的上下文看出來。最簡單的做法，就是讓按鈕文字本身就說出目的地，例如把「了解更多」改成「了解企業網站方案」。

長度：能一眼讀完就好

按鈕文字通常以四到十個中文字為宜，太短說不清楚，太長在手機上會換行，看起來就不像按鈕。一行放不下時，把細節移到按鈕下方的一行小字，例如「1 個工作天內回覆」「不需先付費」。這行小字稱為輔助說明，它的工作是消除訪客按下去之前的最後一個疑慮。

輔助說明只能寫你做得到的事。寫了「24 小時內回覆」卻常常隔三天才回，反而會傷害信任；寫了「免費估價」，就要確定估價真的不收費、也沒有附帶條件。

避免製造假的急迫感

「最後 3 名」「優惠倒數 10 分鐘」這類寫法看起來能催促訪客，但如果名額或時間是假的，就是誤導。對企業官網來說，信任比一次點擊重要得多；真的有期限的活動，寫清楚活動日期與條件即可，活動結束後記得把按鈕改回平常的文字。

擺放位置：在訪客準備好的地方出現

CTA 的位置有一個簡單的原則：在訪客「可能已經想聯絡」的地方都放一個入口。這不代表要在每一段都塞按鈕，而是找出頁面上幾個自然的決策點，在那裡提供相同的下一步。

五個常見位置

• 選單右側：放一個全站固定的按鈕，例如「免費諮詢」，讓訪客在任何一頁都能找到入口。整個選單只放一個，太多按鈕反而沒有重點。
• 首屏：訪客打開頁面還沒往下滑時看到的畫面，放一個主要按鈕，最多再配一個外觀低調的次要按鈕。
• 讀完證據之後：服務流程、案例或常見問題的下方，訪客的疑問剛被解答，這時再放一次和首屏相同的按鈕。
• 頁尾前的聯絡段：頁面最後一個完整的聯絡區，放表單、電話與 LINE，讓讀到最後的人不必再往回捲。
• 手機固定列：手機畫面底部常駐的一列按鈕，適合來電與 LINE 這類一按就能完成的動作，後面會另外說明。

同一頁出現好幾次 CTA 時，按鈕文字與目的地要保持一致。首屏寫「預約免費諮詢」，中段就不要改成「聯絡業務」，頁尾又變成「填寫表單」；三種寫法會讓訪客以為是三件不同的事。

手機版 CTA：固定列、好按的大小與不能擋住內容

手機上的 CTA 有三個電腦版不會遇到的問題：螢幕窄、用手指點、捲動距離長。電腦版恰到好處的按鈕，到了手機可能小到點不中，或和旁邊的連結擠在一起而按錯。整體的響應式設計原則，可以參考RWD 響應式網站為什麼重要。

按鈕要多大才好按？

WCAG 對可點擊目標的大小有兩個層級：2.2 版新增的「目標尺寸（最小）」準則（2.5.8，AA 級）要求可點擊目標至少 24 × 24 CSS 像素，或與其他目標保持足夠間距；較嚴格的「目標尺寸」準則（2.5.5，AAA 級）則是至少 44 × 44 CSS 像素。Google 的 web.dev 另外建議，觸控目標以大約 48 × 48 像素為宜，目標之間約保留 8 像素的間距。

這幾個數字放在一起看，實務上的建議是：主要按鈕的高度至少 44 像素，寬度在手機上可以直接撐滿版面，按鈕之間留出明顯的空隙。文字連結因為在句子裡，不受目標尺寸限制，但重要的行動不要只用一個小小的文字連結呈現。

固定列：最多兩個動作

手機固定列是固定在畫面底部的一列按鈕，訪客捲到哪裡都看得到。它很適合「立即來電」「LINE 詢問」這類一按就能完成的動作；需要填很多欄位的表單，則不適合放在固定列裡。固定列上的按鈕最好不超過兩個，三四個擠在一起，每一個都會變得很小。

固定列最大的風險是擋住內容。固定列、聊天按鈕與 Cookie 橫幅疊在一起時，可能把表單的送出按鈕或頁面最後一段文字整個蓋住。WCAG 2.2 的「焦點不被遮蔽（最小）」準則（2.4.11，AA 級）就要求，元件取得鍵盤焦點時，不能被作者自己加上的內容完全遮住。上線前請用手機實際捲到頁面最底部，確認最後一段內容與表單按鈕都看得到。

別讓 CTA 變成干擾

有些網站會在訪客一進站就跳出全螢幕的「立即諮詢」視窗。Google 搜尋中心的〈避免干擾性的插頁式廣告和對話方塊〉說明，這類覆蓋整個網頁的插頁會妨礙使用者瀏覽內容，也可能讓搜尋引擎難以解讀頁面，建議改用只占局部畫面的橫幅。換句話說，CTA 應該是隨時可以按的入口，而不是擋在內容前面的門；底部固定列只要不遮住內容，通常比進站彈窗友善得多。

視覺設計：顏色、對比、大小與按鈕狀態

按鈕要被看見，靠的不是「越鮮豔越好」，而是和周圍有足夠的差別。網路上常見「紅色按鈕點擊率最高」「綠色比較好」之類的說法，這些多半是特定網站的測試結果，換一個網站、換一組配色就不一定成立。比較可靠的原則是：主要按鈕使用全站一致、與背景對比明顯的品牌色，次要按鈕用外框或淺色背景，讓兩者的份量一眼就分得出來。

對比要達到多少？

WCAG 的「對比（最小）」準則（1.4.3，AA 級）要求一般文字與背景的對比至少 4.5:1，大字（約 18 點以上，或 14 點以上粗體）至少 3:1。按鈕上的文字也適用這個標準。另外，「非文字對比」準則（1.4.11，AA 級）要求辨識介面元件所需的視覺資訊，例如外框式按鈕的框線，與相鄰顏色至少有 3:1 的對比。

最容易出問題的是白字放在亮黃、淺綠、淺橘這類淺色按鈕上，看起來很醒目，實際對比卻常常不到 3:1。把文字直接壓在照片上的按鈕，對比會隨圖片位置改變，手機裁切後尤其難讀；遇到這種情況，替按鈕加上實心底色最保險。對比數值可以用瀏覽器開發者工具或線上對比檢查工具計算。

按鈕的四種狀態

一顆完整的按鈕至少有四種狀態：一般、滑鼠移過（hover）、按下，以及鍵盤焦點。最常被漏掉的是鍵盤焦點：有些網站為了美觀把焦點外框移除，用鍵盤瀏覽的人就看不出目前停在哪裡。WCAG 的「焦點可見」準則（2.4.7，AA 級）要求鍵盤操作時要有看得見的焦點指示。

這些規格最好寫進網站的設計規範，讓每位更新網站的人照同一套做；品牌色與字型的準備，可以參考架站前要準備哪些品牌素材。

表單、電話還是 LINE？依客群選擇聯絡管道

CTA 的最後一步，是訪客真正和你聯絡的管道。管道選錯了，按鈕設計得再好也沒用：年長客群可能不習慣填表，企業採購需要正式的書面報價，一般消費者則常常只想用 LINE 問一句價格。先依客群選定一兩個主要管道，再決定按鈕的文字與位置。

表單的欄位設計、送出後的感謝頁與通知信設定，在網站表單怎麼設計？欄位、感謝頁與通知設定有完整步驟；LINE 官方帳號、電話與 Messenger 的連結格式，則整理在網站和社群怎麼串？聯絡按鈕、貼文嵌入與分享預覽圖設定，本文不再重複。

管道開得越多，越需要有人負責回覆。與其放五種聯絡方式、每一種都要兩天才回應，不如只放兩種、保證當天回覆。說不出由誰負責、多久回覆的管道，就先不要放上網站。

在 Sharing AI 落地（一）：選單按鈕與頁面中的按鈕

前面談的是原則，接下來看在 Sharing AI 架站平台上怎麼做。全站的 CTA 大致分成三個地方：上方選單、各頁面裡的區塊，以及跨頁共用的同步區塊。本節先說前兩個。

選單右側的固定按鈕

上方選單在後台的「選單管理」設定。新增選單項目時可以選擇類型，例如連到網站內的頁面，或是填入一個網址連結；最重要的行動，例如「免費諮詢」，建議放在選單的最後一項，連到聯絡頁。選單顏色、層級與排序的設定方式，以及選單項目該怎麼分工，在網站頁面架構與選單怎麼規劃有完整說明。

選單按鈕的文字要短，而且手機版的選單會收進漢堡圖示，需要先點開才看得到；不要以為選單裡有「免費諮詢」，手機訪客就一定找得到，手機上的主要入口還是要靠頁面內的按鈕與聯絡段。

頁面中的按鈕：用區塊組合

在「頁面管理」編輯頁面時，點選「新增區塊」會打開區塊庫，系統區塊分成標題、文章、輪播、自由設計、區塊、表單、圖片、彈出視窗與分隔線等類別。和 CTA 最相關的有以下幾種：

首屏的主要按鈕與標題，請用區塊裡的文字欄位呈現，而不是把按鈕畫在圖片上。圖片裡的字無法被搜尋引擎與螢幕閱讀器讀取，手機裁切後也可能被切掉一半。連到站內聯絡頁的按鈕，通常在原分頁開啟即可；連到外部網站的按鈕，則要確認訪客還能回到你的網站。

在 Sharing AI 落地（二）：用同步區塊統一全站 CTA

網站頁面一多，CTA 最常出現的問題是「不一致」：首頁的電話改了，服務頁還是舊號碼；夏季優惠結束了，三篇文章底下還掛著活動按鈕。逐頁修改不但費時，也一定會漏掉幾頁。Sharing AI 的「同步區塊」就是為這種重複內容設計的：內容只存一份，套用到多個頁面與文章，修改一次就全部更新。

同步區塊在後台左側選單的「同步區塊」頁面管理，這一頁會列出網站所有的同步區塊，每一筆旁邊有「套用」「編輯」「刪除」三個按鈕，並以數字標示目前套用在幾個頁面、幾篇文章。

步驟一：建立同步區塊

1. 進入「同步區塊」頁面，按右上角的「新增同步區塊」。
2. 填寫「同步區塊名稱」。名稱只給後台辨識用，建議寫出用途與範圍，例如「全站｜頁尾聯絡段」「文章尾端｜諮詢引導」。
3. 在「同步區塊內容」的編輯器裡撰寫內容：一句標題、一兩句說明、按鈕或文字連結，以及電話、LINE 等聯絡方式。編輯器也提供原始碼模式，熟悉 HTML 的人可以直接調整。
4. 按「建立」儲存。此時同步區塊還沒有出現在任何頁面上，下一步要把它放進頁面。

步驟二：放進頁面，並在「套用」中勾選

要讓同步區塊出現在某個頁面，先到該頁面的編輯畫面，從「新增區塊」的「文章」類別加入一個「同步區塊」區塊，再回到同步區塊頁面，按下要使用的那一筆旁邊的「套用」。展開的清單分成「頁面」與「文章」兩部分，各有搜尋框，勾選要顯示這段內容的位置即可。

文章的部分更簡單：在「文章管理」編輯文章時，有一個「同步區塊（放置於文章尾端）」分頁，選定的同步區塊會出現在文章最後面。讀者讀完一篇解決問題的文章，正是對你的專業最有好感的時候，文章尾端的諮詢引導很適合用這個欄位；文章本身的管理與發布流程，可以參考用文章經營搜尋流量：文章管理、分類與發布流程。

步驟三：修改一次，全站更新

之後要改電話、換按鈕文字或更新服務時段，只要在同步區塊頁面按「編輯」，修改內容後按「更新」，所有套用這筆同步區塊的頁面與文章都會一起變更。反過來說，改錯一個字，也會同時出現在所有頁面上；修改後請至少打開兩三個套用的頁面，用電腦與手機各確認一次。

「刪除」同樣影響全站。要停用某段 CTA 時，比較安全的做法是先在「套用」清單中取消勾選，確認頁面顯示正常之後，再決定要不要刪除；若有多人共同維護網站，也可以到「異動記錄」查看誰在什麼時間改了哪筆資料。

同步區塊該放什麼？共用與不共用的界線

同步區塊很方便，但不是所有 CTA 都適合共用。判斷的標準是：內容在每一頁都應該完全相同，才適合做成同步區塊；需要依頁面內容調整文字的 CTA，例如服務頁首屏的「預約裝修丈量」，就應該留在各頁自己的區塊裡。

建立一份 CTA 盤點表

同步區塊解決的是「改一次」的問題，但網站上還有不少寫在各頁區塊裡的按鈕。建議每半年做一次盤點，用表格列出每一頁的主要按鈕文字、目的地、是否使用同步區塊與最後檢查日期。表格不必複雜，下面是一個可以直接照抄的欄位示範。

怎麼知道 CTA 有沒有用？點擊、詢問與回覆的追蹤

CTA 改完之後，要有數據才知道有沒有改善。最直接的指標不是點擊數，而是實際收到的詢問數與詢問品質；點擊數則可以幫你找出問題出在哪一段：按鈕很少人按，代表文案或位置要調整；很多人按卻很少人送出，問題多半在表單或聯絡管道。

在 Google Analytics 4 中，開啟加強型評估後，連往其他網域的外連點擊與表單互動等事件會自動記錄；但連到站內聯絡頁的按鈕點擊，並不會自動成為一個事件，需要另外用 GTM 設定點擊事件，或改用送出表單、到達感謝頁來判斷。GA4 與 GTM 的安裝與事件設定，請參考網站行銷代碼怎麼裝？GA4、GTM、站內搜尋與 Meta 像素。

小網站適合怎麼測試？

大型網站常用 A/B 測試比較兩種按鈕，但一般企業官網流量不大，同時測兩個版本很難在合理時間內看出差異。比較實際的做法是「前後比較」：一次只改一件事，記下修改日期，觀察前後各四週的詢問數再決定是否保留。

一次改太多東西是最常見的錯誤。同時換文字、顏色和位置，就算詢問變多，也不知道是哪一個改變帶來的。季節、廣告預算與節日也會影響詢問數，比較時要把這些因素一起記下來。

CTA 常見的錯誤與改法

下面這些錯誤，在企業網站上幾乎都看得到。多數只要改幾個字或移動一個區塊就能修正，建議對照自己的網站逐項檢查。

上線前的 CTA 檢查清單

網站上線或改版前，用下面這份清單把全站的 CTA 走一遍。最有效的做法是請一位沒參與製作的同事，用自己的手機實際操作，記錄每一個卡住的地方。上線前的整體檢查項目，可以搭配用 Sharing AI 架站，上線前要檢查什麼一起使用。

1. 每一頁都說得出主要行動，且同一區段只有一個主要按鈕。
2. 按鈕文字說得出目的地，沒有單獨的「了解更多」「點這裡」。
3. 同一頁重複出現的 CTA，文字與目的地一致。
4. 首屏看得到主要按鈕；長頁面的中段與結尾也有入口。
5. 手機上的按鈕高度足夠、彼此有間距，固定列沒有蓋住任何內容。
6. 按鈕文字與背景的對比達到 4.5:1（大字 3:1），鍵盤操作時看得到焦點外框。
7. 每一個按鈕都實際點過：連結正確、電話能撥、LINE 能開、表單能送出並收到通知。
8. 共用的聯絡段與文章尾端引導已做成同步區塊，並確認套用的頁面與文章清單正確。
9. 活動或優惠相關的按鈕都有下架日期，並記在 CTA 盤點表裡。
10. 詢問數與點擊的追蹤方式已經確定，知道每月要看哪幾個數字。

下一步：先改一顆最重要的按鈕

把整篇濃縮成三件事：第一，替每一頁決定一個主要行動，按鈕文字寫出「按下去會得到什麼」；第二，把按鈕放在首屏、讀完證據之後與頁尾前，手機版確認好按、不擋內容；第三，全站共用的聯絡段與文章尾端引導做成同步區塊，之後改一次就全部更新。

如果不知道從哪裡開始，就從流量最多的那一頁、最顯眼的那一顆按鈕改起，記下修改日期，四週後再看詢問有沒有變化。Sharing AI 後台其他功能的位置，可以回到 Sharing AI 架站平台教學主題頁對照；想了解平台方案，可以從 Sharing AI 架站平台開始。如果希望由專業團隊協助規劃整個網站的轉換動線，也歡迎直接與我們聯絡。