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

在网页设计中采取行动的召唤?-在用户体验(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
呼叫操作按钮被放置在一个显眼的位置,在网页的最顶端,并