网站建设中的动作按钮设计体例！

发布日期：2017/3/29

在网页设计中采取行动的召唤 -在用户体验（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的操作按钮。