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

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

Investopedia 對CTA的介紹：

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

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

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

具有吸引力的文案

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

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

• 
  

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

• 
  

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

• 
  

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

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

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

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

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

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

對比色

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

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

體驗摹客在線原型設(shè)計

VisualEyes 插件生成的視覺熱力圖

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

首先，你應該確保按鈕的顏色、視覺效果、排版是協(xié)調(diào)一致的。按鈕的可讀性、易讀性和對比度非常重要，需要事先進行測試?？梢越柚?a href="https://www./" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(66, 152, 186); outline: none medium; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; transition: all 0.2s ease-in-out 0s; word-break: break-all;">Stark在設(shè)計過程中測試按鈕的對比度。

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

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

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

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

Sketch App著錄頁

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

尺寸適度

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

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

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

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

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

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

不同iPhone尺寸設(shè)備上的拇指區(qū)域熱圖

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

順其自然

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

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

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

Airbnb用戶流程&CTA按鈕

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

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

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

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

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

總結(jié)

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

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