網(wǎng)站設(shè)計(jì)

Website development

網(wǎng)頁(yè)設(shè)計(jì)中按鈕焦點(diǎn)如何設(shè)計(jì)

發(fā)布時(shí)間：2017-10-19 11:33:39

當(dāng)我們?cè)L問(wèn)大多數(shù)網(wǎng)站時(shí)，我們經(jīng)常會(huì)有一個(gè)目標(biāo)。為了達(dá)到這個(gè)目的，通常需要采取一系列步驟，第一步開(kāi)始是點(diǎn)擊CTA（號(hào)召性用語(yǔ)）按鈕。想想上次注冊(cè)一個(gè)服務(wù)或下載一個(gè)應(yīng)用程序時(shí)，這個(gè)過(guò)程可能包括一個(gè)與號(hào)召性用語(yǔ)的交互。

CTA按鈕是您在網(wǎng)站中使用的按鈕，用于指導(dǎo)用戶進(jìn)行目標(biāo)轉(zhuǎn)換。CTA的全部?jī)?nèi)容是將您的網(wǎng)站訪問(wèn)者引導(dǎo)到所需的操作過(guò)程。CTA的一些常見(jiàn)例子包括：

“開(kāi)始審判”
“下載應(yīng)用程序/書/指南”
“注冊(cè)更新”
“咨詢”

今天，我們將討論設(shè)計(jì)CTA按鈕的5個(gè)實(shí)踐以及的現(xiàn)實(shí)世界示例，以幫助您從著陸頁(yè)獲得多的點(diǎn)擊。

目視敲擊按鈕

你的按鈕顏色很重要。事實(shí)上，如果你只想從這篇文章中獲得一個(gè)建議，應(yīng)該是這樣的：“考慮你的CTA按鈕顏色”。使用顏色，您可以通過(guò)給予他們更多的視覺(jué)突出來(lái)使某些按鈕比別人更突出。

使用對(duì)比色

對(duì)比顏色適合CTA按鈕，使用對(duì)比色可以創(chuàng)建出色的醒目按鈕。您應(yīng)該從網(wǎng)頁(yè)的配色方案中選擇一種對(duì)比色，同時(shí)仍然符合整體設(shè)計(jì)。請(qǐng)考慮下面的Firefox示例。Firefox頁(yè)面上的CTA按鈕的綠色正在跳出頁(yè)面，并立即獲得用戶關(guān)注。

Firefox CTA按鈕是明亮的綠色，在深藍(lán)色的背景下脫穎而出

Hipmunk主頁(yè)上還可以找到另外引人注目的CTA按鈕。明亮的橙色按鈕捕捉用戶的注意力并定義下一個(gè)可能的動(dòng)作。

負(fù)空間

不僅顏色對(duì)于CTA是重要的，還包括它周圍的空間?？瞻祝ɑ蜇?fù)空間）創(chuàng)建必要的呼吸空間，并將您的CTA按鈕與用戶界面中的其他元素分開(kāi)。舊的Dropbox主頁(yè)是使用負(fù)面空間來(lái)制作主要CTA彈出的一個(gè)很好的例子。藍(lán)色的“免費(fèi)注冊(cè)”CTA脫穎而出，背離了淺藍(lán)色。

面向行動(dòng)的文本

為您的號(hào)召性用語(yǔ)撰寫文字，強(qiáng)制您的訪問(wèn)者采取正確的行動(dòng)不是一件容易的事情。幸運(yùn)的是，有幾件事可以幫助你做到這一點(diǎn)：

從動(dòng)詞開(kāi)始

您應(yīng)該避免對(duì)CTA按鈕的“輸入更多信息”等模糊而無(wú)聊的詞語(yǔ)，并將其替換為更多的面向行動(dòng)的單詞，例如“開(kāi)始免費(fèi)試用”或“現(xiàn)在獲得折扣”。Evernote具有常見(jiàn)的功能之一，但仍然為其CTA按鈕工作面向行動(dòng)的文本。

從“開(kāi)始”，“獲取”或“加入”開(kāi)始，

Treehouse主頁(yè)上可以找到一個(gè)更有趣的例子。Treehouse網(wǎng)站的CTA不僅僅是說(shuō)“開(kāi)始免費(fèi)試用”; 它說(shuō)“聲稱您的免費(fèi)試用”。措辭的區(qū)別可能看起來(lái)很微妙，但“聲稱您的免費(fèi)試用”聽(tīng)起來(lái)更加個(gè)人化。

使用簡(jiǎn)單和容易理解按鈕的文本

如果他們點(diǎn)擊CTA，請(qǐng)確保訪問(wèn)者將獲得什么。理想情況下，您希望將按鈕文字保持在兩到五個(gè)字之間。

增加價(jià)值主張

很可能你已經(jīng)注意到，許多按鈕在其副本中都有“免費(fèi)”這樣的字眼，這并不是巧合，在按鈕復(fù)制中使用這樣的詞語(yǔ)強(qiáng)調(diào)了您的報(bào)價(jià)的價(jià)值主張。因此，在編寫CTA時(shí)，嘗試找到一種整合一個(gè)（或全部）3個(gè)說(shuō)服性詞語(yǔ)的方法：

自由
獎(jiǎng)金
即刻

讓我舉個(gè)例子：用戶之前一直擔(dān)心要注冊(cè)一些東西，那就是如果他們不喜歡這個(gè)服務(wù)，那么取消訂閱會(huì)很痛苦。Netflix解除了在“免費(fèi)加入一個(gè)月”CTA旁邊的承諾“隨時(shí)取消”的擔(dān)憂。

創(chuàng)造緊迫感

在CTA按鈕中構(gòu)建緊迫感可以產(chǎn)生令人印象深刻的點(diǎn)擊率。例如，您可以使用按鈕文字，例如“注冊(cè)，僅限今天享受25％折扣！”限制某人做出決定的時(shí)間讓人們想要提出要約。

有用的文本

有時(shí)您可能需要考慮在按鈕文本中添加額外的信息。這種做法是免費(fèi)試用按鈕的常見(jiàn)問(wèn)題。例如，免費(fèi)試用按鈕可能會(huì)在CTA按鈕下方的“開(kāi)始免費(fèi)試用”文本中的較小文本中顯示“30天試用，無(wú)信用卡”。這個(gè)額外的文字應(yīng)該可以減輕決策過(guò)程。

使其可見(jiàn)，無(wú)需滾動(dòng)

您的號(hào)召性用語(yǔ)按鈕的位置與顏色和消息一樣重要。CTA按鈕應(yīng)位于易于查找的位置，可以從網(wǎng)頁(yè)的流程有機(jī)地跟隨。您應(yīng)該嘗試將CTA按鈕保留在折疊上方，以便用戶不要錯(cuò)過(guò)它。理想情況下，您的CTA按鈕應(yīng)該是用戶在到達(dá)頁(yè)面時(shí)首先看到的。額外的信息應(yīng)該保持在折疊之下，它仍然可以訪問(wèn)，但不會(huì)分散注意力。

大圓形圓角

想想設(shè)計(jì)如何交流能力。用戶如何將元素理解為按鈕？使用形狀和大小使元素看起來(lái)像一個(gè)按鈕。

使它足夠大

CTA應(yīng)該足夠大，可以從遠(yuǎn)處看到，但不能太大，以至于減少頁(yè)面上主要內(nèi)容的注意

用戶按鈕與圓角

按鈕的形狀可以起到很大的作用。這是一個(gè) 證明的事實(shí)，圓角在眼睛上更容易。在ContentVerve的測(cè)試中，圓角的綠色按鈕比藍(lán)色矩形更好。

更少是更多當(dāng)它來(lái)到選擇

請(qǐng)記住，如果您希望客戶采取行動(dòng)，您必須協(xié)助他們，從他們的方式中刪除所有可能的障礙。當(dāng)用戶被給予太多選擇時(shí)，往往會(huì)被困惑。所以，好只為潛在客戶提供一個(gè)選擇。

如果您仍然希望包含多個(gè)按鈕選擇，請(qǐng)選擇其他選項(xiàng)，以幫助用戶轉(zhuǎn)向特定的路徑。一個(gè)很好的例子是Evernote：一旦你到了Evernote的主頁(yè)的底部，很明顯，一個(gè)優(yōu)選的選擇是“免費(fèi)注冊(cè)”，而用于比較計(jì)劃的CTA是次要的。

為了實(shí)現(xiàn)有效的CTA設(shè)計(jì)，您不僅需要考慮按鈕本身?？紤]背景顏色，周圍圖像，周圍文字和其他許多元素也很重要。了解這些元素的重要性，并為其著陸頁(yè)設(shè)計(jì)了完美的布局。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,7338,0.html

上一篇：網(wǎng)站內(nèi)容重寫和建立網(wǎng)站品牌認(rèn)知的技巧

下一篇：移動(dòng)端網(wǎng)站設(shè)計(jì)和桌面版網(wǎng)站設(shè)計(jì)有什么區(qū)別？

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問(wèn)題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問(wèn)題可以再里面提出，人員分工到位，解決問(wèn)題很及時(shí)。

張經(jīng)理