欢迎您访问众安网络,风源ACNPHP品牌技术开发服务商,为创客技术孵化开发服务。
您的位置:首页 >>新闻中心 >>建站知识建站知识

关于完美CTA按钮的最终用户体验设计

发布时间:2018/12/25 15:29:56 浏览次数:

CTA即call to action,行动呼吁按钮。本文从按钮的大小,样式,布局和颜色等一切按钮的相关因素出发,分析了怎样才能设计出一个体验良好的CTA按钮。

按钮是一种最重要的需要设计的要素,尤其是你要用它们去要求行动时。如果你等到最后的几分钟,你也许会冒着用户将跳转的风险。

在这篇文章中,我们将按按钮的大小,样式,布局和颜色----以及所有你需要知道的用以创建一个能提升用户体验的呼叫行动按钮。

按钮的重要性

在一个页面的错误区域放置的按钮,它使用了错误的颜色,可以阻止用户的行为路径。这个按钮是指直接引导用户采取一些你想让他们采取的行为

如果用户不采取行动,那么这个按钮失败的原因如下

1.这个按钮放在了用户并不熟悉的地方

2.按钮的颜色使用户丧失兴趣或者按钮在页面中并不足够突出

3.按钮的放置并不直接明显

根据用户体验的活动,我们可以把CTA按钮归纳为:

1.积极的--改变发送和接受信息。举个例子,一个伴随着新邮件注册的按钮将会发送信息。

2.中立的--不做改变,或者让用户回到频幕

3.负面的-减少或重置信息

考虑颜色和对比对度

UX Movement指出你要有明确的色彩对比,因为它可以帮助用户弄明白该采取什么行动。如果你的主要CTA按钮混杂在一起的背景太多,或者看起来像别的按钮,然后用户会感觉不确定。乐观估计,这会减慢他们的操作速度。最糟的情况是,他们完全不会点击。
这点尤其重要尤其是你面对色盲用户的时候。颜色可以看起来非常相似对于色盲用户而言,即使在视力正常的用户看来颜色有明显区分时。

红色与绿色按钮的论点是一个很好的例证,为什么你应该考虑色盲用户

让我们简要回顾红色/绿色的讨论。在大多数人的心目中,红色通常意味着“停止”或“删除”。但也有一些用户更倾向于点击红色按钮超过一个绿色的按钮。所以问题就变成了--该选哪一个?
让我们看一看上面的图片。在左边的是能看清两种颜色的人会看到的红色和绿色之间的区别。而右边,看看色盲用户视觉感受---两种颜色均出现非常相似的色调。
正如我们在 
Web UI Design for the Human Eye中所描述的那样,这种差异是因为把红色和绿色放在颜色圈上(它们是互补的,而不是互相对比)。面对这种情况,一个色盲用户在处理和理解的颜色的过程中可能不会采取任何行动。

界面用色把红色和绿色放在一起肯定是一个错误。你也要考虑到按钮背后的背景色。例如,蓝色背景上放绿色按钮基本看不清消失,因为颜色太相似了。这很容易取消了用户有可能采取的任何行动,并导致分析错误。
下面的快速彩色心理学指南可以帮助您做决策。这也取决于你的网站类型和你的品牌个性。你还应该考虑用户和任何可能会使用网站的人。

所以小心你选择的颜色的按钮不仅是必需的,而且重要的是,确保您为页面和页面上的按钮选择有对比的颜色
将您的按钮放置在用户路径中
页面按钮的位置和它的颜色包括上面的文本一样重要
按钮应该在页面上突出显示。
然而,考虑用户在页面上的操作路径。正如Jeremy Smith在
Crazy Egg blog post里指出的,按钮需要符合逻辑的放置以致让用户知道下一步该去哪儿。你要考虑人们如何在实际过程中阅读页面。
让我们简要的看看f-patterns和z-patterns。
“F模式”
“F模式”是有很多文本内容网站的标准版,如新闻网站或博客。用户的眼睛会从左至右地扫过页面,然后再到左边直到浏览完整个页面。在下面的例子中,你想让用户在从左至右浏览完成后采取行动。

“Z模式”
你会发现这个在这个模式中,内容更宽敞用户的眼睛会会像扫描佐罗的画像一样呈Z字型,在下面的例子中,你要把CTA按钮沿着Z字型放置,最好靠近结束处。

这些模式可以让你在用户路径中放置按钮。毕竟,你并不想把按钮放在没有人会看和点击的页脚。最后,不要害怕使用网页规范--这是因为按钮一般都放在在工作的地方。

使按钮显得可点击
有一些方法使按钮看起来友好和可点击
让我们看看Gabrielle Gosha在她的文章里概述的一些注意事项:
正如我们上面所说的,颜色是一个按钮的重要组成部分。在表达按钮可以点击时颜色也同样有用。如果按钮混在背景中,用户将无法意识到它可以点击。
按钮还应该包含能为用户提供进一步的视觉线索的文本来指导用户行为,直接作用。文本可以用来清楚地指示用户,如“注册”、“正在连接”、“开始”。
给这个按钮一些喘息的空间,当按钮放在一段文本下方时,我们建议增加一个大致⅔按钮高度的边缘。
你要结合页面上其他元素来考虑这个按钮的大小。太小,它会被忽视。太大,它可能会淹没用户视线。

正如你所看到的,三个不同的调用不同的CTA按钮产生的不同影响。最左边的按钮小但很难 ;中心的最不显眼;右边的如此大以至于脱离了文本而存在它会从它上面的内容。颜色和大小使之产生了这些差异。
创建按钮时我们要避免太过艺术,尽量保持按钮简单规整的形状。更换为一个有聪明的文字和动效的完美按钮会给用户很好的体验。
Kamil Zieba在 
Web Design for the Human Eye中说明:“清晰排在聪明之前”。不要试图用一个按钮标签,比如“酷,让我们摇滚!“如果”提交“能更好地引导行为。

使按钮圆角矩形
按钮应该是矩形的,因为我们已经习惯了。我们了解这些按钮的功能。

据保Paul Olyslager,研究表明这样的矩形按钮也应该有圆角才是最好的。这是因为圆角会让用户关注按钮内部。也正是因为我们已经进化了,学会了避免任何有尖角的事物,就像人学会去避开伤害一样。
我们建议你阅读 
Paul’s four-part article,以了解更多的关于按钮设计的各方面,包括大小。

浮动操作按钮
在我们提到按钮的放置之前,简要说一下近年来越来越流行的浮动操作按钮floating action buttons (简称FABs)。
FABs通常是浮在用户界面上用于促进行动的圆形按钮。我们看到更多的网站使用它们“去示意用户在特定的页面上进行单一行为” 

一个FAB按钮浮在常规内容上能侵占其他元素,以及从其他内容上分散用户。
设计师
Teo Yu Siang指出,虽然这看起来是个好想法,在理想情境也能提供好的用户体验,但事实上,FAB按钮广泛使用可能损害整体的用户体验。
这是因为他们减少了身临其境的体验,当它们覆盖了屏幕上每一个UI元素。这在整体体验上会分散用户注意力,因此你在使用FABs按钮时要谨慎,否则可能适得其反。
不仅如此,siang还说“Fab有效的内容区块会占用真实的页面位置。”
这并不是建议你完全不使用FABs按钮,但你一定要小心他们的使用位置,以及可以降低用户采取动作的次数。

按钮教程
创建一个有效的CTA按钮取决于几个因素,包括相对大小,颜色和文本。我们将创建一个简单的例子来说明我们刚才描述的那些最佳实践。
1、人们最先看到主角
最大的,最上面的元素得到了最多的关注。

2、他们的眼睛向下游走
下面的副标题:文字放小一些,不用太突出,使之成为次一级的关注点。

3、内容沿着按钮移动
有一个能让用户跳过副标题直到按钮的机会,但是通常用户需要知道每一个他能接触到的按钮。“销售间距”文本详细解释了为什么用户要点击每个CTA按钮。这些内容是一个承诺:你将点击到什么样的按钮?

4、CTA按钮
CTA按钮占据了第三层。为什么?
对比:在正文背景里按钮很突出。
正文:干净、清晰,通常使用无衬线字体
放置:放置在整齐的一排里。

它是如何工作的
这种Z型模式利用了西方语言的“左至右”移动的规律:因为人们已经习惯于从左上角到有下家的阅读顺序,安排这些遵循传统的思维模式的元素会使体验更为自然——即使读者是在无意识的浏览。


服务联系

网站建设:点击这里给我发消息

网络推广:点击这里给我发消息

投诉建议:点击这里给我发消息

在线时间: 8:30--21:30

全国热线: 0592-5073827

更多>>媒体新闻
服务客户
我们的合作伙伴
网站首页 | 免费云服务器 | 品牌网站建设 | 直播app开发 | 短视频app开发 | 客户案例 | 关于我们 |联系我们
Copyright 2014-2018 www.rackspacechina.com All Rights Reserved. 众安(厦门)网络科技有限公司 版权所有
地址:厦门市湖里县后社368号全宇通商务中心402单元 ; 电话:0592-5073827 ; 手机:13696920611 ; 传真:0592-5073830 ; 邮箱:zhonanxm@qq.com
RRS订阅 | GoogLe地图 |网站地图 今日访问量: 昨日访问量: 本月访问量: 总访问量: 闽ICP备14008980号
马上推广 在线咨询 申请合作 开关音效