當前位置:首頁 >  站長 >  網站運營 >  正文

CTA實例教學:怎樣設計一個訪客看了就想點的行為引導按鈕?

 2017-10-30 15:16  來源: A5企業(yè)專欄   我來投稿 撤稿糾錯

  域名預訂/競價,好“米”不錯過

CTA即Call to Action,又叫行為引導按鈕,是一個網站的核心組成元素之一。大部分站長做網站不僅僅是為了給訪客提供一個學習、交流、互動的平臺,更重要的是將訪客轉化為用戶,達成某項他們想要的行為,比如注冊、登錄、訂閱、預約、購買等。好的行為引導按鈕在這一點上很有幫助,它有助于提高用戶的轉化率,增加產品的銷量。然而,現(xiàn)實生活中不少網站上的行為引導按鈕在設計上都有一定的問題,如CTA位置放置錯誤或色彩對比不夠突出等,無法發(fā)揮它應有的作用,減慢訪客的操作速度甚至會帶來最糟糕的結果:用戶根本不會點擊。總之,行為引導按鈕在網站上扮演著十分重要的作用,一個好的行為引導按鈕可以給網站帶來不少益處。那么怎樣的行為引導按鈕才是合理的呢?小飛今天整理了十個行為引導按鈕的范例,希望大家能從它們的巧妙設計或獨特品質中有所收獲、得到啟發(fā)。

MailChimp

事實上,Mailchimp這個網站上有許多行為引導按鈕可以作為范例講解。但是,小飛最欣賞其中一個”立即發(fā)送”的行為按鈕。Mailchimp是一個提供電子郵箱營銷服務的網站,很多電商公司選擇使用這個網站給他們的用戶或合作伙伴發(fā)郵件。在某個公司填寫好相關郵件內容時,會彈出一個"立即發(fā)送"的對話框。其實這個對話框最主要的元素就是"立即發(fā)送"的行為按鈕,其他的文字和圖片都是服務于這個CTA的,尤其是猩猩用手點擊紅色按鈕的圖片,根本不需要其他指示,用戶都知道接下來應該做什么。這種類型的行為引導按鈕很獨特、很直觀,很多用戶都覺得自己在按下”立即發(fā)送”時會獲得一種前所未有的成就感。

Blue Apron

在Blue Apron的網站,訪客也能看見各式各樣的行為引導按鈕。就以下圖中的按鈕"Choose Your Plan"為例,網站使用了易讀的表格,清晰地表明了訪客們可選的的食材,以及獲得這些食物可能的花費,給用戶自主規(guī)劃的權利。另外,免費派送的圖標很有趣。還有很棒的一個設計,那就是它們使用了新鮮瓜果蔬菜的背景圖片,這不僅點明了網站的主題,還能夠引起用戶的食欲,視覺上也很賞心悅目。簡直扎心了!難怪Blue APron 僅用3年實現(xiàn)了從0到20億美元的突破,成為美國凈菜電商的獨角獸。

ManageWP

ManageWP在主頁面放置了"醒目的注冊"按鈕(綠底白字),巧妙地將主頁面的大量元素與CTA相結合:標題簡明扼要;簡短的文字描述告訴用戶網站的經營服務:在這更好的管理Wordpress的網站;背景圖片很有親和力,這一切都提高了用戶點擊行為引導按鈕的可能性。最重要的一點是注冊手續(xù)的簡化,訪客只需要填寫一個郵箱地址就可以注冊登錄。這聽上去是不是很方便?

Spotify

和Blue Apron一樣,Spotify也充分發(fā)揮背景圖片的引導作用(眾多知名歌手的簡略圖),在行為引導按鈕處也突出自己的銷售賣點:用戶可以使用免費版也能夠擇付費版。另外主頁面上的幻燈片也涵蓋了Spotify音樂服務中的其他細節(jié),用戶可以點擊或是滾動了解更多。不少人可能覺得這個網站的行為引導按鈕不是很有創(chuàng)意,也沒有那么突出,其實這就是Spotify的目標所在,相比意料之外的驚訝,Spotify更想讓行為引導按鈕足夠友好,以簡單的方式給予用戶指引。

Zillow

Zillow是美國一家房地產信息查詢公司,它號稱包含了各類地產信息。這點在Zillow首頁的行為引導按鈕上就很明顯:買房、租房、買房或是Zillow估值服務應有盡有。這種行為引導按鈕的設計實在太貼心了,用戶不需要到處瀏覽找尋信息,很容易就能夠獲取想要的信息。應該沒有哪家公司比Zillow更加簡單粗暴的了吧!

B&O Play

作為Bang and Olufsen集團旗下的一個品牌,B&O Play堅持沿用極簡主義的設計,網站的首頁簡潔大氣,行為引導按鈕也是一樣,黑白的配色方案,不管是"瀏覽更多產品"還是"立即購買"都配有一個小圖標,形象直觀。這樣的CTA設計雖然很容易,但B&O Play維持了CTA和網站整體風格的一致,將行為引導按鈕看作是整體品牌的重要組成部分之一,做到這一點實在很難得。

Mercy Corps

如果你在處理一項緊急的事情的時候,你還會遲疑、慢吞吞嗎?Mercy Corps這個網站就營造出了一種迫切感,再加上背景圖片(受災難影響無望的人們)、醒目、嚴肅的標題,訪客們會在第一時間直觀感受到那種痛苦,更可能會點擊"捐贈",盡自己的一份力。除了這種募捐的公益網站以外,其他的網站也可以營造"機不可失、時不再來"的急切感,比如使用"倒計時"或"活動即將截止"等話語讓用戶更快進行購買等行為。

Nest

智能家居品牌Nest是怎樣突出行為引導按鈕"立即購買"的呢?在Nest的主頁,背景圖片是一片星空,配上主要產品(節(jié)約能源的恒溫器)的圖片,很容易讓訪客聯(lián)想到太空中浮動的星球。Nest很聰明的一點還在于它給用戶留下了足夠呼吸的空間,恰當?shù)牧舭鬃屝袨橐龑О粹o更加突出。

Skagen

Skagen是一家銷售極簡主義手表以及其他時尚配飾的網站。它的行為引導按鈕在色彩的運用上很不一般,字體的淡藍色和背景色很和諧,也很簡約。除此以外,按性別分類做出兩個不一樣的行為引導按鈕也有利于訪客根據(jù)自己的需求快速挑選產品。Skagen還教給我們一招:如果你的公司有一款極具代表性的產品,不妨讓它為自己帶鹽吧!

從以上這些栗子中我們可以看出,行為引導按鈕是網站整體形象的一部分,可以與網站上的其他元素很好的結合在一起,不管是簡要切題的文字描述還是獨特的背景圖片都能在一定程度上服務于行為引導按鈕,讓用戶更有點擊行為引導按鈕的欲望。除此以外,網站的行為引導按鈕應該清晰易見,有適合用戶點擊的大小,色彩的應用還有助于行為引導按鈕的突出。不管怎樣,一個好的行為引導按鈕應該將用戶放在第一位,考慮用戶在互動可能想要的結果。簡單直接的行為引導按鈕最能獲得用戶的芳心。看了這么多設計,趕緊看看你的行為引導按鈕是否合格吧!

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關標簽
按鈕設計

相關文章

  • 郵件營銷提高轉化率的訣竅和按鈕設計

    當群發(fā)郵件發(fā)送過去后,公司為促成轉化,在郵件中:1、營造緊迫感:公司推出的系列產品讓利于消費者,比方說8.3、在產品介紹完后便附上下單鏈接:在某產品圖文并茂的介紹后面,迅速附上下單的鏈接,消費者只需輕輕點擊一下,便可進去網站特定欄目,下單購買,幾乎都是一鍵式操作,非常簡單。

  • 淺析在網頁設計中如何讓按鈕激發(fā)用戶點擊欲望

    現(xiàn)在建設網站一個重要的核心要素就是能夠對用戶產生良好的吸引力,能夠引導用戶逐層深入的點擊網站,這樣才能夠有效提升用戶在網站上的停留時間,這樣就能夠有效的為網站培養(yǎng)忠誠用戶打下堅實基礎。對此很多站長開始在網頁設計上下功夫,可是有時候對于一些細節(jié)掌握不當,或者忽略了一些細節(jié),導致網站的吸引力出現(xiàn)了明顯的

  • 移動應用設計:談導航欄返回按鈕的替代方案

    呼,又要夜間上新了。其實自己偶爾還會進去關于BeForWeb里面看看將近兩年前寫的博客開篇語。當時的動力現(xiàn)在仍在,當時愛的那個世界現(xiàn)在仍在愛,并且越來越讓我覺得自豪;這讓我開心了些。周六晚上有在喝冰啤酒的兄弟姐妹嗎,有的話我們虛擬碰個杯吧先,周末愉快=)前

  • 超鏈接和按鈕 設計中默認樣式的強大威力

    默認樣式,就是最原生態(tài)的樣式。就像大家經常用的按鈕或者藍色有下劃線的超鏈接。本文,潛行者m將從兩個元素來討論默認樣式在設計中的應用。超鏈接的默認樣式超鏈接的默認樣式超鏈接是網頁中最常用最基礎的元素,可以說是必不可少的。我們設置超鏈接,也是希望人們

    標簽:
    按鈕設計
  • 網站交互設計:非一般的“取消”按鈕

    取消這個按鈕不屬于操作的必要流程,在設計上也不作為主要元素出現(xiàn)。但在實際的彈框或一些操作應用中經常出現(xiàn),那么這個小小的取消按鈕又有哪些玄機呢?首先我們要先來了解一下取消的概念。取消:我們在提交問題、選擇、進度、信息時需要要求執(zhí)行一個確認動作,這時候

    標簽:
    按鈕設計

熱門排行

信息推薦