當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  網(wǎng)站運(yùn)營(yíng) >  正文

CTA實(shí)例教學(xué):怎樣設(shè)計(jì)一個(gè)訪客看了就想點(diǎn)的行為引導(dǎo)按鈕?

 2017-10-30 15:16  來(lái)源: A5企業(yè)專(zhuān)欄   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

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

MailChimp

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

Blue Apron

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

ManageWP

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

Spotify

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

Zillow

Zillow是美國(guó)一家房地產(chǎn)信息查詢(xún)公司,它號(hào)稱(chēng)包含了各類(lèi)地產(chǎn)信息。這點(diǎn)在Zillow首頁(yè)的行為引導(dǎo)按鈕上就很明顯:買(mǎi)房、租房、買(mǎi)房或是Zillow估值服務(wù)應(yīng)有盡有。這種行為引導(dǎo)按鈕的設(shè)計(jì)實(shí)在太貼心了,用戶(hù)不需要到處瀏覽找尋信息,很容易就能夠獲取想要的信息。應(yīng)該沒(méi)有哪家公司比Zillow更加簡(jiǎn)單粗暴的了吧!

B&O Play

作為Bang and Olufsen集團(tuán)旗下的一個(gè)品牌,B&O Play堅(jiān)持沿用極簡(jiǎn)主義的設(shè)計(jì),網(wǎng)站的首頁(yè)簡(jiǎn)潔大氣,行為引導(dǎo)按鈕也是一樣,黑白的配色方案,不管是"瀏覽更多產(chǎn)品"還是"立即購(gòu)買(mǎi)"都配有一個(gè)小圖標(biāo),形象直觀。這樣的CTA設(shè)計(jì)雖然很容易,但B&O Play維持了CTA和網(wǎng)站整體風(fēng)格的一致,將行為引導(dǎo)按鈕看作是整體品牌的重要組成部分之一,做到這一點(diǎn)實(shí)在很難得。

Mercy Corps

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

Nest

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

Skagen

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

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

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
按鈕設(shè)計(jì)

相關(guān)文章

  • 郵件營(yíng)銷(xiāo)提高轉(zhuǎn)化率的訣竅和按鈕設(shè)計(jì)

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

  • 淺析在網(wǎng)頁(yè)設(shè)計(jì)中如何讓按鈕激發(fā)用戶(hù)點(diǎn)擊欲望

    現(xiàn)在建設(shè)網(wǎng)站一個(gè)重要的核心要素就是能夠?qū)τ脩?hù)產(chǎn)生良好的吸引力,能夠引導(dǎo)用戶(hù)逐層深入的點(diǎn)擊網(wǎng)站,這樣才能夠有效提升用戶(hù)在網(wǎng)站上的停留時(shí)間,這樣就能夠有效的為網(wǎng)站培養(yǎng)忠誠(chéng)用戶(hù)打下堅(jiān)實(shí)基礎(chǔ)。對(duì)此很多站長(zhǎng)開(kāi)始在網(wǎng)頁(yè)設(shè)計(jì)上下功夫,可是有時(shí)候?qū)τ谝恍┘?xì)節(jié)掌握不當(dāng),或者忽略了一些細(xì)節(jié),導(dǎo)致網(wǎng)站的吸引力出現(xiàn)了明顯的

  • 移動(dòng)應(yīng)用設(shè)計(jì):談導(dǎo)航欄返回按鈕的替代方案

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

  • 超鏈接和按鈕 設(shè)計(jì)中默認(rèn)樣式的強(qiáng)大威力

    默認(rèn)樣式,就是最原生態(tài)的樣式。就像大家經(jīng)常用的按鈕或者藍(lán)色有下劃線(xiàn)的超鏈接。本文,潛行者m將從兩個(gè)元素來(lái)討論默認(rèn)樣式在設(shè)計(jì)中的應(yīng)用。超鏈接的默認(rèn)樣式超鏈接的默認(rèn)樣式超鏈接是網(wǎng)頁(yè)中最常用最基礎(chǔ)的元素,可以說(shuō)是必不可少的。我們?cè)O(shè)置超鏈接,也是希望人們

    標(biāo)簽:
    按鈕設(shè)計(jì)
  • 網(wǎng)站交互設(shè)計(jì):非一般的“取消”按鈕

    取消這個(gè)按鈕不屬于操作的必要流程,在設(shè)計(jì)上也不作為主要元素出現(xiàn)。但在實(shí)際的彈框或一些操作應(yīng)用中經(jīng)常出現(xiàn),那么這個(gè)小小的取消按鈕又有哪些玄機(jī)呢?首先我們要先來(lái)了解一下取消的概念。取消:我們?cè)谔峤粏?wèn)題、選擇、進(jìn)度、信息時(shí)需要要求執(zhí)行一個(gè)確認(rèn)動(dòng)作,這時(shí)候

    標(biāo)簽:
    按鈕設(shè)計(jì)

熱門(mén)排行

信息推薦