UI 頁面通常由許多不同的元素組成，它們中的每一個元素都在用戶體驗的效率提升以及 App 的轉(zhuǎn)換方面扮演著重要作用。即使像按鈕這樣的小部件也需要得到關(guān)注，以便它能夠?qū)崿F(xiàn)預(yù)期目標。

什么是 CTA 按鈕？

CTA 全稱 Call-To-Action ，它是 Web 和 App 上的關(guān)鍵 UI 元素，例如購買，聯(lián)系，訂閱等，其主要目的是引導(dǎo)用戶采取某些行動，使頁面提升轉(zhuǎn)化。

用戶的引導(dǎo)和轉(zhuǎn)化是 CTA 按鈕的核心目的，當一個按鈕足以引起潛在用戶的注意時，它才可以吸引用戶點擊并進入下一個流程。我們設(shè)計一個功能強大的 CTA 按鈕比較重要的方面包括但不限于尺寸、顏色、形狀、位置等。

按鈕就有更高的機會來完成它的目標和任務(wù)，但是如何在這些方面變得更加強大？

我們有一些關(guān)于 CTA 按鈕設(shè)計的實用技巧與你分享。

1.使按鈕看起來可點擊

任何 CTA 的先前任務(wù)就是讓用戶點擊它，所以他們的設(shè)計應(yīng)與目標一致，我們的用戶不想一上來就得先弄清哪些元素是可點擊和互動的。這就是為什么確保所有交互式元素都可以點擊是很重要的原因。

什么可以使按鈕看起來可點擊？

首先，它是一個視覺表現(xiàn)形式，當 UI 設(shè)計師添加一些 3D 效果時，按鈕看起來更容易點擊。

例如，具有輕微漸變或小陰影的 CTA 通常會帶來點擊欲望，因為它看起來更加突出。如果具有 3D 效果的按鈕不適合所選風(fēng)格，例如平面設(shè)計，則可以通過按鈕的圓邊來強調(diào)可點擊性。

2.選擇合適的尺寸

尺寸的大小是幫助根據(jù)其重要性安排 UI 組件優(yōu)先級時最常用工具之一，元素越大，它變得越明顯。

前面說過由于 CTA 的先前目標是吸引用戶的注意力，因此我們通常會試圖讓它們在屏幕上在所有其他按鈕中脫穎而出，特別是通過明顯的尺寸。

大按鈕有很高的機會被發(fā)現(xiàn)和點擊，但你必須保持一些限制：一個引人注目的引導(dǎo)性按鈕通常足夠大，可以快速找到，但又不會太大，以免布局的視覺構(gòu)圖和層次結(jié)構(gòu)受到損害。

市場領(lǐng)導(dǎo)者通常會在其準則中提供有關(guān)按鈕有效大小的建議。 例如，蘋果公司表示：移動用戶界面中的 CTA 應(yīng)至少為 44×44 Pixels，而微軟推薦 34×26 Pixels。

3.應(yīng)用對比色

顏色的選擇我們可以考慮如下因素——如主視覺色，以及目標受眾的潛在偏好和心理特征，在為 CTA 按鈕選擇顏色時有一個條件非常重要：按鈕和背景顏色應(yīng)該足夠反差，以便 CTA 能夠從其他 UI 元素中脫穎而出。

例如，如果設(shè)計師在布局中使用藍色調(diào)色板，那么為CTA按鈕使用紅色或黃色將是一個好主意。

4.更少的文字

CTA 按鈕的引導(dǎo)文案會提示用戶如果點擊他們將獲得什么收益，文案必須迅速吸引用戶的注意力，并引導(dǎo)他們正確行動。

所以要給出有效的引導(dǎo)性文案，您需要將成語數(shù)量保持在最低限度，少數(shù)適當選擇的單詞比長描述性短語的要高效的多。

5.符合用戶的心理預(yù)期

大尺寸和鮮艷的色彩是吸引用戶注意力的有效方法，但在操作流程中（用戶在產(chǎn)品中完成特定任務(wù)的路徑），恰當?shù)奈恢每梢栽黾痈嚓P(guān)注 CTA 按鈕的機會。

例如，創(chuàng)建著陸頁時，您需要確保用戶在閱讀有關(guān)優(yōu)惠或服務(wù)的信息后馬上就能找到“注冊” CTA 按鈕，這樣用戶就能理解他們正在注冊的內(nèi)容以及他們是否需要它。 如果人們在閱讀信息之前看到這樣的 CTA 按鈕，他們很可能會忽略它。

6.運用留白

空間留白也稱為負空間，是設(shè)計構(gòu)圖中元素之間的區(qū)域。我們通常不會意識到這個空間的重要作用，但做為設(shè)計師需要注意它。

白色空間不僅僅是視覺構(gòu)圖的背景，它經(jīng)常被用作強調(diào)用戶界面元素的有力工具。如果用戶界面包含許多可視組件，則 CTA 按鈕可能會在頁面或屏幕上丟失，按鈕周圍的適當留白空間有助于吸引用戶的注意力，因為它變得更加明顯。

另外，空白區(qū)域映射了 UI 元素之間的連接，各組件之間的空白區(qū)越少，它們看起來就越連接緊密。因此，如果有些元素可以帶有引導(dǎo)性的文案，例如項目說明或照片，請嘗試減小它們與按鈕之間的空間，以便為用戶的操作提供雙重效果。

7.添加一些額外有效信息

正如我們上面所說的：保持 CTA 信息的短小是非常重要的，這樣可以很快引起用戶的注意。但是當用戶注意到引導(dǎo)文案時，提供一些額外的數(shù)據(jù)可能也是有用的。

它可以是一小部分信息，解釋下一階段的情況。例如，您可以澄清注冊過程不會超過15秒或提醒注冊是免費的，一小句話可以增加用戶的興趣并鼓勵他們采取行動。

8.A/B Test

如果你想確保一切正常，你需要測試它。這個黃金法則是包括 UI 設(shè)計在內(nèi)的各個領(lǐng)域的必備條件，用戶研究和分析有助于設(shè)計人員定義目標受眾的具體情況，但很難準確知道設(shè)計決策是否最好。這就是為什么測試可以成為幫助消除疑慮的充分解決方案。

A / B測試是最有效的 CTA 測試方法之一，它通過數(shù)據(jù)比較產(chǎn)品的兩個版本，以找出哪一個更好。

比如我們將用戶分成兩組，每組都顯示不同的內(nèi)容， 一半看到 A 版本，另一半看到 B ，這種方法有助于確定更有利的解決方案。

為了獲得更準確的結(jié)果，建議每次測試一個方面，例如，只有一個按鈕的顏色， 這樣我們就可以區(qū)分哪個因素最終會有所作用。

原文作者：Tubik Studio

原文鏈接：https://uxplanet.org/ux-practices-8-handy-tips-on-cta-button-design-682fdb9c65bc

#專欄作家#

孟大偉，微信公眾號：iThinkBigger，人人都是產(chǎn)品經(jīng)理專欄作家。前百度高級產(chǎn)品經(jīng)理，從用戶需求（在一大堆很酷的設(shè)想中砍掉當中的絕大一部分）到產(chǎn)品定義（有價值且符合公司戰(zhàn)略發(fā)展），從產(chǎn)品原型到視覺設(shè)計，從交互到動效。

本文由@孟大偉 翻譯發(fā)于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。

題圖來自作者