如何設計出高轉化率的CTA按鈕?先學會這8個方法

語言: CN / TW / HK

關注 ▲Clip設計夾 後台 回覆“ 進羣 加入設計成長羣

設計夾的第 112 篇文章分享 

大家好 ,這裏是設計夾 今天為大家分享的是 CTA按鈕

首先,什麼是 CTA 按鈕呢?CTA全稱 Call-To-Action ,是行為召喚按鈕,是 App和網頁設計中的關鍵UI元素。

根據需求的不同,CTA按鈕的樣式和大小會有所區別。CTA 按鈕常用到的 場景 有很多,例如在購物場景中,引導用户添加到購物車;引導新用户登錄/註冊來獲取更多信息;在訂閲類產品中,引導用户點擊訂閲……

雖然CTA 按鈕的樣式和使用場景有很多,但其核心目標都是一樣的: 引導用户採取行動,使頁面提升轉化,進而為產品帶來價值。

接下里通過這些設計技巧,幫助大家設計更好的CTA 按鈕,來提高設計轉化率~

    使用清晰有價值的提示文案

頁面中的CTA 按鈕通常帶有明確的目的,比如註冊、訂閲等等,因 此在 CTA 按鈕 上儘量不要使用“提交”或“發送”這類含義太寬泛的提示文案。

相反,最好 使用與 當前的操作精準匹配的明確提示 ,例如引導用户訂閲某個話題時,在CTA按鈕上使用“立即訂閲”會比使用“提交”更清晰。

這個設計點很小,而且文案基本上產品是產品提供,可能很多設計師不會太在意這些比較細的文案。

但清晰的提示文案能夠第一時間告訴用户,他們點擊按鈕能實現的目標,所以這個設計點值得被大家重視。

  讓CTA按鈕更明顯

按鈕有描邊、填充、文字鏈接等很多種樣式,而CTA作為一個更明顯的操作按鈕,可以考慮使用一些 醒目的、對比度高的填充顏色 ,與其他功能的按鈕區分開。

Tips:  儘量不要將最主要的 CTA 按鈕與頁面中的其他元素或者背景混合在一塊,以免降低用户的注意力。  

    確保CTA有較大的觸發區域

不要把 CTA 按鈕設計的太小,可以 適當的突出和放大,和常規的按鈕有明顯的區別。 在web設計中,在保持按鈕寬度不變的情況下適當增加 高度,讓按鈕變得更容易觸發。  

    為按鈕增加效果

避免頁面中的 CTA 按鈕看起來過於單調。

可以為按鈕添加 圓角、陰影 等基礎的效果, 或者使用圖形化的形式來豐富按鈕, 讓CTA 按鈕看起來更有趣,這樣用户才會更願意點擊。

    證文案簡潔明確

用户的注意力很寶貴,在設計過程中我們要利用這個特點,確保 CTA 按鈕的文案簡潔清晰,用簡短但吸引人的文案快速到達目的。  

    為CTA按鈕添加提示

有些頁面設計中,是把整個圖片當做CTA按鈕,例如產品詳情卡片或者瀑布流卡片。在這樣的場景中,當鼠標懸浮到卡牌上時, 為圖片添加文字提示 ,幫助用户更清楚地瞭解內容。

    用“我”代替“你”

根據研究顯示,在按鈕中使用“我”、“我的”這樣的 第一人稱文案 會比使用 “你”、“你的”更有效,從而提高轉化率。

因為點擊購買和操作的主要驅動力是我們自己的情緒 。在CTA按鈕中使用第一人稱可以將個人利益與行動聯繫起來,從而增加情感化的影響。

    添加描述性説明

有時候光靠一個 CTA按 鈕可能告訴用户 更多產品的亮點或者點擊後的好處。 在這樣的情況下,可以為CTA按鈕額外添加描述性的説明,加大用户點擊的預期。

這類描述性説明要根據產品的特點而定,重點突出能夠吸引用户的地方,例如能 為用户帶來方便,或者 能讓用户看到優點,進而觸發用户點擊。

最後

以上就是能夠提升轉化率的 CTA按鈕設計 方法 ,希望通過這些方法能讓你對CTA按鈕有全新的瞭解和學習。

最後,設計夾整理了一份 交互設計説明和自查清單 ,方便大家在設計工作中查缺補漏。需要的小夥伴在公眾號後台回覆 自查 ,即可領取~

慢慢來比較快,希望對你有幫助!

領取方式:

1) 在看&轉發 讓更多 小夥伴看到這篇文章

2)公眾號後台回覆  自查  獲取交互説明和自查清單

添加微信, 邀你進設計成長羣 :star2:

Tips:  這裏會持續更新設計乾貨,包括但不限於交互日記、設計法則、答疑解惑、讀書筆記…感興趣的同學可以掃碼加入,一起成長! :arrow_down: :arrow_down: :arrow_down:

:fire: 文章合集

致2021:設計文章合集

致2020:設計文章合集