9個重要的CTA設計技巧，用於使人們點擊的按鈕

您的號召性用語 (CTA) 是您營銷策略的高潮。 無論您是要求購買、註冊還是下載。 到目前為止，一切都是為了讓潛在客戶訪問您的目標網頁。 有時，您只需幾句話就可以達成交易。

這就是為什麼您的 CTA 按鈕是您網站最重要的設計元素。 因為它可以將被動訪問者變成主動用戶。

號召性用語按鈕看起來很簡單。 但他們很容易搞砸。 或者完全錯過。 這 9 個 CTA 設計技巧將確保您獲得該轉換。 另外，還有很多有用的例子：

1. 讓你的按鈕看起來可點擊
2. 對您的副本進行描述
3. 大小和空間適當
4. 使用第一人稱連接
5. 製造緊迫感並使用強動詞
6. 試試副標題
7. A/B 測試變體
8. 注意手機版

使您的 CTA 按鈕看起來可點擊

讓按鈕看起來“可點擊”聽起來很傻。 但是您不會相信網站經常出錯。 它主要與按鈕的輪廓和顏色有關。

轉化率趨勢來來去去。 就像帶有細邊框和淡入背景顏色的文本的透明“幽靈按鈕”。 雖然它們可能看起來很酷，但它們往往會引起較少的關注。 與有效的 CTA 應該做的相反。

這種設計通常唯一有效的時候是作為輔助按鈕：

資料來源：用戶體驗運動

這是另一個 CTA 按鈕顯然不可點擊的示例。 當然，這個設計機構的登陸頁面看起來很酷。 但是你會被原諒滾動過去這個案例研究：

那麼，如何讓人們點擊呢？ 為了獲得更高的轉化率， 您的按鈕應該大而粗，並且與您選擇的配色方案一起使用。

Netflix 使用其標誌性的紅色來吸引您的注意力。 幾乎就像一個停車標誌：

它也可以具有對比色，因此它脫穎而出。 就像電子商務平台 BigCommerce 在這裡所做的一樣：

這也適用於框中的文本。 確保它對比，以便您可以正確閱讀。

漸變也可以在相同的品牌配色方案中使用。 它們賦予事物現代、更年輕的感覺：

資料來源：星期一

我的建議是盡量讓你的 CTA 設計清晰可見。 開箱即用可能聽起來不錯，但人類是習慣性動物。 你會驚訝於有多少人會錯過重點。

對您的副本進行描述

最簡單的轉化率優化 (CRO) 策略之一是出色的文案。 但不僅僅是大塊文本。 顯微複製同樣重要，涵蓋了較小的細節。

您通常會在聯繫表格和社交媒體狀態更新欄中看到它。 就像 Facebook 著名的“你在想什麼？” 或 LinkedIn 的“發帖”。

顯微鏡可以幫助：

• 告訴用戶該做什麼
• 提供建議
• 解決問題
• 提供上下文

您的 CTA 按鈕副本是另一個示例。 它應該準確地告訴人們他們將得到什麼/當他們點擊它時會發生什麼。

這曾經是 IMPACT 的 CTA 按鈕。 “免費下載”。 不是很有想像力吧？

資料來源：影響

但通過使其更具描述性，他們將轉化率提高了 78.5%。 “告訴我如何吸引更多客戶”顯然更具吸引力：

只寫“單擊此處”很誘人。 但是有很多選擇可以吸引用戶並希望激發所需的行動。

那麼，你應該寫什麼？ 首先，您需要確定轉化意圖。 您希望與用戶在渠道中的位置以及他們來自哪裡（流量來源）保持一致。

資料來源：KlientBoost

然後你需要強調你所提供的東西的價值。 並處理任何異議。

資料來源：營銷示例

這是一個如此獨特的過程。 這將取決於您的利基市場和品牌聲音。 但無論您選擇什麼措辭，都不要忘記保持按鈕文本簡短而中肯。

適當調整大小並使用空白

CTA 按鈕的設計也不僅僅是顏色。 按鈕大小是另一個真正影響點擊率的小細節。 空白與文本本身一樣重要。

這在很大程度上取決於您的網頁設計。 負（白色）空間將注意力吸引到頁面上的某些元素上。 你不想要一個雜亂的主頁。 需要有一條明顯的路徑供訪問者遵循。

Airbnb是正確處理負空間的最佳例子之一。 對比色使其更加明顯：

Buffer 在他們的主頁上有更多內容，但他們仍然將 CTA 按鈕保持在靠近主副本的位置。 另外，一個有效使用幽靈按鈕的例子。 這使得下一步做什麼變得非常清楚：

你的按鈕越大，它就越明顯。 它需要脫穎而出以引起注意。 但它不會佔據頁面並破壞用戶體驗。

如果您容易偏頭痛，請立即移開視線。 這是一個如何不這樣做的示例：

資料來源：賈斯汀敏德

這裡有很多元素看起來像一個按鈕。 我什至不確定這個網站是否知道它希望訪問者點擊什麼。

相比之下，您在 Spotify 的登錄頁面上看到的第一件事是什麼？

巨大的“Go Premium”按鈕，對吧？ 這就是如何設計清晰的用戶路徑。

最後，關於好例子的 CTA 設計，您還注意到其他什麼嗎？ 如果你再看一眼，你會發現它們幾乎都有共同點。

科學家們發現，人類喜歡“曲線柔和的形狀，而不是尖點的形狀”。 它們更賞心悅目，讓我們感覺更平靜。 因此，最有效的號召性用語按鈕是圓角矩形。

資料來源：CleverTap

這是最流行的格式是有原因的。 但嘗試不同的選擇。 你的聽眾可能更喜歡別的東西。

使用第一人稱連接

更好的 CTA 設計只需一次調整即可。 有時，一個字。

在文案寫作中，我們被教導使用“你”這個詞。 因為它讓讀者覺得他們正在被直接對話。 所以你認為這也適用於你的按鈕副本，對吧？ 奇怪的是，沒有那麼多。

Unbounce 發現，將其登陸頁面上的副本從“開始免費 30 天試用”更改為“開始我的30 天免費試用”可將點擊率提高 90%。

那麼，這是為什麼呢？ 好吧，當有人覺得與產品有聯繫時，他們更有可能轉化。 它提供了個人風格，而無需了解他們的任何信息。

營銷心理學表明，購買決策主要基於情感。 因此，您希望您的網站訪問者覺得這是他們的選擇。

寫“我的”有助於用戶形象化他們將要採取的行動。 它賦予他們控制權並（希望）推動他們做出決策。

另外，它可以表明他們將獲得立竿見影的價值。 就像在 Crazy Egg 的主頁上一樣：

來源：瘋狂的雞蛋

1-800 Contacts 是世界上最大的隱形眼鏡商店。 但他們也這樣做。 他們確保他們的 CTA 按鈕只針對一個人：

來源：1-800 聯繫人

沒有很多公司使用這種技術。 這意味著當你看到它時它會脫穎而出。 那麼，為什麼不試一試呢？

營造緊迫感並使用強動詞

您的文案需要營造一種緊迫感並抓住用戶的注意力。 這對電子商務企業尤其有效。 使用像“現在”和“今天”這樣的詞可以幫助激發行動。 因為他們暗示這個提議不會永遠存在。

“立即購買”是經典。 但我們可以通過 CTA 設計做得比這更好。

資料來源：GoSquared

你可以試試這樣的措辭：

• “今天犒勞自己”
• “立即解鎖折扣”
• “一次性免費下載”

您還想讓您的報價具有吸引力並激發好奇心。 所以，從一個強動詞開始。 不是一件看起來很費力的事情。 這是讓人們失望的簡單方法。

以下是我的意思的幾個例子：

左側聽起來像是您的用戶會從點擊中獲得一些東西。 右手邊聽起來他們需要放棄時間或金錢。

你也可以變得很有創意。 喜歡這個版本的 Huemor 主頁：

資料來源：FastCapital360

或者洪堡縣的舊登陸頁面，給它一個神秘的轉折：

資料來源：ConEmprendimiento

與您的團隊一起集思廣益。 不管多麼荒謬。 你會驚訝於你會想出什麼並最終使用它。 但無論你選擇什麼措辭，別忘了在另一端兌現你的承諾。

嘗試在您的號召性用語按鈕旁邊添加一個副標題

有時，人們需要一點點推動。 CTA 按鈕下的一些文字可以解決問題。 這不是常規的“副標題”。 但這是最簡單的描述方式。

如果我們將按鈕文本視為標題，您會看到最流行的副標題是“無需信用卡詳細信息”。 但你可以說什麼。 用它獲得一點創意很有趣。

很多時候，他們習慣於給潛在客戶信心。 他們可以解決人們可能遇到的主要痛點：

資料來源：CoSchedule

CoSchedule 了解用戶可能認為這只是免費試用。 所以，“為什麼不呢？ 它永遠免費”澄清道。

您還可以使用它們來添加一些社會證明：

資料來源：大本營

這給了你即時的可信度，因為用戶可以清楚地看到其他人已經信任你。 它還可以激發 FOMO，因為人們認為這麼多訂閱者肯定是有原因的。

如果您的服務提供特別優惠或額外價值，請使用副標題突出顯示：

資料來源：莫茲

顯微文案是讓您的品牌聲音大放異彩的機會。 哪怕只有一句話。 所以，如果合適的話，不要害怕有點厚臉皮：

資料來源：KlientBoost

您還可以具體說明人們點擊後會發生什麼。 告訴他們：

• 他們會得到什麼（新的營銷理念）
• 多少(17+)
• 以及為什麼他們應該關心（他們比你擁有的更好）

使用這些示例作為靈感模板。 或者做一些完全不同的事情。 只需確保它適合您的品牌標識並從中獲得樂趣即可。

不要忘記 A/B 測試

大多數 CRO 工具旨在改善用戶體驗 (UX)。 您可能已經對網頁的主要部分進行了此操作。 但是你也應該用小元素來做。

眾所周知，亞馬遜對其 CTA 按鈕設計非常挑剔。 尤其是第 3 方使用。 因此，請確保您沒有違反任何規則。

在那之後，對按鈕設計的微小改動就會產生巨大的影響。 因此，比較不同類型的 CTA 按鈕。 然後 A/B 測試變體：

• 按鈕顏色
• 號召性用語副本
• 字體
• 頁面設計中的位置
• 彈出窗口
• 聯繫表格

資料來源：斯諾夫

正如我之前所討論的，有時只更改一個單詞就可以提高轉化率或點擊率。 但在您加入之前，您需要了解訪問者如何瀏覽您的網站。

您想了解以下內容：

1. 他們試圖與之交互的元素
2. 他們來自哪裡
3. 您網站的用戶旅程/購買渠道
4. 人們在那裡的動機

資料來源：GIPHY

一旦你得到了這些信息，你就可以根據事實進行實驗，而不是猜測。

將 A 和 B 版本與 CTA 設計進行比較通常更容易。 但是你可以增加這個並嘗試多變量測試。 一開始通常越簡單越好。 這樣，你就會有一個明顯的贏家。

但在那之後，沒有什麼能阻止你用另一個版本來試驗那個獲勝者。 您應該始終進行測試和比較。 即使你發現了一些有用的東西。 這就是成功的品牌所做的。

注意手機版

一個快速完成的提示。 您的設計元素在移動屏幕上看起來會非常不同。 您正在使用更小的顯示器和更少的像素。 因此，混亂變得容易多了。

我們所涵蓋的所有內容在您的移動版本中變得更加普遍。 對比色需要更加突出：

負空間應該是優先事項：

甚至您的副標題也可能位於不同的位置。 由於移動用戶可能無法向下滾動到足以在下面看到它：

為這些圖形向CleverTap 大喊大叫

一般來說，移動端的用戶體驗需要更多的思考。 因為移動端佔全球搜索流量的一半以上。 你不能指望你的桌面版本能翻譯。 一點點努力可能會導致更高的點擊率。

結論

有效的 CTA 設計由許多這些小細節組成。 我自始至終都說過很多次，但最小的調整可能就足夠了。 甚至像輪廓的顏色或形狀這樣微不足道的東西。

A/B 測試是您了解的唯一方法。 而且您甚至不需要昂貴的 CRO 工具來執行此操作。 只需跟踪您的轉化。 做出改變。 並查看是否比通常的數字增加或減少。

只需給予您的號召性用語按鈕應有的關注。 這可能是新客戶或失去機會之間的區別。

你最近有沒有看過任何原創的 CTA 設計？ 您是否進行了提高轉化率的小改動？ 請在下面的評論中告訴我們。