订阅摹客文章

免费获取优质的设计资讯!

文章分类
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > UI设计 > CTA按钮设计之终极生存指南

CTA按钮设计之终极生存指南

Grace
2019-11-01
2764

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具

CTA按钮

现代行业发展越来越多地和优质的设计建立联系,尤其是电子产品行业。它们总是千方百计地吸引用户。这些电子产品的UI界面就成了兵家必争之地,哪怕只是一个小小的Call to Action (CTA)按钮。

Investopedia 对CTA的介绍:

行为召唤(CTA)是一种营销术语,是指营销人员希望其受众或读者采取的下一步措施,通常以按钮的形式展现,并可以直接链接到销售页面。

简而言之,CTA就是你希望你的网站访问用户采取的下一步行动。

敢于尝试. 图源 icons8


以下是一些常见的CTA设计技巧分析和案例分享。希望对你有所启发。

具有吸引力的文案

Copyblogger的Brian Clark用他的经验很好地阐释了文字的力量。曾有一个案例, 社会心理学家艾伦·兰格(Ellen Langer)要求插队使用复印机。 她尝试了三种不同的询问方式:

  • 抱歉,我有五页。 我可以用一下复印机吗? - 60%的人表示勉强以
  • 抱歉,我的内容只有五页。我有急事, 可以先用一下复印机吗? - 94%的人表示可以
  • 抱歉,我的内容只有五页。 因为必须复印一些文件,我可以先用使用一下复印机吗? - 93%的人表示可以

作为一个触发词,“因为”的强调作用几乎可以让你忽略其后面的“原因”。

因此,我们可以得出这样一个结论:相比长篇大论,某些词汇更能有效地说服人们。专家表示,文案中加入一些带有感情色彩的词汇更能增加说服力。

Slack文案

例如,上面截图中,Slack的CTA充分利用了free的双重含义:不仅试用免费,而且行动自由和选择自由都会潜移默化地影响用户的行为。

许多网站的CTA利用其具有操作性的文案引导用户采取特定的行为。因为这些文案不仅有指导作用,同时也回答了用户为什么需要点击该按钮的原因。

大多数成功的公都采用渐进式的文案,例如:“免费试用”、“了解更多”、“抢先体验”、“入门”等,并通过对CTA按钮添加强调效果提升转化率。

Atlassian CTA按钮


对比色

CTA按钮是冯·雷斯托夫效应的最佳例证。 冯·雷斯托夫效应,也称为“隔离效应”,预测当存在多个相似物体时,最与众不同的那个最有可能被记住。

这也是为什么在日常设计中,CTA按钮总是在一排相似的按钮中脱颖而出的最重要原因。

VisualEyes 插件生成的视觉热力图


颜色是影响按钮隔离效果的第一因素。建议经常使用对比色来吸引用户注意,使主要操作按钮更加突出。

首先,你应该确保按钮的颜色、视觉效果、排版是协调一致的。按钮的可读性、易读性和对比度非常重要,需要事先进行测试。可以借助Stark在设计过程中测试按钮的对比度。

如Stark插件显示,精美的渐变或鲜艳的色彩并不总是作为对比色的最佳方案!

如Stark插件显示,精美的渐变或鲜艳的色彩并不总是作为对比色的最佳方案!

此外,关于对比度的方法不仅仅适用于按钮元素本身。 功能强大的CTA按钮也应具有足够的对比度,并且在整个界面中凸显出来。

在这方面,Sketch app的着陆页就是一个完美的示例。它很好地展示了CTA按钮与页面色彩对比的重要性。它不仅尊重其自身品牌,而且还创建了醒目的CTA按钮来吸引大多数访问者的注意力。

简而言之,在这种情况下,这个按钮对用户是非常具有吸引力的!

Sketch App着录页

Sketch App着录页

 VisualEyes 插件生成的Sketch App页面视觉热力图

VisualEyes 插件生成的Sketch App页面视觉热力图

尺寸适度

CTA按钮的尺寸和位置在其可视性和可访问性中起着至关重要的作用。而按钮的尺寸大小受许多因素的影响。

通过对按钮大小和间距的研究,总结出了一种适用于大多数用户(包括老年人)的标准。

按钮尺寸标准

研究表明,42-72像素之间的按钮准确率最高。 也就是说,最适合用户的最小按钮尺寸是42像素,最大按钮尺寸是72像素。

过大的按钮会因为其过于引人注目,而让用户忽略了网站所提供的服务。这对网站页面来说是一个非常大的影响。而将按钮设置得太小,则会严重影响其可访问性。没有什么比按钮太小而无法触及更让人崩溃的了。

移动端的按钮设计则面临着另外一个问题: 由Scott Hurff提出的“为拇指而设计”。这是一个值得高度重视的问题。在设计中,应该在我们的拇指自然弧形范围内构建最舒适的使用界面。

不同iPhone尺寸设备上的拇指区域热图

不同iPhone尺寸设备上的拇指区域热图

显然,“CTA”按钮应该以一种舒适的方式被触发。因此,参考``拇指区''热图,设计师可以轻松地为他们的CTA按钮选择最合适的位置。 由此一来,在应用程序的“自然区域”内,按下按钮的机会可以成倍增加。

顺其自然

用户在使用页面内容时遵循的直接路径非常重要。 以一种鼓励自然阅读的方式来排列文案和按钮,你可以轻松地引导你的用户到达CTA按钮。

上述陈述与流行的菲茨定律是一致的。 获取目标的时间取决于目标的距离和大小。 因此,在用户流程的末尾放置CTA按钮,可以大大减少转化的阻力。

Airbnb用户流程&CTA按钮

Airbnb用户流程&CTA按钮

VisualEyes 插件生成的用户流程视觉热力图

VisualEyes 插件生成的用户流程视觉热力图

仔细观察不难发现,最常见的眼睛扫描图案呈F形。近期的眼动追踪研究表明,无论在台式机还是移动设备上,F形扫描模式是当今最普遍的视觉运动方式。

这种阅读模式更多地取决于人类的行为,而不是技术,这也表明``搜索''按钮可能位于左下角。

Airbnb的设计师采用了不同的方法。他们利用Z型布局和Gutenberg(古腾堡)图,将 CTA按钮置于终端区域,以消除干扰并鼓励用户采取行动。


当用户到达表单的右下角时,阅读或“页面扫描”过程中断,用户需要采取行动。这是插入CTA按钮的最佳位置。

总结

一般来说,CTA按钮作为网站界面中最重要的元素,会对公司转化产生巨大的影响。记住这些基本的设计原则,可以让你的CTA按钮设计在页面中脱颖而出,吸引用户注意力。

作者Raptis Dimitris

原文链接https://medium.muz.li/call-to-action-an-extensive-guide-140fef523b08

学习工具,但不受限于某种工具。摹客iDoc,高效协作,从产品到开发,只要一个文档,让你的团队高效协作!


上一篇
案例分析:Tubikstudio教你如何进行品牌设计

Grace   11/04

UX设计不变的命题:如何提升界面设计的可读性?

Trista   10/28

下一篇
咨询客服

帮助群:651432826

服务邮箱:service@jongde.com