网站建设中的动作按钮设计方式！

在网页设计中采取行动的召唤 -在用户体验（UX），特别是-是一个术语，用于在网页中的元素，征求用户的行动。最流行 的体现，呼吁采取行动网络接口的形式可单击按钮，当按下时，执行一个动作（例如：“买这个吧！”）或者导致一个网页的其他信息（例如，“了解更多...” ），要求用户采取行动。

我们如何才能建立有效的调用操作按钮吸引用户的注意力，吸引他们点击？我们将在这篇文章中，通过分享一些有效的设计技术，探索一些例子来回答这个问题。

到Web界面的操作按钮设计调用需要一些预先计划和规划;它的原型设计和信息架构过程中的一部分，为了让他们很好地工作。在本节中，我们将讨论一些设计技术的呼叫操作按钮。

绘制用户的关注与大小

在网页中，相对其周围的元素的元素的大小表明它的重要性：元素是较大的，更重要的是。决定如何是至关重要的某些站点操作和大小，您的通话按钮行动。

调用动作按钮与周围的元素的大小

Lifetree创意表现出这种想法的大小来表示他们的呼叫操作按钮的重要性。比较其与该公司的标志按钮的大小。为了吸引用户的注意，调用操作按钮大约是20％ （宽）标志。即使标志被放置在网页上，你的眼睛被吸引到调用操作按钮，因为其较大的尺寸与周围的元素。

调用操作按钮与不太重要的电话行动的大小

一个网页可能有多个呼叫的行动。要指示行动与其他行动调用的相对重要性，你可以改变它们的大小。下面是一个例子，这样概念上的Paramore的|里德网站：调用操作按钮，要求用户注册他们的通讯是明显大于继续阅读呼吁采取行动，表明这个网页上，他们宁愿你采取行动的订阅与阅读的博客文章。

绘制用户注意突出位置

在网页上的的调用操作按钮位置画眼睛的访客是至关重要的。放置在显眼的位置，如一个网页的顶端部分的，可能会导致更高的着陆页转换，因为用户可能会注意到的调用操作按钮，并采取行动。

放置在一个杰出的面积

把一个呼叫按钮上一位杰出的行动，使得它脱颖而出，在网页布局的方法之一。在行动中上的dailymile的调用操作按钮看起来是在一个更高的层面（顶部）其他的元素，如酒吧图形的网站，你可以看到这个想法。

在网页的顶部的放置

为了说明这个概念，在“发布招聘来看看！” 打电话给位于你的网络招聘网站在很右上角的动作按钮。通过将呼叫行动中一个非常突出的区域，它更可能的用户会发现它过一会后，他们已经看了看该网站的内容。例如，如果一个作业海报的张贴工作采取行动之前，要浏览这个网站，“发布工作！” 呼吁采取行动将是为他们准备的页导致他们的转换，他们将在那里他们可以很容易地采取这样的行动，因为它突出的位置，更容易记住。

安置在一个布局的中心

定位调用操作按钮在中间的网络布局，没有（或明显较小的去加重的）侧翼的元素可以是一种有效的方式提请注意和诱人的动作。在的情况下PicsEngine，即使调用操作按钮不具有较高的颜色与背景的对比度和周围的页面元素，它仍然提请注意，仅仅通过它的中心位置。

使用空格从其他元素中分离呼叫的行动

调用操作按钮周围的空白（或死腔）是一种有效的方式，使得它脱颖而出的地方有很多元素。

空白字符用于区分调用操作按钮

IconDock如何有效的足够的空白。即使是一个小的和显然的调用操作按钮，但它仍然突出，因为在其相邻的元素之间的空间。

不同量的空白来表示逻辑连接

更多的空白，有操作按钮与周围的元件之间的调用，连接他们。因此，如果你有其他的元素，可以帮助说服用户采取行动，减少这些元素之间的CTA中的空白。

例如，捐助者工具上面的文字“注册”呼吁行动，告诉用户注册的好处。在它的右边是一个浏览器的截图是为了美观，而不一定是提示用户点击“注册”呼叫操作按钮。通过减少中的空格之间的文本，并呼吁采取行动按钮，你这两个元素在视觉上。在浏览器的截图和图像之间的空白，确保行动的要求，眼睛都不能偏离。

使用高对比的颜色

决定使用什么颜色的呼叫操作按钮，是非常重要的。使用您的呼叫操作按钮，具有高对比度，相对于周围的元素和背景的颜色，因为它是非常重要的，以确保用户注意到您的行动呼吁。

色彩的对比与周围的元素

Notepod举例说明了如何调用之间的行动和其周围的元素，可以有效吸引用户的关注，直接把它的色彩对比。周围的元素全是黑的，而调用操作按钮，是一个明亮的蓝色。

前景/背景颜色对比

谷溪堂将其明亮的黄色的“了解更多”调用上述操作按钮的灰度图像。即使有简单的调用操作按钮设计在顶部的复杂元素（在这种情况下，照片），它仍然是，因为颜色的选择。

提供二次行动方案

一个网页可以有多个呼叫的行动。有时有必要为了说服后采取行动所需的主呼叫的用户提供一个辅助操作。例如，在用户注册的Web服务，一些用户可能需要进一步的信息会提示采取行动签署辅助操作可能是在提醒他们采取产品介绍或访问一个网页的更多信息，有关的产品。

旁边的主要操作显示辅助操作

OfficeVP显示两个旁边的操作按钮呼叫对方-中心和位于顶部的网络布局。通过不同的颜色，用户可以看到他们有两个不同的路线：他们可以直接（主要行动），或者，如果他们想了解更多在提交之前，他们可以采取的一个旅游第一次要动作。

变速箱也显示了这种概念具有二次行动所需的主要行动。在这种情况下，将主要动作是为用户购买应用程序。如果他们想尝试一下在购买之前，那么第二所需的行动是第一次下载的应用程序。请注意，使它更为突出比辅助操作中，具有较高的颜色对比度其比二次呼叫动作按钮的背景表示主要动作。因此，可以有效地由左到右画眼睛。

另外，还要注意使用之间的两个呼叫按钮相对于其他元素在该地区的行动，有效地减少空白的按钮组合在一起。

以下主要操作显示辅助操作

另外，你不妨来显示二级以下主要行动的行动。这可能是必要的，如果你需要有更大的视觉分离您的通话行动。virB的这种情况下，“立即加入”行动呼吁放在上面的产品介绍中的辅助操作。请注意，进一步分离辅助操作的主要操作使用更柔和的颜色，它的默认状态。

传达一种紧迫感

使用大胆，自信，和命令的话，可以改变用户的感知，以这样的方式，以说服他们，他们不应该等待更长的时间来采取行动，并采取行动，等待行动的措辞会导致罚款或错过的机会。

点击丝锥演示了这种想法，呼吁采取行动的紧迫性。“现在购买”拨打我们的行动按钮文本“促销价”，巧妙地暗示，在用户等待采取行动，更高的风险，付出更多的入门价格将通过。

通常情况下，建议执行一个动作，可以有效创造紧迫感。使用的话，如“现在”，“立即”和“现在”可以传达这样的紧迫性。组委会为美国（BarackObama.com）的例子，吸引网站访问者“捐赠”。相反，如果只是简单地说：“捐赠”，紧迫感就会消失，用户可能不太可能采取行动。

推荐用户采取行动是很容易的

通常情况下，用户毫不犹豫地采取行动源于思想，一个行动将是困难的，昂贵的，耗时的。通过照顾这些关注，操作按钮，您的通话可能会导致更多的转换。

例如，在大本营，操作按钮调用明确定义的时间，将用户注册，并告诉用户注册是不花钱的（免费）。这种做法削弱了两个主要的用户所关注的问题，当谈到采取行动在线支付（这也要求他们采取额外的行动，如得到他们的信用卡）和时间的限制。

在茶回合应用的例子，他们告诉用户，他们将不会收到垃圾邮件的电子邮件采取行动的订阅他们的电子邮件服务，这是给您的电子邮件，第三方服务时，引起人们的关注。

告诉用户什么期望

大多数互联网用户都在犹豫，他们在网络上面值拿东西。根据经验，他们的信任已经烧毁之前承诺免费服务的链接，才发现，他们不得不把自己的信用卡号码，以获得他们想要的东西。为了提高点击转换和建立信任，预测用户的怀疑，并告诉他们，他们将获得通过你向他们提出采取行动。当调用操作按钮设计，认为所有用户将有潜在的问题，并确保你回答他们的时间。

Mozilla Firefox浏览器，告诉用户究竟是什么，通过点击操作按钮调用。操作按钮的调用告诉你，你会得到火狐3.5，它是免费的，并且对于那些需要更大的特异性，确切的版本是3.5.3的Windows操作系统中，使用的语言是英语，而且你应该期待一个7.7MB的下载。

Onehub预期的问题，用户采取行动时是否需要支付或是否他们可以把产品进行了试驾的告诉用户，如果他们采取行动签署，他们将有一个30 -天试用版是免费的。

呼叫“动作按钮”设计展

现在，我们已经讨论了一些最佳实践，设计调用操作按钮，让我们来看看一些示范性的实现调用网站上的操作按钮。在这些设计中，我们将配合从上面的技术和最佳做法，并探讨它们如何帮助实现良好的设计实践。

运动监控
提出了两种潜在的用户操作：“试试吧”和“查看功能”的这组调用操作按钮。谁知道运动监视器，想尝试一下现在对于用户来说，他们可以采取所需的主要动作，而另一些人想探索在承诺的时间之前，可以采取辅助操作查看的Web应用程序的功能。

文件共享HQ
调用操作按钮告诉用户所期待的（以分钟为单位的“开始共享文件”）。

这组呼叫Livestream.com动作按钮使用垂直排列的分组来指示所希望的顺序被呈现给用户的操作的重要性。所需的主要措施是，其次是获得有关该服务的详细信息，最后得到的估计，比较和对比不同的计划。

Traffik CMS
呼叫操作按钮被放置在一个显眼的位置，在网页的最顶端，并突出显示相对于周围元素的大小和颜色的使用。

汉博设计
这个调用操作按钮告诉用户什么期望得到一个报价，没有任何附加条件。该公司预计“报价多少成本我，如果我投资我的时间，在这个过程中经历的问题吗？”

的Resumator，
你可以看到许多最佳实践在行动上调用操作按钮，实现。首先，它使用了空白，大小，颜色清晰地将它从其他页面元素。然后，要创建一个逻辑分组的元素，可以帮助说服用户采取行动，它具有更少的空白，它的功能上面的文字，并辅助操作“以旅游第一”的下面。

wufoo
Wufoo提供两个操作，用户可以采取在水平布置的方式，所需的操作与主左方。按键很大，非常辛苦错过，但他们却是不碍眼的整体设计。

移动Web设计中，
这个调用操作按钮被放置在显着位置，它有庞大的规模和鲜明的颜色与周围的元素。其次是为了提供额外的上下文是什么意思“购买书”，调用操作按钮文字说明的成本和可用的格式（传统图书或PDF）。

NCover
这些调用的操作按钮重叠。所需的主要动作是顶部的蓝色辅助所需的动作。用户绘制的按钮，因为大小，并使用一个蓝色的色调为二次所需的动作静音它相对于主所需的动作。请注意使用空白来创建三个相关的元素，可以帮助进行销售的逻辑分组：文本，告诉用户什么NCover，注册呼吁采取行动，并呼吁采取行动的旅游。与此相反，请注意这组，在右边的元素的增加之间的差额。

Xero的
行动呼吁这组展品的使用，为用户提供一个辅助操作。在右边的主要所需的操作，有一个文本链接，要求用户“了解更多”。对于不愿意马上注册的用户，设计可能会增加，用户将发现更多的“签约前的可能性。

道效应-间谍
这是一组操作按钮调用，为用户提供了三个选项：下载，现在购买，或升级。在这种情况下，所需的主要动作是下载的应用程序，然后由两个相等的优先级的行动求购现在，或升级。这种区别是由不同的颜色的调用操作按钮，更加突出两个次级行动的主要操作。

发票机
在这里，你可以看到两个呼叫按钮，突出了蓝色的边框的行动。因为他们俩都是相同的样式，我们可以假设他们有平等的重要性。或许该公司决定，这是不可能的用户将采取的行动签署之前看到他们所提供的是什么，或者是他们已经确定的产品巡回演唱会帮助他们的成员更有效地转换成观众。

Ekklesia 360
这组调用操作按钮的图标展示了前进的（指向右边的箭头表示）来表示感。他们使用高对比度的颜色对深蓝色的背景下，以拨打电话的动作突出，在网页的设计。

结帐
通过使用一个非常突出的颜色相对于整体设计的操作按钮调用，即使它上面的图片是明显大于按钮的大小，但它仍然设法吸引用户的注意。

spinen
直接和明确的语言告诉用户什么期望时，他们采取行动：在这种情况下，按一下上调用操作按钮将让他们找到更多的产品。

代码库
调用，操作按钮，告诉用户他们可以采取行动：15天免费试用。它设法吸引用户的注意，通过使用高对比度的颜色，在左侧的图标，以及大量的空白。

GoodBarry
在此呼吁采取行动，你可以看到，如何的空白，大小和智能色彩决定是有效的，在拨打电话的动作非常明显的。强调他们的行动将是“免费”向用户所期待的。

唤醒互动
，相对于其周围的元素调用操作按钮的颜色使得它弹出，即使有少量的周围的空白。

OH！媒体
真正代表这个调用操作按钮的页面，因为它的位置，周围的空白，以及-最重要的-在色彩上有所选择。在页面看，眼睛都直接取材采取行动的号召。

Pixelcrayons
看看如何，空格可以大大提高多的关注，这个调用操作按钮绘制。

棒球场
的大小，这个调用动作按钮被有效地吸引用户的注意力。它的清晰和直接的语言告诉用户什么期望时采取行动。

每月一个主题
调用行动小组将主要在中间的替代行动所需的操作。通过选择一个非常突出的颜色所需的主要行动，随着更大的区域，它管理把它上面的重要性的顺序相比，辅助操作。

Scrapblog
使用突出的颜色，足够的空白，大小相对于周围的元素，以吸引用户的注意力，你就可以看到效果。直白的语言表达了一种从容，声称，你可以在“开始”马上采取行动。

13个创意的
调用操作按钮显示了如何通过使用一种非常规的设计，你仍然可以提请注意，即使周围的元素的比例较大。

Kalculator
此呼吁采取行动告诉用户什么期望：通过单击此呼吁采取行动，他们应该预见炮击3.99美元。使用“只”字暗示，这是一个相当不错的交易，它可以帮助进行销售。

网页设计海滩
下面是一组调用两种不同颜色的操作按钮。更加突出的一个，“报价”表明，它是所需的主要行动。

苏格兰高地舞
呼叫按钮呼吁关注本身的空白，有很多突出的位置，并使用一个图标，以区分本身的行动。通过使用这个词：“现在”，它所传达的紧迫感和需要立即采取行动。

商业IQ
调用操作按钮的大小和突出的定位，吸引用户的注意力。一个放大镜图标添加上下文的行动的目的。添加文本“搜索”预期的问题，用户可能需要的行动的成本。

仪表板
在这里，你可以看到使用的高对比色，使呼叫行动中脱颖而出，即使在较大的页面元素。

其他资源呼叫“动作按钮”

如果您想了解更多关于呼叫操作按钮，这里有一些相关的资源和文章在其他网站上。

6修订，是我写的关于本教程在Photoshop中创建一个漂亮的，干净的按钮，会告诉你如何使大和明显的调用操作按钮步骤一步。

鼓舞人心的按钮，
如果你需要一些灵感良好的按钮设计在网页设计-模式塔，看看这个模式塔集。

10技术有效的“呼吁行动”
保罗BOAG讨论了一些技术，良好的通话操作按钮。

良好的通话动作按钮
UX展位有一个良好的通话操作按钮由一个好片。

Firefox中演示如何强烈呼吁行动可以提高
阅读一个良好的通话操作按钮，可以提高转换的着陆页面的性能。你会发现一个比较之间的呼叫使用火狐，Opera和Internet Explorer的操作按钮。