更好的網(wǎng)站建設(shè)制作按鈕的5種設(shè)計技術(shù)

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

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

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

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

?

1.醒目的按鈕

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

使用對比色

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

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

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

負(fù)空間

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

?

2.面向行動的文本

為號召性用語按鈕編寫文字，以迫使訪問者采取正確的措施并非易事。幸運的是，有幾件事可以幫助您做到這一點：

從動詞開始

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

以“開始”，“獲取”或“加入”之類的動詞開頭

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

使用簡短易懂的按鈕文字

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

增值主張

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

• 自由
• 獎金
• 即刻

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

產(chǎn)生緊迫感

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

有用的文字

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

?

3.使其可見而不滾動

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

?

4.圓角大按鈕

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

使它足夠大

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

帶有圓角的用戶按鈕

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

?

5.選擇時少即是多

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

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

?

結(jié)論

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