广州网站定制：完美CTA按钮的终极用户体验设计

2019.08.16 mf_web

97

按钮是要创建的最重要元素之一，尤其是当您将它们用于调用操作时。如果您等到最后一刻，您可能会冒着转换的风险。广州网站定制

Dropbox的

在这篇文章中，我们将介绍按钮大小，样式，位置和颜色 - 您需要知道的一切，以创建有效的号召性用语，从而改善用户体验。

按钮的重要性

放置在页面错误区域的按钮（使用错误的颜色）可以阻止用户进入其轨道。该按钮用于指导用户采取您希望他们采取的操作。

如果他们不接受，则按钮失败的原因有以下几种：

按钮放置在用户不熟悉的区域;
颜色会使用户关闭或不足够突出;
按钮存在并不是很明显。

根据UX Movement，我们可以将所有CTA按钮分类为：

积极 - 改变，发送或添加信息。例如，随附简报注册框的按钮将发送信息;
中性 - 未进行任何更改，或按钮将用户带回屏幕（例如取消）;
否定 - 删除或重置信息。

考虑颜色和对比度

UX Movement指出你想要有清晰的色彩对比，因为它可以帮助用户找出要采取的行动。如果您的主CTA按钮与背景混合太多或看起来像任何其他按钮，那么用户会感到不确定。充其量，这会减慢他们的速度。更糟糕的是，他们不会点击。

这对于可能患有色盲的用户尤为重要。颜色看起来非常类似于色盲用户，即使它们看起来与有视力的用户完全对比。

红色与绿色按钮参数很好地说明了为什么您应该考虑使用色盲的用户。

UX运动

用户体验：用户体验运动

让我们简要回顾一下红/绿辩论。在大多数人的心目中，红色通常意味着“停止”或“删除”。但有些人坚持认为用户更倾向于点击绿色按钮。那么问题就变成了 - 选择哪一个？

看看上面的图片。在左边是一个能看到颜色的人会看到红色和绿色之间的区别。在右侧，查看色盲用户如何查看两种颜色 - 两者都显示为非常相似的阴影。

正如我们在人眼的Web UI设计中所描述的那样，差异是因为红色和绿色在色轮上彼此相对（它们相互补充而不是相互对比）。面对这种情况，处理和解释颜色的色盲用户可能不会采取行动。

红色和绿色

在减色轮上，红色和绿色彼此相对

图片来源：维基百科

使用彼此相邻的红色和绿色肯定是一个错误。您还需要考虑按钮背后的背景颜色。例如，蓝色背景上的绿色按钮将消失，因为颜色太相似。这有效地取消了用户可能采取的任何行动并导致分析瘫痪。

请参阅下面的图片，获取快速色彩心理指南，以告知您的选择。这取决于您正在设计的网站类型和品牌个性。您还应该考虑用户以及可能使用该网站并单击按钮以通知您的选择。

人眼的Web UI设计

图像源：人眼的Web UI设计

因此，不仅要注意为按钮选择的颜色，还要确保为页面的其余部分和随附的按钮选择对比色。

将按钮放在用户的路径中

在您放置页面的位置，按钮与其颜色及其上的文本或随附文本一样重要。

按钮应该在页面上突出显示。

但是，请考虑用户在页面中的路径。正如Jeremy Smith在这篇优秀的Crazy Egg博客文章中指出的那样，按钮需要逻辑放置，以确定用户下一步的位置。您需要考虑人们如何实际阅读该页面。

让我们简要看一下F模式和Z模式。

F模式

F模式是具有大量文本的网站的标准，例如新闻网站或博客。用户的眼睛将从左到右扫描整个页面，然后在下降之前向左移动并再次扫描整个页面。在下面的示例中，您将希望在从左向右扫描时让您的眼睛结束行动。

人眼的网页设计

照片来源：人眼的网页设计

Z模式

当内容更宽敞并且用户的眼睛会像Zorro雕刻Z一样扫描页面时，你会发现这种模式。在下面的例子中，你需要沿着Z线发出你的号召性用语，最好是接近末尾。它。

人眼的网页设计

照片来源：人眼的网页设计

这些模式允许您将按钮放在用户的路径中。毕竟，你不希望将按钮埋在页脚中，没有人会看到或点击它。最后，不要害怕使用网络约定 - 有充分的理由为什么事物通常被放置在它们所在的位置，因为它们起作用。

使按钮显示为可点击

有几种方法可以使按钮显得美观且可点击。

让我们来看看Gabrielle Gosha在她优秀的Sitepoint文章中概述的一些注意事项：

如上所述，颜色是使按钮脱颖而出的重要部分。它也可以使按钮可点击。如果按钮与背景混合太多，用户将无法意识到您可以按下它。
按钮还应包含文本，为用户提供直接操作的进一步视觉线索。文本可用于明确指导用户，例如“注册”，“立即加入”或“开始使用”。
给按钮一些呼吸空间。当在一大块文本下面放置一个按钮时，我们建议添加一个大约是按钮高度的边距。
对不起，Yoda，但在按钮上尺寸很重要。您想要考虑按钮相对于页面上其他元素的大小。太小，它会被忽视。太大了，它可能会压倒用户。还有移动设备需要考虑。

UXPin

UX照片： UXPin

正如您在上图中所看到的，三种不同的号召性用语会产生不同的影响。左边的CTA很小但很难错过; 中心不引人注目; 权利是如此之大，以至于分散了它上面的内容。颜色和大小完全不同。

在创建按钮时，避免过于艺术化，并保持简单和矩形的形状。用巧妙的文字或GIF取代精心制作的按钮很少能为用户带来良好的体验 - 它只会让他们感到困惑，因为他们面对的是一些不熟悉的东西。

正如Kamil Zieba在人类眼睛的网页设计中所说的那样：“清晰度来自聪明之前。”如果“提交”更好地传达动作，请不要使用像“酷，让它摇滚！”这样的按钮标签。

使按钮圆角矩形

按钮应该是矩形的，因为这也是我们习惯的。我们了解这些按钮的功能。

UXPin

UX照片： UXPin

根据Paul Olyslager的说法，这些矩形按钮也应该有圆角，因为研究表明它们表现最佳。这是因为当圆角指向内部时，圆角会引起对按钮内部的注意。这也是因为我们已经进化到避免任何尖锐角落作为人类，因为它们代表着受伤的威胁。

我们建议您阅读Paul的四部分文章，了解有关按钮设计各个方面的更多信息，包括尺寸。

浮动动作按钮（FAB）

在我们进入按钮位置之前，快速了解一下近年来越来越受欢迎的浮动动作按钮（FAB）。

FAB通常是圆形按钮，它们在用户界面上方“浮动”并且“用于促进动作”。平面设计师Teo Yu Siang说，我们看到更多的网站使用它们来代表用户在特定屏幕上执行最多的单一动作。

Flipboard的

图像源： Flipboard

FAB'浮动'在常规内容之上，可以侵占其他元素，并分散用户对其他内容的注意力。

Siang接着指出，虽然它们似乎是一个好主意，并且在理想情况下提供良好的用户体验，但实际上，FAB的广泛采用实际上可能会损害整体用户体验。

这是因为它们覆盖在屏幕上每个UI元素的顶部，从而减少了沉浸式体验。这会分散用户的整体体验，因此，在将FAB添加到任何页面时应注意，因为这可能会适得其反。

不仅如此，但正如Siang所说，

“通过占用屏幕上的空间，FAB可以有效地阻止内容。”

这并不是说您根本不应该使用FAB，但是您应该注意它们的使用和放置，因为它们可以减少采取所需操作的用户数量。

按钮教程

创建有效的号召性用语取决于多种因素，包括相对大小，颜色和文本。我们将使用UXPin创建一个快速示例，以说明我们刚才描述的一些最佳实践。

人们首先看到了英雄

最大，最顶级的元素受到最多关注。

人们首先看到了英雄

他们的眼睛向下徘徊

接下来是字幕：一些不那么突出的文本会产生一种注意力的层次结构。

他们的眼睛向下徘徊

3.内容移动它们

人们可能会从子标题直接跳到按钮，但通常他们需要知道每个按钮的位置。“销售推销”文本详细说明了用户应该点击每个号召性用语的原因。这个内容是一个承诺：点击一个按钮会得到什么？

内容会移动它们

4.号召行动

行动呼吁本身占据第三层。为什么？

对比：按钮背景突出身体的背景。
文字：清洁易读，通常采用无衬线字体。
安置：在一个漂亮，均匀的行。

号召行动

这个怎么运作

这种模式利用了西方语言的从左到右的流程：因为人们已经习惯于从左上角到右下角阅读，所以按照传统思维安排元素会感觉很自然 - 即使读者不了解它。

这个怎么运作

广州网站定制

相关推荐

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监