CTA按鈕設計之終極生存指南

以下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

現代行業發展越來越多地和優質的設計建立聯系，尤其是電子產品行業。它們總是千方百計地吸引用戶。這些電子產品的UI界面就成了兵家必爭之地，哪怕只是一個小小的Call to Action (CTA)按鈕。

Investopedia 對CTA的介紹：

行為召喚（CTA）是一種營銷術語，是指營銷人員希望其受眾或讀者采取的下一步措施，通常以按鈕的形式展現，并可以直接鏈接到銷售頁面。

簡而言之，CTA就是你希望你的網站訪問用戶采取的下一步行動。

以下是一些常見的CTA設計技巧分析和案例分享。希望對你有所啟發。

具有吸引力的文案

Copyblogger的Brian Clark用他的經驗很好地闡釋了文字的力量。曾有一個案例， 社會心理學家艾倫·蘭格（Ellen Langer）要求插隊使用復印機。 她嘗試了三種不同的詢問方式：

• 抱歉，我有五頁。 我可以用一下復印機嗎？ - 60％的人表示勉強可以

• 
  

• 抱歉，我的內容只有五頁。我有急事， 可以先用一下復印機嗎？ - 94％的人表示可以

• 
  

• 抱歉，我的內容只有五頁。 因為必須復印一些文件，我可以先用使用一下復印機嗎？ - 93％的人表示可以

• 
  

作為一個觸發詞，“因為”的強調作用幾乎可以讓你忽略其后面的“原因”。

因此，我們可以得出這樣一個結論：相比長篇大論，某些詞匯更能有效地說服人們。

專家表示，文案中加入一些帶有感情色彩的詞匯更能增加說服力。

例如，上面截圖中，Slack的CTA充分利用了free的雙重含義：不僅試用免費，而且行動自由和選擇自由都會潛移默化地影響用戶的行為。

許多網站的CTA利用其具有操作性的文案引導用戶采取特定的行為。因為這些文案不僅有指導作用，同時也回答了用戶為什么需要點擊該按鈕的原因。

大多數成功的公都采用漸進式的文案，例如：“免費試用”、“了解更多”、“搶先體驗”、“入門”等，并通過對CTA按鈕添加強調效果提升轉化率。

對比色

CTA按鈕是馮·雷斯托夫效應的最佳例證。 馮·雷斯托夫效應，也稱為“隔離效應”，預測當存在多個相似物體時，最與眾不同的那個最有可能被記住。

這也是為什么在日常設計中，CTA按鈕總是在一排相似的按鈕中脫穎而出的最重要原因。

體驗摹客在線原型設計

VisualEyes 插件生成的視覺熱力圖

顏色是影響按鈕隔離效果的第一因素。建議經常使用對比色來吸引用戶注意，使主要操作按鈕更加突出。

首先，你應該確保按鈕的顏色、視覺效果、排版是協調一致的。按鈕的可讀性、易讀性和對比度非常重要，需要事先進行測試。可以借助Stark在設計過程中測試按鈕的對比度。

如Stark插件顯示，精美的漸變或鮮艷的色彩并不總是作為對比色的最佳方案！

此外，關于對比度的方法不僅僅適用于按鈕元素本身。 功能強大的CTA按鈕也應具有足夠的對比度，并且在整個界面中凸顯出來。

在這方面，Sketch app的著陸頁就是一個完美的示例。它很好地展示了CTA按鈕與頁面色彩對比的重要性。它不僅尊重其自身品牌，而且還創建了醒目的CTA按鈕來吸引大多數訪問者的注意力。

簡而言之，在這種情況下，這個按鈕對用戶是非常具有吸引力的！

Sketch App著錄頁

VisualEyes 插件生成的Sketch App頁面視覺熱力圖

尺寸適度

CTA按鈕的尺寸和位置在其可視性和可訪問性中起著至關重要的作用。而按鈕的尺寸大小受許多因素的影響。

通過對按鈕大小和間距的研究，總結出了一種適用于大多數用戶（包括老年人）的標準。

研究表明，42-72像素之間的按鈕準確率最高。 也就是說，最適合用戶的最小按鈕尺寸是42像素，最大按鈕尺寸是72像素。

過大的按鈕會因為其過于引人注目，而讓用戶忽略了網站所提供的服務。這對網站頁面來說是一個非常大的影響。而將按鈕設置得太小，則會嚴重影響其可訪問性。沒有什么比按鈕太小而無法觸及更讓人崩潰的了。

移動端的按鈕設計則面臨著另外一個問題: 由Scott Hurff提出的“為拇指而設計”。

這是一個值得高度重視的問題。在設計中，應該在我們的拇指自然弧形范圍內構建最舒適的使用界面。

不同iPhone尺寸設備上的拇指區域熱圖

顯然，“CTA”按鈕應該以一種舒適的方式被觸發。因此，參考``拇指區''熱圖，設計師可以輕松地為他們的CTA按鈕選擇最合適的位置。 由此一來，在應用程序的“自然區域”內，按下按鈕的機會可以成倍增加。

順其自然

用戶在使用頁面內容時遵循的直接路徑非常重要。 以一種鼓勵自然閱讀的方式來排列文案和按鈕，你可以輕松地引導你的用戶到達CTA按鈕。

上述陳述與流行的菲茨定律是一致的。 獲取目標的時間取決于目標的距離和大小。

 因此，在用戶流程的末尾放置CTA按鈕，可以大大減少轉化的阻力。

Airbnb用戶流程&CTA按鈕

  VisualEyes 插件生成的用戶流程視覺熱力圖

仔細觀察不難發現，最常見的眼睛掃描圖案呈F形。近期的眼動追蹤研究表明，無論在臺式機還是移動設備上，F形掃描模式是當今最普遍的視覺運動方式。

這種閱讀模式更多地取決于人類的行為，而不是技術，這也表明``搜索''按鈕可能位于左下角。

Airbnb的設計師采用了不同的方法。他們利用Z型布局和Gutenberg（古騰堡）圖，將 CTA按鈕置于終端區域，以消除干擾并鼓勵用戶采取行動。

  當用戶到達表單的右下角時，閱讀或“頁面掃描”過程中斷，用戶需要采取行動。這是插入CTA按鈕的最佳位置。

總結

一般來說，CTA按鈕作為網站界面中最重要的元素，會對公司轉化產生巨大的影響。記住這些基本的設計原則，可以讓你的CTA按鈕設計在頁面中脫穎而出，吸引用戶注意力。

學習工具，但不受限于某種工具。摹客iDoc，高效協作，從產品到開發，只要一個文檔，讓你的團隊高效協作！