網站上的号召性用語按鈕通常被忽略。 設計師有時除了吸引人和融入整體設計外，還無法完全了解什麼是良好的号召性用語。 但是，号召性按鈕太重要了，以至于無法在某種程度上了解使按鈕生效的方式而設計。 畢竟，對操作按鈕呼叫的主要觀點是讓遊客做一些事情。
至少必須對顔色，比例，語言和其他因素如何影響号召性用語的轉化率有一個基本的了解。 這裡的概念并不複雜，但是确實需要一些深思熟慮和計劃，才能在給定的設計中建立最有效的号召性用語。 繼續閱讀以擷取關于這些要點的更多資訊以及更多資訊。
“号召性用語”按鈕的目的
号召性用語按鈕可以提供多種功能。 畢竟，“呼籲采取行動”确實有點含糊。 這意味着它的主要目的是使您的站點的通路者做某事 。 那可能是将某種産品添加到他們的購物車中，下載下傳了一些東西，請求了資訊或幾乎其他任何東西。
由于号召性用語按鈕的用途如此多樣，是以必須對按鈕的目标進行很多考慮。 網站的類型，目标市場和所需的操作都可以在如何最好地設計号召性用語中發揮作用。
“号召性用語”按鈕的類型
号召性用語按鈕有幾種不同類型。 盡管每種類型都旨在讓通路者執行特定的操作，但是該操作可能會發生很大的變化。 下面是最常用的号召性用語類型，具體取決于他們希望您執行的操作。
1.添加到購物車按鈕
電子商務網站通常使用許多号召性用語按鈕，但是使用最廣泛的是“ 添加到購物車 ”按鈕。 這些按鈕通常顯示在各個産品頁面上。 他們的目的是吸引顧客購買物品。 添加到購物車按鈕中的常見設計元素包括簡單的措辭（例如“ 添加到購物車 ”或“ 添加到購物 袋 ”或“ 立即購買 ”）和使用圖示（通常是購物袋或購物車）。
2.下載下傳按鈕
下載下傳按鈕類似于添加到購物車按鈕，因為它們試圖誘使通路者擁有某項物品。 對于下載下傳按鈕，許多設計人員選擇包含比其他類型的按鈕更多的資訊（例如版本資訊或下載下傳大小）。
3.試用按鈕
一些網站嘗試以免費試用的形式來誘使通路者試用其産品。 這可以是免費下載下傳或免費帳戶，具體取決于特定站點。 一些站點使用“少即是多”的理念，并将按鈕上的語言保持在最低限度，而其他站點則希望提供有關試驗内容的更多資訊。
4.了解更多按鈕
了解更多資訊通常在一段預告片資訊的末尾使用按鈕（通常在首頁上）。 這些按鈕通常很簡單，但通常尺寸過大以吸引通路者的注意力。
5.注冊按鈕
注冊按鈕最常出現在兩種不同版本中。 第一種類型通常直接與系統資料庫單相關聯。 第二種類型通常以類似的方式用于“添加到購物車”按鈕，作為使用者在實際到達系統資料庫單之前購買或注冊服務或帳戶的一種方式。
還有其他類型的号召性用語按鈕，但這是最常見的。 适用于上述内容的指南也可能會适用于您正在設計的任何其他類型的号召性用語按鈕。
有效利用負空間
您希望号召性用語按鈕從周圍的内容中脫穎而出，并真正引起站點通路者的注意。 為此，您需要在這些按鈕周圍使用負号空間。 在您的内容和号召性用語之間添加空格。 盡管這在某些按鈕（例如添加到購物車按鈕）上不太重要（也較不常見），但在其他按鈕（如需了解更多資訊）上，它們在更大的空間上效果更好。
平衡按鈕周圍的負空間量和按鈕本身的大小非常重要。 這是關于比例。 您希望按鈕，按鈕周圍的空間以及周圍的内容看起來都一樣，即使它們之間存在大小差異。 為了使它們看起來恰到好處，您可能必須在事情上擺弄一些。
- 確定按鈕周圍有足夠的空間，以免混亂
- 在确定要包含多少空間時，請考慮三分法或黃金分割率等原則
- 負号空間使您可以使用号召性用語來突出其他内容并将其與衆不同
大小和顔色
号召性用語按鈕的大小非常重要。 太大的按鈕會壓倒周圍的一切。 太小的按鈕會迷失在頁面上的所有其他内容中。 您希望按鈕足夠大以在不壓倒設計的情況下脫穎而出。
顔色可以發揮很大的作用，以幫助平衡按鈕的大小。 對于較大的按鈕，請選擇在您的設計中不太突出的顔色（但仍會突出背景）。 對于較小的按鈕，您可能希望選擇更亮的對比色以真正使按鈕彈出。 在任何一種情況下，請確定您使用的顔色将按鈕分開，而不與網站的整體設計相沖突。
- 理想情況下，号召性用語按鈕應該是給定頁面上最大的按鈕
- 使用對比色使較小的按鈕更加突出
- 使用較少的不同顔色，使超大按鈕更合适
- 号召性用語按鈕需要引起注意，而又不會使您的設計不知所措
語言
您選擇在号召性用語上使用的确切字詞會對轉化産生巨大影響。 将“ 立即購買 ”與“ 添加到購物車 ”進行比較。 一個比另一個更緊迫。 或者怎麼樣“ 免費試用 ”和“ 免費試用 “？ 一個比另一個強得多，而且更加突出。
您在号召性用語按鈕上使用的語言應盡可能簡單明了。 您希望通路者一眼就能知道他們在單擊按鈕時會得到什麼。 如果他們提出疑問，則表示他們已經暫停，這可能會導緻轉化率降低。
也不要忘記您的字型大小。 号召性用語按鈕上的文本應大而粗體，以适合按鈕本身的大小和顔色。 確定有足夠的對比度，并且文本易于閱讀。
- 使用簡單直接的語言
- 在按鈕上為主要文本使用大膽的字型
- 確定語言明确要求采取特定行動
創造緊迫感
您希望網站上的通路者盡可能少地思考并執行所需的操作。 當您不想欺騙訪客時，您給他們更多機會停下來考慮他們在做什麼，您給他們更多機會說“不”。
您希望按鈕給他們一種印象，即他們需要立即采取行動。 您想鼓勵他們立即做出決定。 盡管這對每個号召性用語按鈕（特别是那些購買高價商品的按鈕）都無效，但對于低成本或免費的操作而言，希望通路者點選時少先考慮。
- 鼓勵您的訪客立即采取行動
- 不要給訪客任何暫停的理由
- 緊迫性很重要，但不要以任何方式誤導訪客
提供額外的資訊
在适當的地方，使用号召性用語按鈕為通路者提供更多有關他們單擊按鈕後将獲得的資訊。 這最常見于試用按鈕或下載下傳按鈕。 額外資訊的常見示例包括免費試用将持續多長時間或檔案下載下傳的大小。 版本資訊也很常見。
包含其他資訊時，請記住，您需要重點關注實際的号召性用語。 確定誘使通路者采取行動的語言文字最為突出，而其他資訊則不太明顯。
- 僅在增加使用者體驗時才包括其他資訊
- 額外資訊僅适用于某些類型的号召性用語按鈕，尤其是下載下傳或試用按鈕
- 確定号召性用語仍然是按鈕上最醒目的文字
優先排序
如果頁面上的号召性用語按鈕不止一個，則必須對其進行優先排序。 這可以通過多種方式完成，但是最常見的是通過使用顔色和大小。
使用顔色突出顯示頁面上最重要的按鈕，或使次重要的按鈕看起來不太突出。 或者使用尺寸使最重要的按鈕突出（使其變大），而不再強調次要的按鈕。
圖示和圖像
在号召性用語按鈕中包含視覺提示也可以幫助提高轉化率。 例如，“添加到購物車”按鈕上的購物車圖示或下載下傳按鈕上的箭頭都是很好的例子。 也可以考慮使用獨特的圖示，但是要弄清楚該按鈕的用途，確定該圖示增加了使用者體驗，并且不會造成任何混淆。
- 確定您使用的圖示有助于闡明按鈕的含義，而不是造成混淆
- 易于識别的圖示可以立即向通路者訓示含義
- 隻要它們的含義仍然清楚，就不要害怕使用不太常用的圖示
例子
這裡有一些很好的号召性用語示例 。 盡管它們都不完全符合上述準則，但它們滿足了足夠的标準，被認為是出色的。
現場直播
區分“立即購買”（用于付費選項）和“注冊”（用于免費選項）按鈕是一個不錯的政策。
視窗
綠色的大“ Get Windows7”按鈕很容易讓訪客發現。
檔案共享總部
此處的亮綠色按鈕在白色背景下确實脫穎而出。
日志
為“下載下傳”和“購買”按鈕使用不同的顔色将它們分開設定，并優先使用“購買”按鈕。
TasteBook
此按鈕充分利用了圖示，并使用較大的粗體文本突出顯示。
好家夥
另一個亮綠色的号召性用語按鈕。
生命樹創意
從正文到調用按鈕繼續使用相同的字型，會産生凝聚力。
恢複器
帶有紅色字型的亮紅色号召性用語按鈕在藍色背景下顯得特别突出。
筆記本
在号召性用語按鈕中包含額外資訊的一個很好的例子。
墨水
優先考慮大小按鈕的一個很好的例子。
優雅的主題
使用顔色脫穎而出而不與周圍的設計元素沖突的另一個出色示例。
ZenDesk
另一個使顔色脫穎而出的好例子。
Storenvy
圓形按鈕出人意料并且突出，尤其是在被白色邊框包圍時。
巴拉瑪
有時，混合使用的按鈕在您的整體網站設計中會更好，特别是在操作不太緊急時。
翻譯自: https://www.hongkiat.com/blog/call-to-action-buttons-guidelines-best-practices-and-examples/