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

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

現代行業發展愈來愈多地和優質的設計創建聯繫，尤爲是電子產品行業。它們老是想方設法地吸引用戶。這些電子產品的UI界面就成了兵家必爭之地，哪怕只是一個小小的Call to Action (CTA)按鈕。app

Investopedia 對CTA的介紹：工具

行爲召喚（CTA）是一種營銷術語，是指營銷人員但願其受衆或讀者採起的下一步措施，一般以按鈕的形式展示，並能夠直接連接到銷售頁面。oop

簡而言之，CTA就是你但願你的網站訪問用戶採起的下一步行動。佈局

如下是一些常見的CTA設計技巧分析和案例分享。但願對你有所啓發。學習

具備吸引力的文案

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

抱歉，我有五頁。我能夠用一下複印機嗎？ - 60％的人表示勉強能夠
抱歉，個人內容只有五頁。我有急事，能夠先用一下複印機嗎？ - 94％的人表示能夠
抱歉，個人內容只有五頁。由於必須複印一些文件，我能夠先用使用一下複印機嗎？ - 93％的人表示能夠

做爲一個觸發詞，「由於」的強調做用幾乎可讓你忽略其後面的「緣由」。網站

所以，咱們能夠得出這樣一個結論：相比長篇大論，某些詞彙更能有效地說服人們。spa

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

例如，上面截圖中，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，高效協做，從產品到開發，只要一個文檔，讓你的團隊高效協做！