官網『按鈕』(Button) 設計完整攻略：中小企業如何用一顆小小的按鈕拉開轉換率差距

很多老闆看官網覺得「字寫得不錯、圖也漂亮」，但訪客就是不來詢問。問題往往不在文案，也不在版面，而是在那顆讓人按下去的按鈕。

按鈕看起來是小事——不就是一個方塊加幾個字嗎？實際上，按鈕是官網裡唯一替你做生意的元件。所有其他內容都在說服訪客，但只有按鈕能真正完成「從訪客變成詢問」這個轉換動作。一顆設計不對的按鈕，就能讓前面所有的努力歸零。

這篇要把按鈕設計的眉角講清楚：從顏色、文字、尺寸、層級、狀態到無障礙——每一個細節都是中小企業老闆可以馬上回頭檢查官網的清單。

Photo by Dharmik Moradiya on Unsplash

一、為什麼按鈕值得單獨拉出來談？

先講一個常見現象：很多中小企業官網的按鈕長這樣——灰色的、跟背景融在一起、文字寫「送出」或「Read More」、放在頁面最下面要滑很久才看得到。

這種按鈕的問題不是「醜」，是它不存在。訪客的眼睛根本沒注意到它，自然不會去按。一個元件如果沒有完成它的工作，再美都沒用。

按鈕設計的核心要解決三件事：

• 被看到：訪客滑到這裡，眼睛要自然落在按鈕上
• 看得懂：訪客要知道按下去會發生什麼事
• 願意按：訪客要覺得按下去對自己有好處、沒風險

以下五個重點都是圍繞這三件事在優化。

二、按鈕顏色：對比，不是好看

第一個誤區：很多老闆希望按鈕「跟網站整體風格搭」，結果用了跟背景接近的低飽和度顏色，按鈕直接隱形。

按鈕的顏色原則只有一個：對比要強到不能忽略。如果你的官網主色是藍色，按鈕就用橘色或亮黃色——互補色才有衝突感。如果整站走素雅風，按鈕至少要用品牌主色的飽和版本，跟周圍的灰白形成對比。

實務上有個快速檢查法：把官網畫面截圖，用手機螢幕亮度調到最低，瞇眼看。如果按鈕還能第一眼跳出來，對比就夠了；如果按鈕跟背景糊在一起，回去重調。

另外，同一頁不要超過兩種按鈕顏色。主要按鈕（Primary）用最顯眼的那個顏色，次要按鈕（Secondary）用低調的描邊或淺底色。一頁出現五顏六色的按鈕，反而讓訪客不知道該按哪一個。

三、按鈕文字：寫動詞，不要寫「送出」

按鈕文字是最常被忽略、卻最容易立刻提升轉換率的環節。台灣中小企業官網最常見的按鈕文字是「送出」「Read More」「點此瞭解更多」「More」——這些字本身沒有任何訊息量。

好的按鈕文字要回答訪客心裡的疑問：「我按下去會得到什麼？」。對比一下：

• 「送出」→「免費索取報價」
• 「了解更多」→「看完整方案說明」
• 「聯絡我們」→「30 分鐘免費諮詢」
• 「訂閱」→「每週收到一篇行銷攻略」
• 「下載」→「下載 10 頁 PDF 攻略」

原則是：用動詞開頭，加上具體的價值或結果。文字長度盡量控制在 4-12 個字，太短沒資訊、太長會壓縮版面。

還有一個進階技巧：用「第一人稱」寫按鈕文字。例如把「免費領取報價」改成「我要免費報價」，按鈕的轉換率通常會再提升一截，因為它讀起來像訪客自己說出來的話，心理門檻更低。

Photo by Amélie Mourichon on Unsplash

四、按鈕尺寸與位置：拇指能按到才算數

手機流量現在普遍占官網 60% 以上，按鈕必須先為手機設計，再回推桌機。

關於尺寸，幾個業界公認的最小值：

• 觸控按鈕最小高度 44px（Apple HIG 標準）或 48px（Google Material Design），更安全是 56px
• 按鈕左右內距至少 16px，文字才不會擠到邊邊
• 兩顆按鈕之間至少留 8-12px 的空隙，避免誤按

位置方面，重要的按鈕要放在大拇指自然能按到的範圍——也就是螢幕下半部、靠近中間偏右的區塊。長頁面的話，主要 CTA 按鈕應該至少出現三次：首屏、頁面中段、頁面底部，讓訪客滑到哪都能立刻行動。

有些官網會用「Sticky CTA」——就是滾動時固定在螢幕底部或側邊的按鈕，這對長頁面特別有效。但要注意不要遮到內容，也不要在每個頁面都用，否則會變成干擾。

五、按鈕層級：一頁只能有一個主角

「層級」是按鈕設計最容易被忽略的部分。同一個畫面裡，按鈕應該分成三個等級：

• Primary（主要按鈕）：每個區塊只能有一個。用最強烈的對比色、實心填滿、最顯眼的位置。對應這頁最希望訪客做的動作（例如「立即詢問」）
• Secondary（次要按鈕）：用描邊或淺底色，視覺重量降一階。對應「次要選項」（例如「看作品集」）
• Tertiary（文字連結）：純文字加底線或箭頭，幾乎沒視覺重量。對應「補充資訊」（例如「常見問題」）

常見錯誤是「三顆主要按鈕並排，全部用紅色實心」——訪客看到反而會猶豫不知道按哪個，導致全部都不按。

正確做法：問自己「這頁我最希望訪客做什麼？」，那個動作配 Primary 按鈕，其他都降階。選擇越少，轉換率反而越高。

六、按鈕狀態：要讓訪客知道發生了什麼事

一顆按鈕至少要設計五種狀態，不然會讓訪客困惑：

• Default（預設）：靜置時的樣子
• Hover（滑鼠移過）：顏色變深、加陰影或微微放大。告訴訪客「這是可以按的」
• Active / Pressed（按下瞬間）：顏色再深一階、或稍微縮小。給予「我接收到你的點擊了」的反饋
• Loading（載入中）：按下後變灰並顯示轉圈圖示、文字改成「處理中…」。避免訪客以為沒反應而重複點擊
• Disabled（無法點擊）：例如表單必填欄位沒填完時，按鈕變淺灰、滑鼠變成禁止符號

很多中小企業官網最常缺的是「Loading 狀態」——訪客按下送出後，按鈕沒反應，他會以為網站當掉，連按五次，結果系統收到五封一樣的詢問單。一個 Loading 狀態就能解決這種重複送出的問題。

Photo by Hassaan Here on Unsplash

七、無障礙與小細節：別忘了不是每個訪客都用滑鼠

按鈕設計最後一塊，也是最容易被跳過的：無障礙（Accessibility）。

幾個必做項目：

• 按鈕用 <button> 標籤，不要用 <div> 模擬按鈕。否則螢幕閱讀器和鍵盤操作會壞掉
• 按鈕文字跟背景的對比度要達到 WCAG AA 標準（4.5:1）。可用 WebAIM Contrast Checker 線上檢查
• 用鍵盤 Tab 鍵切換到按鈕時，要有明顯的 focus 外框（不要 outline:none 直接拔掉）
• 圖示型按鈕（例如純圖示的關閉鈕 X）必須加 aria-label="關閉"，否則視障訪客會聽不懂

這些細節除了照顧不同需求的訪客，也對 SEO 有幫助——Google 在排名時會參考無障礙評分，做好這些等於同時提升轉換和搜尋表現。

八、把這篇變成你的官網按鈕檢查清單

看完上面這些，最有用的不是「我學到了什麼」，而是「我現在要回頭檢查什麼」。打開你的官網，照下面這份清單一條一條對：

• 主要按鈕跟背景的對比度夠強嗎？瞇眼還看得到嗎？
• 按鈕文字是動詞 + 具體價值嗎？還是寫著「送出」「Read More」？
• 手機上按鈕至少 44px 高？兩顆之間有間距嗎？
• 同一頁的主要按鈕只有一顆嗎？還是三顆同色並排？
• 按鈕有 Hover 和 Loading 狀態嗎？還是按下去毫無反應？
• 用 Tab 鍵切換得到按鈕嗎？有 focus 外框嗎？

這份清單跑一遍，可能會發現官網上至少有 3-5 個地方可以馬上改。改完之後，建議用 Google Analytics 看一週數據——通常按鈕優化是投資報酬率最高的改動，因為它直接作用在「轉換」這個漏斗的最後一步。

官網不是做完就放著的展示品，是會替你接生意的業務員。而按鈕，就是那個業務員手上的合約——簽不下來，前面再會講都白費。先從按鈕開始，把每一個讓客戶說「好」的瞬間設計好，官網才會真正開始幫你賺錢。