企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

网页设计中按钮焦点如何设计

发布时间:2017-10-19 11:33:39

TAGS:网站设计

当我们访问大多数网站时,我们经常会有一个目标。为了达到这个目的,通常需要采取一系列步骤,第一步开始是点击CTA(号召性用语)按钮。想想上次注册一个服务或下载一个应用程序时,这个过程可能包括一个与号召性用语的交互。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

CTA按钮是您在网站中使用的按钮,用于指导用户进行目标转换。CTA的全部内容是将您的网站访问者引导到所需的操作过程。CTA的一些常见例子包括:dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • “开始审判”dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • “下载应用程序/书/指南”dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • “注册更新”dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • “咨询”dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

今天,我们将讨论设计CTA按钮的5个实践以及的现实世界示例,以帮助您从着陆页获得多的点击。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

目视敲击按钮dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

你的按钮颜色很重要。事实上,如果你只想从这篇文章中获得一个建议,应该是这样的:“考虑你的CTA按钮颜色”。使用颜色,您可以通过给予他们更多的视觉突出来使某些按钮比别人更突出。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联


dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使用对比色dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

对比颜色适合CTA按钮,使用对比色可以创建出色的醒目按钮。您应该从网页的配色方案中选择一种对比色,同时仍然符合整体设计。请考虑下面的Firefox示例。Firefox页面上的CTA按钮的绿色正在跳出页面,并立即获得用户关注。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngdcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Firefox CTA按钮是明亮的绿色,在深蓝色的背景下脱颖而出dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Hipmunk主页上还可以找到另外引人注目的CTA按钮。明亮的橙色按钮捕捉用户的注意力并定义下一个可能的动作。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngdcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

负空间dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

不仅颜色对于CTA是重要的,还包括它周围的空间。空白(或负空间)创建必要的呼吸空间,并将您的CTA按钮与用户界面中的其他元素分开。旧的Dropbox主页是使用负面空间来制作主要CTA弹出的一个很好的例子。蓝色的“免费注册”CTA脱颖而出,背离了浅蓝色。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngdcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

面向行动的文本dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

为您的号召性用语撰写文字,强制您的访问者采取正确的行动不是一件容易的事情。幸运的是,有几件事可以帮助你做到这一点:dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

从动词开始dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

您应该避免对CTA按钮的“输入更多信息”等模糊而无聊的词语,并将其替换为更多的面向行动的单词,例如“开始免费试用”或“现在获得折扣”。Evernote具有常见的功能之一,但仍然为其CTA按钮工作面向行动的文本。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngdcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

从“开始”,“获取”或“加入”开始,dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Treehouse主页上可以找到一个更有趣的例子。Treehouse网站的CTA不仅仅是说“开始免费试用”; 它说“声称您的免费试用”。措辞的区别可能看起来很微妙,但“声称您的免费试用”听起来更加个人化。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngdcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使用简单和容易理解按钮的文本dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果他们点击CTA,请确保访问者将获得什么。理想情况下,您希望将按钮文字保持在两到五个字之间。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联


dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

增加价值主张dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

很可能你已经注意到,许多按钮在其副本中都有“免费”这样的字眼,这并不是巧合,在按钮复制中使用这样的词语强调了您的报价的价值主张。因此,在编写CTA时,尝试找到一种整合一个(或全部)3个说服性词语的方法:dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • 自由dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • 奖金dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

  • 即刻dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

让我举个例子:用户之前一直担心要注册一些东西,那就是如果他们不喜欢这个服务,那么取消订阅会很痛苦。Netflix解除了在“免费加入一个月”CTA旁边的承诺“随时取消”的担忧。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngdcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngdcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联


dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

创造紧迫感dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在CTA按钮中构建紧迫感可以产生令人印象深刻的点击率。例如,您可以使用按钮文字,例如“注册,仅限今天享受25%折扣!”限制某人做出决定的时间让人们想要提出要约。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联


dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有用的文本dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有时您可能需要考虑在按钮文本中添加额外的信息。这种做法是免费试用按钮的常见问题。例如,免费试用按钮可能会在CTA按钮下方的“开始免费试用”文本中的较小文本中显示“30天试用,无信用卡”。这个额外的文字应该可以减轻决策过程。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使其可见,无需滚动dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

您的号召性用语按钮的位置与颜色和消息一样重要。CTA按钮应位于易于查找的位置,可以从网页的流程有机地跟随。您应该尝试将CTA按钮保留在折叠上方,以便用户不要错过它。理想情况下,您的CTA按钮应该是用户在到达页面时首先看到的。额外的信息应该保持在折叠之下,它仍然可以访问,但不会分散注意力。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

大圆形圆角dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

想想设计如何交流能力。用户如何将元素理解为按钮?使用形状和大小使元素看起来像一个按钮。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联


dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使它足够大dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

CTA应该足够大,可以从远处看到,但不能太大,以至于减少页面上主要内容的注意dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联


dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

用户按钮与圆角dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

按钮的形状可以起到很大的作用。这是一个  证明的事实,圆角在眼睛上更容易。在ContentVerve的测试中,圆角的绿色按钮比蓝色矩形更好。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngdcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

更少是更多当它来到选择dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

请记住,如果您希望客户采取行动,您必须协助他们,从他们的方式中删除所有可能的障碍。当用户被给予太多选择时,往往会被困惑。所以,好只为潜在客户提供一个选择。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联


dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果您仍然希望包含多个按钮选择,请选择其他选项,以帮助用户转向特定的路径。一个很好的例子是Evernote:一旦你到了Evernote的主页的底部,很明显,一个优选的选择是“免费注册”,而用于比较计划的CTA是次要的。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngdcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

 dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

为了实现有效的CTA设计,您不仅需要考虑按钮本身。考虑背景颜色,周围图像,周围文字和其他许多元素也很重要。了解这些元素的重要性,并为其着陆页设计了完美的布局。dcp北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7338,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号