按鈕設計指南：如何設計可轉換的按鈕

為什麼要編寫按鈕設計指南？ 按鈕有那麼重要嗎？ 為什麼要在用戶界面的這麼小的部分上花費如此多的精力？

雖然按鈕在網頁設計中很常見並且看起來很簡單，但它們的重要性不應被低估。 它們是執行非常重要職責的重要站點元素。

尤其是作為主要的號召性用語和電子商務網站，按鈕確實會影響底線。 然而，作為社交分享按鈕，電子郵件註冊和表單提交按鈕也是網站成功的核心。

出於這個原因，在本文中想詳細討論這個經常被忽視的設計元素以及如何為 WordPress 網站創建高轉換按鈕。 雖然重點將放在 CTA（號召性用語）上，但我們還將討論有關按鈕設計的許多一般性建議。

該主題是否按下了按鈕？ 然後繼續閱讀。

在開始之前，先簡單介紹一下 A/B 測試

下面，我們將介紹一些創建和使用按鈕的明確指南。 這些原則將幫助您思考網站上任何按鈕的設計、定位和其他重要屬性。

但是，同時重要的是要記住，這只是提高轉化率的基礎。 設計原則可讓您對什麼會起作用進行有根據的猜測，但要真正知道哪種按鈕是將訪問者轉化為訂閱者、購買者的關鍵，否則就在於測試。 運行 A/B 測試可以讓您弄清楚什麼對您的網站真正有效，訪問者對哪些按鈕顏色、副本、位置和其他標記做出最佳響應。

因為一切都很重要。 即使是最小的變化也會對轉化率產生驚人的巨大影響——無論是正面的還是負面的。 仔細閱讀這些示例以了解我在說什麼。

因此，雖然我們的按鈕設計指南將幫助您了解最佳實踐，但最好輔之以健康的實驗，以找到使您的網站取得成功的最佳組合。

如何設計用戶實際點擊的按鈕

在此警告之後，我們現在轉向製作性能良好的按鈕以更好地號召性用語和提高轉化率。 享受！

設計它們以適合您的品牌或網站

在進入功能設計之前，重要的是要考慮按鈕出現的上下文。 如果它搞砸了您的網站，那麼創建完美的按鈕是沒有用的。

出於這個原因，雖然下面的指南很重要，但它們的結果與其出現的上下文很好地集成也很重要。這意味著您的按鈕適合您網站的調色板、樣式和整體設計指南。

雖然您希望按鈕突出以提示操作，但目標是讓它們以積極的方式突出。 這意味著一種與整體設計相協調且不會破壞它的設計。

同時，不要害怕嘗試一下。 有時，對比色的按鈕正是為原本平淡的設計增添趣味所需要的。

使按鈕看起來像按鈕

設計被點擊的按鈕的第一步是讓它們看起來像按鈕。 如果用戶不明白他們應該利用它們，那麼號召性用語和共享選項就毫無用處。

用戶對按鈕設計有一定的期望。 如果您根本不滿足它們，他們將很難採取所需的行動。 因此，重要的是包含有助於他們理解的視覺提示。

第一個線索是形狀。 按鈕最常見的形狀是矩形或帶有圓角的矩形。 計算機用戶已經接觸這種設計很長時間了，因此非常熟悉它。

來源：維基百科 經微軟許可使用

當然，其他形狀也是可能的，包括正方形、圓形、三角形甚至自定義形狀。 事實上，有很多古怪和不尋常的按鈕的例子，例如在 dribbble

使用不那麼傳統的形狀是有意義的，以保持您的網站設計一致。 然而，正如 Apple 的 iOS 用圓角方塊所證明的那樣，這並不意味著它不起作用。

圖片來自 Ienjoyeverytime/shutterstock.com。

無論您選擇什麼，只要確保保持一致即可。 避免為不同的按鈕使用不同的設計。 這不僅可以提供更好的 UI，還可以確保用戶能夠識別整個站點中的按鈕。

另一個重要的設計提示是陰影和高光。 陰影已成為顯示元素可點擊或可點擊的通用提示。 甚至其他平面設計也將它們用作功能的信號。

資料來源：Material.io

提供清晰的標籤

除了基本設計，清晰的標籤對於按鈕的使用也很重要。 沒有標籤，用戶就無法確定他們在做什麼。

標籤不一定要寫，圖標也可以工作（見社交分享按鈕）。 兩者一起使用是另一種可能性，尤其是在與電子商務相關的按鈕上。

圖片由 Prixel Creative/shutterstock.com 提供。

重要的是用戶可以理解他們點擊按鈕的行為會產生什麼影響。 如果他們不這樣做，他們可能一開始就避免這樣做。

以下是清晰標籤的一些指南：

• 具有描述性和具體性
• 使用動作動詞，例如註冊我、提交表格、創建帳戶
• 直接聯繫用戶
• 用“現在”或“今天”等詞營造緊迫感
• 保持簡單明了

當涉及到 CTA 時，標籤特別重要。 只需更改幾個單詞即可對按鈕性能產生重大影響。 例如，Unbounce 只需將按鈕副本從“開始您的 30 天免費試用”更改為“開始我的 30 天免費試用”，點擊率就提高了 90%。

是的，這就是一個詞的力量。

將按鈕放在用戶可以找到的地方

這真的是不費吹灰之力。 如果您的用戶找不到您的按鈕，將很難點擊它們。 因此，影響其有效性的另一個因素是位置。

有一些約定。 例如，主要的 CTA 通常會喜歡首屏。 這是有道理的，現在用戶已經預料到了。

資料來源：Netflix

其他類型的按鈕也是如此，在這些按鈕中，用戶已經接受過特定位置的培訓。 例如，上一個和下一個按鈕通常按左右順序排列。

由於這在公眾意識中根深蒂固，顛倒順序可能會使訪客感到沮喪並導致他們離開。 這是你最不想要的。

然而，對於具有更靈活位置的按鈕，例如社交分享按鈕，考慮將它們放在哪裡是最重要的。 例如，您可能認為在文章末尾放置社交按鈕是個好主意。 這樣，用戶可以在完成後分享帖子，對嗎？

然而，大多數讀者甚至沒有讀到你的文章的結尾。 因此，更好的主意是將按鈕放置在閱讀體驗的任何時候都可以訪問的位置。 一個這樣的例子是 Monarch 浮動側邊欄：

如有疑問，按鈕放置的一個很好的經驗法則是問問自己用戶接下來會看哪裡。 設計應該引導用戶走他們的路，所以按鈕可以成為他們在整個網站上的路徑的合乎邏輯的結論。

注意尺寸和間距

現在我們來到一個在移動設計中特別重要的話題。 與使用鼠標的人相比，通過觸摸與您的網站進行交互的人的行動不那麼精確。 出於這個原因，您需要讓他們能夠毫無問題地使用和到達按鈕，也沒有點擊錯誤按鈕的危險。

資料來源：蘋果

第一步是確保您的按鈕足夠大。 人的平均指尖有 8-10 毫米大。 因此，Apple 建議讓觸摸使用的元素至少為 44 像素 x 44 像素（使用點而不是像素用於視網膜顯示）。 其他製造商的建議也圍繞 10 毫米標記。 當然，針對桌面使用的網頁設計可以稍微減小尺寸。

同時，您需要考慮按鈕之間的間距。 你不想讓用戶感到沮喪，因為他們不小心推送了他們不想要的東西。 充足的空間也使元素更容易被發現，這對於主要的號召性用語很重要。

提供反饋信息

一旦按鈕或您的網站可以識別並可用，就該考慮實際調用它們的時刻了。 按鈕可以有幾種存在狀態：

• 正常- 可識別為按鈕，表示能夠被點擊
• Focused — 將鼠標懸停在其上時發生變化，向用戶確認該操作是可能的
• Pressed - 進一步更改以獎勵用戶採取行動並確認正在發生的事情
• 忙碌——當動作在後台發生時，按鈕可以反映
• 已禁用- 表示可以執行其他操作，只是目前不行

資料來源：Material.io

通過向用戶提供使用按鈕的視覺反饋，您可以使交互更清晰、更愉快。 對於其他類似的想法，請查看關於微交互的文章。

善用對比度

並非所有按鈕都生而平等。 雖然著陸頁可能有多個鏈接可供點擊，但應該只有一個真正重要。

使訪問者清楚這一點的工具是顏色、對比度和位置。 有效地使用它們來吸引註意力並讓用戶點擊。

通過對比界面其餘部分的按鈕，您可以使它們更加引人注目。 除此之外，它還避免了它們在其他元素中丟失。

說到顏色，沒有最好的選擇。 同樣，這裡在很大程度上取決於您自己的設計。 一個好的經驗法則是使用對比色並從那裡開始。 有關該主題的更多信息，請查看我們關於顏色匹配技術的文章。

除了顏色之外，您還可以使用不同的方式來引入對比度，包括大小、排版和留白。 按鈕顏色與文字的對比可以進一步提升效果，讓文案更清晰易讀。 結合突出的位置，這些使按鈕真正流行。

資料來源：Prezi

要確定您的號召性用語是否引人注目，請使用古老的“斜視測試”。 應用設計，從屏幕上走幾步，瞇著眼睛看看你的按鈕是否突出。 我知道，這聽起來不太專業，但確實有效！

你在測試你的#CTA 嗎？ 這是判斷您的號召性用語是否突出的最佳方式。 http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

- 設計泡菜 (@designpickle) 2015 年 7 月 25 日

對比按鈕對於在它們之間建立順序也很重要。 當有兩個或更多選擇時，更強烈的顏色可以表示您更喜歡或建議訪問者選擇哪一個。

來源：Quicksprout

加起來

按鈕是網頁設計中一個核心但經常被忽視的元素。 不該如此。 尤其是以號召性用語的形式，它們可以對轉化率、點擊率和其他重要的成功標誌產生巨大影響。

因此，不應掉以輕心的按鈕設計和放置主題。 回顧一下，為了創建有效的按鈕：

• 確保它們適合您的整體設計
• 確保用戶可以將它們識別為按鈕
• 提供清晰的標籤
• 將它們放在用戶可以找到的地方
• 注意尺寸和間距
• 使用時提供反饋
• 讓他們從網站的其餘部分中脫穎而出

這些指南將幫助您設置用戶忍不住點擊的按鈕。 但是，正如開頭所提到的，這些最佳實踐旨在作為起點。 要真正弄清楚哪些按鈕適用於您的網站以及如何提高轉化率，按鈕設計應始終與徹底的 A/B 測試齊頭並進。 幸運的是，我們還有一篇關於該主題的文章。

您在按鈕設計方面的經驗是什麼？ 有什麼重要的要添加到上面嗎？ 請在下面的評論部分告訴我們！

BerryCat/shutterstock.com 的文章縮略圖