網(wǎng)站設(shè)計(jì)更好的CTA按鈕的5種設(shè)計(jì)技術(shù)

當(dāng)我們?cè)L問(wèn)大多數(shù)網(wǎng)站時(shí)，通常會(huì)想到一個(gè)目標(biāo)。為了實(shí)現(xiàn)該目標(biāo)，通常需要采取一系列步驟，第一步是單擊CTA（號(hào)召性用語(yǔ)）按鈕開始。想想您上一次注冊(cè)服務(wù)或下載應(yīng)用程序時(shí)，該過(guò)程可能包括與號(hào)召性用語(yǔ)的交互。

CTA按鈕是您在網(wǎng)站上用來(lái)引導(dǎo)用戶實(shí)現(xiàn)目標(biāo)轉(zhuǎn)化的按鈕。CTA的全部目的是將您的網(wǎng)站訪問(wèn)者引導(dǎo)至所需的操作過(guò)程。CTA的一些常見示例包括：

• “開始試用”
• “下載應(yīng)用程序/書/指南”
• “注冊(cè)更新”
• “咨詢”

今天，我們將討論設(shè)計(jì)CTA按鈕的5種最佳做法，以及最佳的實(shí)際示例，以幫助您從目標(biāo)網(wǎng)頁(yè)獲得最多的點(diǎn)擊次數(shù)。

1.醒目的按鈕

您的按鈕顏色很重要。實(shí)際上，如果您只想從本文中獲得一條建議，那就應(yīng)該是：“考慮您的CTA按鈕顏色”。使用顏色，可以使某些按鈕比其他按鈕更加突出視覺效果，從而使它們更加突出。

使用對(duì)比色

對(duì)比色最適合CTA按鈕，使用對(duì)比色可以創(chuàng)建醒目的醒目的按鈕。您應(yīng)該從網(wǎng)頁(yè)的配色方案中選擇一種對(duì)比色，同時(shí)仍要適合整體設(shè)計(jì)。考慮下面的Firefox示例。Firefox頁(yè)面上CTA按鈕的綠色正在跳出頁(yè)面，并立即引起用戶注意。

Firefox CTA按鈕為亮綠色，在深藍(lán)色背景上效果突出

另一個(gè)引人注目的CTA按鈕可以在Hipmunk主頁(yè)上找到。明亮的橙色按鈕引起用戶注意并定義了下一個(gè)可能的操作。

負(fù)空間

顏色不僅對(duì)于CTA很重要，而且對(duì)于它的周圍空間也很重要。空格（或負(fù)空格）可創(chuàng)建必要的呼吸空間，并將CTA按鈕與用戶界面中的其他元素分開。舊的Dropbox主頁(yè)很好地說(shuō)明了如何使用負(fù)數(shù)空間來(lái)彈出其主要CTA。藍(lán)色的“免費(fèi)注冊(cè)”號(hào)召性用語(yǔ)在背景的淺藍(lán)色中脫穎而出。

2.面向行動(dòng)的文本

為號(hào)召性用語(yǔ)按鈕編寫文字，以迫使訪問(wèn)者采取正確的措施并非易事。幸運(yùn)的是，有幾件事可以幫助您做到這一點(diǎn)：

從動(dòng)詞開始

您應(yīng)該避免在CTA按鈕上使用諸如“輸入更多信息”之類的含糊而無(wú)聊的字詞，而應(yīng)將其替換為諸如“開始免費(fèi)試用”或“立即獲得折扣”等面向行動(dòng)的字詞。Evernote是最常見的一種，但其CTA按鈕仍可使用面向操作的文本。

以“開始”，“獲取”或“加入”之類的動(dòng)詞開頭

可以在Treehouse主頁(yè)上找到一個(gè)更有趣的示例。Treehouse網(wǎng)站上的CTA不僅說(shuō)“開始免費(fèi)試用”，還包括“免費(fèi)試用”。它說(shuō)“要求免費(fèi)試用”。措辭上的差異似乎微妙，但是“要求免費(fèi)試用”聽起來(lái)更個(gè)人。

使用簡(jiǎn)短易懂的按鈕文字

請(qǐng)確保準(zhǔn)確說(shuō)明訪問(wèn)者單擊CTA會(huì)得到什么。理想情況下，您希望按鈕文字保持在2到5個(gè)字之間。

增值主張

您很可能已經(jīng)注意到，許多按鈕的副本中都帶有“免費(fèi)”之類的字眼，這并非巧合，在按鈕副本中使用此類字眼可以突出您的報(bào)價(jià)的價(jià)值主張。因此，在編寫CTA時(shí)，請(qǐng)嘗試尋找一種方法來(lái)整合一個(gè)（或全部）3個(gè)有說(shuō)服力的單詞：

• 自由
• 獎(jiǎng)金
• 即刻

讓我舉個(gè)例子：用戶在承諾簽約之前最大的恐懼是，如果他們不喜歡該服務(wù)，取消訂閱將很痛苦。Netflix使用“每月免費(fèi)加入” CTA旁邊的“隨時(shí)取消”承諾來(lái)緩解這種恐懼。

產(chǎn)生緊迫感

在CTA按鈕中營(yíng)造緊迫感，可以產(chǎn)生令人印象深刻的點(diǎn)擊率。例如，您可以使用諸如“今天注冊(cè)并享受25％的折扣！”之類的按鈕文字，從而限制了人們做出決定的時(shí)間，使人們希望在可以的情況下要求其報(bào)價(jià)。

有用的文字

有時(shí)您可能需要考慮在按鈕文本中添加額外的信息行。這種做法在免費(fèi)試用按鈕中很常見。例如，免費(fèi)試用按鈕可能會(huì)在CTA按鈕下方帶有“開始免費(fèi)試用”文本的較小文本中顯示“ 30天試用期，無(wú)信用卡”。這些額外的文字應(yīng)簡(jiǎn)化決策過(guò)程。

3.使其可見而不滾動(dòng)

號(hào)召性用語(yǔ)按鈕的位置與顏色和消息一樣重要。CTA按鈕應(yīng)位于易于查找的位置，該位置從網(wǎng)頁(yè)的流動(dòng)開始自然而然地跟隨。您應(yīng)該嘗試將CTA按鈕保持在首位，以使用戶永遠(yuǎn)不會(huì)錯(cuò)過(guò)它。理想情況下，您的CTA按鈕應(yīng)該是用戶訪問(wèn)頁(yè)面時(shí)首先在頁(yè)面上看到的東西。附加信息應(yīng)保持在折疊下方，在此處仍可訪問(wèn)但不能分散注意力。

4.圓角大按鈕

考慮一下設(shè)計(jì)如何傳達(dá)能力。用戶如何將元素理解為按鈕？使用形狀和大小使元素看起來(lái)像一個(gè)按鈕。

使它足夠大

CTA應(yīng)該足夠大，可以遠(yuǎn)距離觀看，但又不能太大，以免分散頁(yè)面主要內(nèi)容的注意力

帶有圓角的用戶按鈕

紐扣形狀可以發(fā)揮很大的作用。這是一個(gè) 被證明的事實(shí)是圓角是對(duì)眼睛更容易。在ContentVerve的測(cè)試中，綠色的圓形按鈕比藍(lán)色的矩形效果更好。

5.選擇時(shí)少即是多

請(qǐng)記住，如果您希望客戶采取行動(dòng)，則必須通過(guò)消除所有可能的障礙來(lái)幫助他們。當(dāng)給用戶太多選擇時(shí)，他們往往會(huì)感到困惑。因此，最好只向潛在客戶提供一種選擇。

如果您仍然希望包括多個(gè)按鈕選擇，則將一個(gè)選擇的權(quán)重放在其他選擇上，以幫助將用戶引導(dǎo)至特定路徑。Evernote就是一個(gè)很好的例子：當(dāng)您到達(dá)Evernote主頁(yè)的底部時(shí)，很明顯，一個(gè)更好的選擇是“免費(fèi)注冊(cè)”，而用戶比較計(jì)劃的CTA則是次要的。

結(jié)論

網(wǎng)站設(shè)計(jì)制作有效的CTA設(shè)計(jì)，您需要考慮的不僅僅是按鈕本身。考慮背景顏色，周圍圖像，周圍文本和許多其他元素也很重要。Basecamp團(tuán)隊(duì)了解這些元素的重要性，并為其著陸頁(yè)設(shè)計(jì)了完美的布局。甚至他們?cè)贑TA按鈕下使用的復(fù)印件（“本周已簽署了4,714家企業(yè)！”）也提高了潛在客戶的信心。