网站建设及推广:如何有效地使用幽灵按钮

2020-10-05| 发布者: admin| 查看: |

  杭州网站建设及推广

  虽然幽灵按钮被预测为网页设计的趋势,但很明显,它并没有就此结束。如今,采用这种空心按钮设计的网站数量在不断增加。

  当你想到它的时候,这些按钮并没有什么特别之处,但是,由于它们实际上是一个新概念,许多网站所有者和设计师将它们融入到他们的网页设计中。

  目录:

  理解幽灵按钮

  寻找“幽灵”的最佳位置

  可怕的功能幽灵按钮

  幽灵按钮设计的元素

  幽灵按钮的优点

  幽灵按钮的缺点

  幽灵是从哪里来的?

  呼吁行动按钮:最佳做法概览

  一个网页设计师可以实施的10项罪行-行动网页

  案例研究:Web设计可用性中的行动调用

  理解幽灵按钮

  透明和阴影元素并不是网页设计世界中的新鲜事,因为这些元素几乎是在平板风格设计被接受的同时开始的。由于它们很简单,而且许多网页设计师已经认识到极简设计在加强网页设计中的重要性,鬼按钮将保持它作为一个包含在许多设计页面中的流行程度。

  此外,了解这些鬼按钮的解剖并不在你的头上:

  薄按钮框架或轮廓

  透明按钮背景

  浅色字体

  时尚却简单

  鬼按钮,毫无疑问,是流行的。尽管如此,这并不意味着它们在设计上是复杂的。事实上,可以说,他们的受欢迎程度甚至可以归因于他们的简单性。此外,这种简单的设计,甚至是在网页设计领域的新手庆祝,因为他们提供了方便,当他们被制造。

  如果你试图比较鬼按钮设计由专业和新的网页设计师,你永远无法分辨的区别。然而,这种简单性可以是一种祝福,也可以是一种诅咒。好吧,这是肯定的,它们很容易设计。尽管如此,这也使设计师更容易将这些按钮放置在设计的任何地方。

  如果您是网页设计人员,您需要清楚地了解鬼按钮是如何工作的;它们在设计的特定领域更有效率,以及它们是否用于正确的目的。因此,千万不要滥用创建这些鬼按钮带来的轻松。

  寻找“幽灵”的最佳位置

  ?

  其中一个最好的位置,你可以放置你的鬼按钮是主页,在中心的主页更具体。“为什么“,你可能会问。这是因为这个地方会给鬼按钮一个高水平的能见度,这可能会影响游客的人数谁将实际点击他们。

  你需要记住,总的来说,主页是许多网站用户关注的焦点。这是他们凝视了一段时间,最后才浏览了网站的其余部分。看看下面的网站,注意你的眼睛是如何移动的。

  你可以在这个网站上看到鬼按钮就在网页的中心。它是不是立刻吸引了你的注意力,好像在呼唤你去点击它?当然有,对吧?但是,当然,这个特殊的鬼按钮比其他网站的其他鬼按钮要大得多。

  行动呼吁

  如前所述,鬼按钮的主要优点之一是,它们呼吁访问者到您的网站采取行动。一般来说,它们具有3D效果,因此,它们比通常的CTA按钮要好得多。虽然这是真的,虽然在按钮方面的创新可能不会对你的销售产生重大影响(如果你是一个销售网站),鬼按钮肯定会改变你的用户对你的网站的看法。

  导航菜单

  除了是一个伟大的呼叫行动按钮,鬼按钮也是理想的导航菜单和标签,也。无论你的网页设计多么简单,如果你有功能和高度可用的按钮,这些按钮可能足以满足你的网页访问者。看看Visage的鬼按钮的位置。

  可怕的功能幽灵按钮

  当一个新的设计趋势出现时,作为一个设计师,你可能会不停地思考如何在你的网页设计中使用它,不是吗?同样的事情也可以用鬼按钮来形容。然而,这些按钮是最理想的以下网站:

  I.商业网站设计

  毫无疑问,鬼按钮是商业网站最理想的选择。虽然他们是最受欢迎的类型,但不幸的是,他们也是最克制的。一般来说,商业网站避开了流行功能和常见的设计技巧,但有些网站就是无法抗拒使用鬼按钮。下面是一些使用鬼按钮的商业网站。

  Ghost按钮如何影响您的商业网站:

  1.你的商业网站可以看上去更时尚和创造性的同时,如果你使用鬼按钮,改变颜色时,用户盘旋在上面。访问上面杭州网站建设及推广:如何有效地使用幽灵按钮的网站,看看它的鬼按钮是如何工作的。

  2.鬼按钮可以使它更加专业和低调,特别是当你使用它作为一个CTA。

  3.你可以让你的用户注册一个产品测试版,如果你把它放在折叠部分之上的话。这将使游客注意到它的存在。

  ii.创意工作室网站的鬼按钮。

  如果有一种网站,几乎总是适应潮流,它必须是创造性的工作室网站。这是否意味着他们也接受了幽灵按钮的趋势?请看以下网站:

  ?

  1.Create Conquer

  这个网站使用黑白颜色,它的幽灵按钮也有相同的颜色。有些边框和按钮文本是黑色的,有些是白色的。这完全取决于他们的背景。

  2. Audrey Azoura

  这个家具和室内设计网站正散发着优雅的气息。除了采用以图像为中心的设计,这也是当前的趋势,这个网站还使用鬼按钮与调色板,称赞其主题。

  iii.软件网站的鬼按钮

  许多软件公司也将幽灵按钮的使用纳入了他们的网站。这些网站中的很多都能给你一个提示,说明你如何创造性地使用这些有创意的按钮。其中一些网站只有一个鬼按钮,而其他网站则使用彩色按钮和常规色调。

  1. Philosophie

  。本网站利用传统的黑白色彩与粉红色的色调混合。按钮的设计取决于用作背景的颜色。

  2. ShopMyApp

  这个网站使用有白色轮廓的空按钮,当你悬停在它们上面时,它们就会变成绿色。此外,菜单选项卡也使用鬼按钮。凉爽的

  iv.教育网站设计鬼按钮

  许多教育网站也同样适应了幽灵按钮的趋势。嗯,这并不奇怪,因为这类网站的目的是吸引年轻人。

  1. Vantage Points

  除了在它的登陆页面上有一个视频,这个网站还使用了一个鬼按钮在它上面。鬼按钮也可以在网站的其他网页中找到。

  2. Campus Bubble

  这个网站使用不同的杭州网站建设及推广颜色和它的鬼按钮。特别是,鬼按钮使用绿色、蓝色和橙色。毫无疑问,按钮使网站更吸引人,尽管它很简单。

  五.幽灵按钮和电子商务网站

  很多时候,电子商务网站内容丰富。由于鬼按钮是简单和薄,他们最适合这些网站。

  1. Industry Standard

  然而,行业标准的双轮廓鬼按钮,毫无疑问,看起来很棒的网站设计。双边框只会使按钮更加可见。

  2. 20 Jeans

  这个在线商业网站是另一个验证,它是完全没有问题的图像为重点的网站使用鬼按钮。照片中的模型位于右侧,这使得背面白色背景上的黑色文本吸引了人们的注意。不过,如果文本的颜色与幽灵按钮的颜色不同,那杭州网站建设及推广就更好了。

  它的粗体文字就像操纵眼睛注视鬼魂按钮的方向一样。此外,它只有一个鬼按钮以上的折叠首页,使它很容易被注意到的CTA。此外,CTA使用了“商店”这个词,向用户明确了一旦点击按钮将会发生什么。

  毫无疑问,幽灵按钮是cta的理想选择。

  以上列举的例子,应该是清楚的,现在鬼按钮是理想的几乎每一种类型的网站。然而,也很明显的是,许多设计师提到的网站由鬼按钮,呼吁行动的目的。谁知道在他们想要的行动方面,幽灵按钮是如何利用工作对他们有利的呢?

  如果你是做生意,也许这些鬼按钮可以帮助你获得更多的销售。再说一遍,谁知道呢?然而,请记住,当添加按钮到一个网站,有几件事,你需要考虑,如果你想提高转化率,你将得到。

  在一个简单的背景上看到一个粗体按钮,或者看到一个按钮的颜色与放置它们的背景的颜色形成对比,这是正常的。长期以来,这已被证明是一种收集高CTR的策略。

  理想的形象设计网站

  虽然鬼按钮确实可以在许多不同类型的网站中使用,但就网页设计而言,它们最适合那些使用以图像为中心的设计的网站。有多少网站上给出的例子使用了图像为重点的设计与鬼按钮?他们中的几个!毕竟,与传统的按钮相比,由于鬼按钮的简单性,它们不能破坏大型图像所提供的审美价值。此外,这种类型的按钮也是理想的一页网站.

  鬼按钮和你的iPhone

  你有没有注意到iPhone上运行在iOS 7上的圆形按钮?好吧,如果你没有,是时候让你意识到那些其实是鬼按钮了。专家说,鬼按钮的出现可以归因于这样一个事实,即人们更热衷于制作具有50%不透明度的全屏幕背景。这些背景也使界面形成在它们之上。这是用户将注意力分散到背景图像、反射样式和幽灵元素上的一个机会,这些元素可能不是可见的,但肯定仍然可见。

  幽灵按钮设计的元素

  如前所述,鬼按钮最基本的元素是透明的轮廓、按钮背景和CTA的浅色字体。然而,这些不只是你需要考虑的元素,当你的合并鬼按钮到你的网页设计。你还应该确保你的鬼按钮是:

  包含简单可读的文本

  比传统的按钮更大

  放置在页面的突出区域

  单独地或集体地被安置在一起

  用于平面或几乎平面的设计

  谨慎地使用边界内的几何图标,如果需要的话

  幽灵按钮的优点

  你应该在你的设计中加入鬼按钮吗?以下是关于这一趋势的一些优点,它们可能会让你决定去追求它:

  不可否认,鬼按钮看起来和感觉都很干净。按钮的简单性使得页面的主布局更加突出。

  由于鬼按钮是透明的,他们可以与几乎任何设计,你可以想到。这种透明度使它们能够适应叠加在一起的设计。

  鬼按钮是平面设计的延续。设计趋势保持其流行的唯一途径是在它们适应新概念时继续进行更改。

  鬼按钮可以提供一个令人惊讶的元素,因为它们与许多用户已经习惯的不同。

  鬼按钮为那些将创造和设计他们的人提供了一个很大程度的轻松,因为他们的意思是简单的。如果你是一个设计师,一定要使他们微妙,避免任何可能使他们浮华。

  鬼按钮有一种方式,叫人行动,而不是强迫性。您可能已经遇到过许多网站,这些网站的鬼按钮比屏幕上的其他元素更大或更大。

  因为它们可以在不影响其他元素的情况下变得很大,所以它们可以很容易地吸引用户执行按钮要求他们执行的操作。现在,谈谈一个有效的接口。

  透明和线性设计的鬼按钮给设计师一个微妙的自由,因为它使设计的视觉重量减轻。

  鬼按钮使网页设计复杂,无论总体设计多么简单,如果设计师知道如何使用正确的颜色组合和放置按钮。

  幽灵按钮的缺点

  虽然鬼按钮确实有很多优点,但也有一些缺点。因此,在你开始做任何设计之前,首先要分析一个趋势是否合适。下面是鬼按钮的一些缺点:

  鬼按钮可能被放置在设计的一部分,这可能会使不懂的用户很难注意到它们。事实上,有些人甚至很难识别正常的按钮,并且不知道如何使用它们。非传统纽扣还有多少?

  在有不同颜色或对比颜色的图像上使用鬼按钮可能有点棘手。你可能有一个困难的时间,以找出如何发挥的颜色,仍然可以使鬼按钮引人注目,尽管他们的背景被放置。通常情况下,鬼按钮要么是黑色的,要么是白色的。但是,如果要将这些颜色放置在使用相同阴影的图像或背景上,则可能很难使用这些颜色。你必须记住,鬼按钮的效果在很大程度上取决于它们的位置和可见程度,尽管它们是透明的。

  There are times when ghost buttons can overpower the image that they are paired with.

  While it is here that ghost buttons are simple, the truth of the matter is that they are more complex than “click here”. Since the buttons, more often than not, are small, you need to be very careful in choosing the text that you will use so that it can call a user to act. Additionally, the text has to jibe with the design.

  鬼按钮有时会导致可读性问题,如果它们被放置在照片或彩色背景上的话,就会产生更多的问题。有一个趋势,一些设计师过度使用鬼按钮。虽然鬼按钮确实很流行,但一定要确保你知道如何限制它们的使用。使用它们是为了一个目的,而不仅仅是为了赶时髦。

  幽灵是从哪里来的?

  没有人真正确定鬼魂按钮是如何出现的。设计专家只能怀疑这是不同因素共同作用的结果,这些因素促使他们存在,并被许多网站所接受。至于它的名字,据信是Tumblr发明的。下面是一些不同的因素,它们可能会给幽灵按钮的诞生带来灵感:

  1.HUD

  HUD(头部显示器)从20世纪60年代开始就已经存在,主要用于军用飞机。然而,这只是在过去的几年里,这些成为流行文化的一部分,并已用于电影,电子游戏和汽车仪表盘。由于HUD投影的数据是在您的视图顶部看到的,因此必须以基本轻量级和透明的方式显示这些数据,这样才不会使视点变得模糊。

  当然,这些HUD不是按钮,但是请注意界面的元素是清晰的,它们的基于文本的单元被细线条包围。当谈到向公众介绍HUDS时,不可否认的是,电影“铁人”、“安德的游戏”和“星际迷航”等好莱坞电影为幽灵按钮的出现提供了灵感。

  2. International Organization for Standardization 国际标准化组织 7

  当苹果公司(Apple)的iOS 7上市时,用户对它的界面不那么欣喜若狂,界面上只有极小的按钮和图标,边缘是灰色或蓝色的线条。然而,人们普遍认为,这些都促成了鬼按钮的最终出现。

  3. (事物、思想等之间的)联结,联系,关系 7

  最终,谷歌也利用了幽灵的趋势。自2013年以来,该公司还在其Nexus 7网站上使用了这些鬼魂。它利用了一个与白线相邻的透明按钮,提供了与其背景很好的对比。

  4. 解靴带

  鬼按钮流行的另一个原因是Bootstrap。这是在2013年8月,当Bootstrap 3推出市场,它是在其主页上,似乎是一个原型的鬼按钮。虽然它不一定是透明的,但它具有单色背景和非常简单的特点。许多人开始使用Bootstrap已经开始使用的方式,因为Bootstrap本身被认为是开发网站的一种有效方法。因此,越来越多的网站开发,倾向于平面设计和最小的按钮。

  Conclusion

  总之,毫无疑问,如果你知道如何正确地应用鬼按钮,那么鬼按钮将是非常了不起的。上面给出的例子表明,良好的背景对于鬼按钮的可见性非常重要。同样重要的是,使用颜色将使这些按钮更加引人注目。设计越简单、越基本,它们就越简练。

  在下一节中,我们将介绍其他一些最佳实践。

  呼吁行动按钮:最佳做法概览

  “呼叫到操作”按钮在向用户征求操作方面起着关键作用.为了获取所请求的操作,在网站上放置按钮,允许用户执行一个操作,例如购买某物,或指向另一个页面以获取更多信息。

  在创建“行动调用”时,需要进行仔细的规划,在本文中,我将解释创建有效的“行动调用”按钮的最佳实践。我也会给你们举一些行动上的例子,让你们更好地了解什么是有效的。

  为了使您的呼叫操作成功地工作,您必须首先确定它们将如何适合您的网站的总体方案。通过奠定基础或信息体系结构,您将开始了解按钮在Web界面中是如何工作的。为了在市场上生存,你必须创造收入。因此,成功的网站就是引导网页读者达到预期的最终结果的网站(“立即购买”…)。了解更多“)。现在出现的问题是,我们如何有效地调用在现实世界中工作的动作按钮。

  需要考虑的因素

  Size

  在网页设计中,历史上元素越大,它就越重要。在将用户转换为采取行动的过程中,与其周围元素相关的呼叫到操作的大小是必不可少的。毕竟,如果按钮的大小很小,并且与文本的其余部分混合在一起,那么很难从用户那里获得预期的操作。

  使用空白:通过增加按钮的大小可以实现的许多功能也可以通过简单地将按钮放在足够的空白周围来实现。一个被空格包围的按钮将比一个在文字和图形的海洋中丢失的按钮更加突出。

  在调用动作按钮和周围元素之间的空白越多,它们之间的连接就越少。因此,如果您有其他可以帮助说服用户采取行动的元素,请减少这些元素与操作调用之间的空白。

  您可以看到使用突出的颜色、足够的空白和相对于周围元素的大小来吸引用户注意的效果。直截了当的语言传达了一种轻松的感觉,声称你可以立即采取行动“开始”。

  MozillaFirefox的“免费下载”按杭州网站建设及推广钮MozillaFirefox是一个真正的革命,在呼吁-行动图形。它的大,不均匀的形状,活泼的颜色和面向细节的按钮已经在这个行业留下了它的印记。

  Color

  为了确保用户注意到您的按钮,考虑它的颜色也很重要。虽然有一些选择的颜色,呼吁行动按钮,这是值得选择的对比颜色,而不是背景。这本质上使按钮跳向你,吸引你点击它。

  有时有人说红色按钮(和红色文本链接)效果最好。

  进行一些A/B测试,看看哪些颜色最适合您的网站

  任何按钮的性能都可以归因于页面上的对比度,而不是它的颜色。

  Vuze.com的访问者会发现下载呼叫行动按钮没有问题。使用对比的颜色,大量的空白,以及放置在页面的顶部和底部,使这一行动的呼吁引人注目和有效。

  Placement

  一个有效的按钮应该清楚地显示在页面上,并且至少相对于其他元素相对突出。

  在登陆页面上-实际上,对于大多数页面来说,这是可行的-按钮应该出现在折叠的上方。如果访问者不得不滚动才能看到按钮,点击按钮的可能性就会大大降低。

  通过将按钮放置在页面顶部(或折叠上方)和较长页的底部,增加单击按钮的可能性。如果用户已经传递了页面,则很可能不会向上滚动,如果他们已经看到页面,则可能不会向下滚动。

  接近其他页面元素也很重要。显然,对于一个电子商务网站,一个“添加到购物车”按钮,就在一个产品旁边,应该比一个更好的进一步删除。

  在其他情况下,重要的是保持一个呼叫-行动按钮接近的东西,如价值主张,证明和特征列表,旨在刺激转换。

  你可以在YourWebJob.com的网站上看到这些概念。通过号召行动“发布一份工作!”在一个非常突出的领域,更有可能的是,用户会注意到或记住它以后,他们已经看了网站的内容。

  移动网页设计这个调用动作按钮被放置在一个突出的位置,它有很大的大小和独特的颜色相对于周围的元素。

  移动CubixMobileCubix使用了围绕“ReadMore”按钮的圆形轮廓,然后将其引入应用程序,这不仅吸引了访问者的注意力,而且还告诉了他们可以期待什么。

  使它的使用为人所知

  当然,如果按钮看起来并不像一个按钮,那么这些步骤都不重要!您需要向访问者清楚地表明,这个图形实际上是一个按钮,可以单击该按钮来生成一个特定的操作,而不是页面上的另一个元素。从图形上讲,有许多方法可以做到这一点,包括:

  压花按钮

  将调用到操作的文本放置在离散的边界区域中。

  将按钮与其他图形元素相抵

  当用户的鼠标悬停在上面时,它的行为就像一个按钮

  对于没有超链接的按钮(所以不要在鼠标超过状态时自动生成手符号),这可以很容易地用CSS实现。

  鼠标上方按钮外观本身的变化,如颜色的改变,是对访问者的进一步信号,即按钮是可点击的。

  Kalculator-这一行动呼吁-准确地告诉用户所期望的是什么:通过点击这个“行动呼吁”,他们应该预计将支付3.99美元。使用“只”一词暗示,这是一个相当不错的交易,这可以帮助进行销售。

  邮箱通过下载呼叫为行动增加了价值,增加了它的“免费”30天的试用,并减少了消费者的疑虑,通过购买呼吁采取行动,它是一个“无风险保证!”更多的时候,网站呼吁采取行动,只是要求访问者购买现在!而不加强行动的价值或易用性。

  SEO

  在许多情况下,按钮直接链接到搜索引擎索引的页面。添加alt属性将为搜索引擎提供与目标页面相关联的文本:如果在目标位置上使用关键字,则应在alt中使用它们。

  为了最大限度地利用你的按钮,你的杭州网站建设及推广:如何有效地使用幽灵按钮的alt属性(或者,取决于浏览器,一个

  Additional Resources

  如何在Photoshop中创建光滑干净的按钮

  10种有效的“行动呼吁”技术

  下一节将专门展示调用操作按钮的最坏示例。你当然应该避免这些。

  一个网页设计师可以实施的10项罪行-行动网页

  呼叫行动页面是专门用于提示访问者采取所需的行动,无论是选择,销售,或任何类型的点击,使用户离公司的目标更近一步。基本上,任何网站都可以被归类为“号召行动”页面,因为几乎每一个创建网站的人都有他/她希望访问者采取的具体行动。大多数网站至少犯下以下最严重的罪行之一。你同意这些选择吗?

  1.图形杂波

  很明显,这个网站的目的是向访问者展示尽可能多的信息。虽然这是一个勇敢的努力,太多的图形可能会对你不利。

  一个伟大的呼吁行动网页会让你的眼睛看到一个特定的领域。当你看这一页时,你的眼睛到处都是,如果你在找一辆车,你甚至不知道从哪里开始。

  虽然这个页面不是一个登陆页面,但它是一个主要的例子,为什么在尝试增加网页设计的转换时,更少是更多。一个呼吁行动页面应该包括好处,功能,标志,可能有一两个杭州网站建设及推广:如何有效地使用幽灵按钮和一个突出的呼叫行动按钮。如果再这样下去,这一页就会受到影响。

  一个网站的主页应该效仿,同时包括明确的导航和一个轻松的经验,为访问者。不惜一切代价避免混乱。空白是你的朋友!

  2.混合行动呼吁

  虽然此页面上的“调用动作”按钮是黄色的,但它在背景中不够突出。黄色也与上面的字体相匹配,因此它会更多地融入背景。页面的颜色方案是黄色、红色和橙色,调用操作按钮遵循相同的颜色方案;因此,它不够突出。与页面形成鲜明对比的纯色效果最好。

  3.分散背景

  许多企业希望将他们的品牌色彩融入他们的网站设计。虽然这是一个聪明的营销策略,如果颜色被过度或分散注意力,它可能会产生不利的影响。这个网页中明亮的黄色背景非常令人分心,它吸引了人们对网站目的关注。如果你看这个网站的正常大小,你会看到如何真正分散明亮的黄色背景是什么。

  在你的网站设计中实现你的品牌色彩是很好的,但不是为了分散访问者对你的目标的注意力。你的背景应该支持你的网页,并在一定程度上保持中立。

  4.行动失败

  在此页面上,“调用操作”按钮不仅丢失,而且不存在。该网站希望采取的措施之一是敦促用户单击并查找更多有关“感谢总理”卡的信息。当前对行动的呼吁只是简单的文字,上面写着“开始行动”。

  如果你真的想引导用户到一个预定的行动,使用按钮的对比颜色。文本将永远不会强大到足以引起用户的注意。该按钮应该包括一个对比颜色,尖叫“点击我”,而不是在用户的脸猛击它。

  还考虑调用动作按钮的接近其他元素。例如,对于电子商务站点,“添加到购物车”按钮将是最有效的,如果它被放置在产品旁边。你也可以在诸如推荐信、特征列表和好处等感兴趣的地方附近放置行动按钮。但要确保,不要把页面上太多的按钮弄得乱七八糟。保持他们接近你的关键点,并在每页最多2-3页的简单登陆页。

  5.太多的信息

  当人们给我们提供比我们想听到的更多的信息时,我们经常说是TMI或太多的信息。就像你希望那个人安静一样,一个网页如果受到TMI的影响,也会遭受同样的指责。

  在这个例子的网页上,对行动的调用不是正面和中心,你的眼睛被吸引到文章上,而不是“得到一个引用”文本。这一页,虽然是为了吸引游客获得引用,引导他们阅读一篇文章,这可能是太多的信息,这一页。内容不一定是坏的;伟大的内容勾勒出一些最伟大的网站的网页。但是,当它模糊了网站的信息,或者分散了用户对行动的明确呼吁,利润就会受损。

  对于这个网站来说,在一个更有效的地点采取行动的更突出的号召首先会吸引人们的注意。

  “呼叫行动”页面的目标是引导访问者点击“呼叫行动”按钮,而不会因为太多的信息而分散他们的注意力或使他们感到厌烦。你应该包括足够的信息(特征、利益、保证、证词),以引导他们采取行动而不过份。如果你的访问者不知道你的网站是否会在最初的几秒钟内对他们有利,他们将假设最坏的和高尾的。

  6.链接太多

  这一页实际上是相当好的排名竞争抵押相关的关键字,但网站的设计不幸没有遵循。

  除非您的网站是特定产品(电子商务)或纯粹的信息,过多的文本链接可能压倒用户。

  本网站的目的是引导消费者获得按揭报价。虽然按状态对链接进行分类是个好主意,但杂乱和小字体对访问者的眼球毫无帮助。如前所述,文本链接是无效的,因为在这样的页面上呼吁采取行动,而这些链接的接近使所有的东西都乱七八糟,看起来像一个有凝聚力的蓝色链接。

  这里没有明确的行动呼吁。这个网站管理员将受益于让这个页面成为第二个页面,并重新设计主页,只包含一个或两个按钮,从而引导人们“获得一个引用”。

  这里有一个窍门:稍微斜视你的眼睛,模糊你的视力,看看页面。如果你的行动呼吁不突出,可能需要作出调整。

  7.按钮放置及位置

  虽然这个网站有很多错误,但我选择它是因为不正确地放置“呼叫行动”按钮。

  如果您查看最右边(您可能花了几秒钟才找到它,这几秒钟太长),您将发现一个带有下拉菜单的小框。这是网站管理员希望用户点击的地方。唯一突出的元素是小红箭头,这甚至是值得怀疑的。

  呼叫动作按钮的位置和位置与其大小和颜色一样重要。一个伟大的行动呼吁将不会是有效的,如果它被太多的文字包围,或没有足够的空白,或如果它位于视线之外。

  一般来说,重要的是保持动作按钮上方的折叠(访问者可以看到它没有滚动),清楚可见和突出的相对于所有其他元素。如果只有滚动才能看到内容,则在最后包含一个“调用动作”按钮,这样用户就不必再向上滚动才能单击它。

  8.按钮大小

  你的网站访问者应该知道,他们需要去的地方,他们的第二次登陆你的网站。在这个例子中,虽然设计得很好,但是这个“立即购买”调用动作按钮对于网站的动画来说似乎有点小。如果你点击整个网站,你会注意到一个忙碌的背景,这也会分散你对小按钮的注意力。

  不过,请注意,较大的按钮并不总是与更高的转换相关联。按钮应该从其他设计元素中脱颖而出,而不是压倒整个设计,这也可以让人远离。

  9.按钮文本

  这个网站使用“去”这个词来敦促用户点击一个引号。虽然设计确实吸引了你对报价框的关注,杭州网站建设及推广但我不确定“去”这个词是最好的选择。

  虽然有一些基本的规则按钮文本,以最大限度地转换,它更多的功能类型的网站,而不是一个普遍的共识。例如,提供免费试用的企业可以使用“点击这里获得免费试用”,而面向服务的网站可能使用“开始今天”。

  调用操作按钮文本的一般经验规则:

  避免言过其实

  简单一点

  增加紧迫性

  如果适用的话,有限的可用性

  使用“现在”或“今天”这样的动作词。

  总分裂试验

  当涉及到诸如按钮文本之类的元素时,确定哪种方法最有效的唯一方法是拆分测试。有时,微小的变化可以大大提高转换率。

  10.没有明确的信息

  许多企业不清楚他们的销售漏斗,因此,他们的访客没有被引导采取预期的行动。这家经销商试图迫使用户一次执行太多的操作,同时阅读文本,这对于那些想买车或租车的人来说可能很无聊。

  提示:你呼吁行动的目的只是让用户进入下一步。在经销商的情况下,最终目标将是出售一辆汽车,但这不应该是网站的主要目标。那是汽车销售员的工作。该网站只应敦促访问者采取下一步,即访问经销商。

  不要试图用你的网站出售汽车。把下一步卖了!

  你有没有看到任何呼吁采取行动的罪行?你犯了什么叫行动的罪行?

  有了这些关于鬼按钮和行动按钮的讨论,我们还有一件事要给你。一个关于可用性和调用动作按钮的案例研究。

  案例研究:Web设计可用性中的行动调用

  我最近一直在为一个很大的组织开发一个新的网站。该组织由许多政策小组组成,这些小组的任务都是保持不同的感兴趣的主题保持最新。这方面的失败之处在于,每个政策团队都认为自己的内容是最重要的。因此,每一个新的部分都被赋予了“使它更加突出”的指示。

  我们不断地告诉他们,每当我们使一些“更突出”的东西,我们从以前突出显示的部分,有效地使什么都不突出。在研究这个话题的时候,为了为我们的客户制定一个基于证据的帖子,我发现了很多原因,为什么必须把你的行动呼吁归结到你想要从你的听众那里得到的核心结果。

  谨防造成选择瘫痪

  “…我们认为,如果我们为用户提供200个品牌的花生酱,他们更有可能找到一个符合他们口味的品牌。Schwatz引用大卖场的调查结果表明情况正好相反。当向顾客展示某一商品的大量品牌时,购买该商品的顾客比展示的品牌少得多。“

  当用户有太多类似的选择时,就会出现选择瘫痪。大量的选择让消费者对该选择感到困惑。最后,他们根本没有做出选择,因为他们害怕做出错误的决定。

  你们的行动呼吁应该有明确的结果。

  “…与其说是行动的数量,不如说是每一种行动的独特性。“

  保罗·博格

  如果您需要在一个页面上为您的用户提供多个操作调用,请确保您的用户理解他们之间的区别。例如,一次调用行动标记为“注册”,另一次标记为“注册”,这将使任何用户都很难理解他们应该选择的选项。如果这两种行动呼吁似乎都会导致同样的结果,那么出现混乱的可能性就会增加。

  我们不看网页,我们扫描它们

  “关于Web使用的一个非常详细的事实是,人们很少花时间阅读大多数Web页面。相反,我们扫描(或浏览)它们,寻找吸引我们眼球的单词或短语。

  史蒂夫·克鲁格(别让我觉得)

  如果用户按照显示的顺序读取网页上的所有内容,那么多次的操作调用就不会那么麻烦了。个人将阅读支持段落,决定他们想要阅读更多关于这一点,并点击相应的链接。

  然而,正如史蒂夫·克鲁格所描述的那样,“我们扫描(或浏览)它们,寻找吸引我们眼球的单词或短语”,这意味着你的用户不太可能阅读相关段落,而是在呼吁采取行动的过程中根据文本选择下一步的位置。对行动的呼吁越多,他们就越有可能选择错误的行动。

  只有这么多的方法才能使某物脱颖而出。

  每次我们的客户要求我们在一页纸上做一些“突出”的事情时,他们似乎都不理解我们的警告,即这将冲淡以前的行动呼吁。我认为这是因为他们习惯于看到页面处于以前的状态,因此对以前的操作调用不再敏感。因此,当我们再加上一个,这是最突出的,对他们来说,远远超过任何其他。

  然而,该页面的新浏览者没有以前的经验,因此,对他们来说,一切都是新的,因此要争取他们的注意。

  只有少数几种不同的设计技术可以用来使事物脱颖而出:对比,空白,大小,定位等。考虑到这一点,当您在页面上有无数次的行动呼吁时,它们中的任何一个都不太可能比其他的更突出。

  更多的选择会导致更大的沮丧,因为期望值提高了。

  “当人们有更多的选择时,他们就会期望更多,因为他们期望能够选择完全符合他们需求的确切物品。”

  我们的客户主页由多个吊舱组成,每个吊舱代表着目标受众的不同部分。我们试图创建一个宽的豆荚,以确保每个访问该网站的人立即注意到一个可能对他们有潜在影响的部分。然而,我们的客户想介绍一些非常具体的角色以及我们的更广泛的建议。

  这就提出了一个问题,即访问网站的人可以看到这些更具体的选择,并认为他们将发挥特定的作用,从而提高了他们的期望。当他们发现他们的特定区域没有被代表时,他们可能会错误地决定这个网站没有他们想要的东西。

  然而,如果我们能够将豆荚的数量保持在最低限度,用户将更有可能想要探索一个可能与它们相关的部分。

  To conclude

  当考虑到在你的网站上可能需要行动的时候,一定要问自己为什么每个行动的呼吁都需要在那里。更多的行动呼吁导致更复杂的界面,并可能导致更多的不满。

  试着只突出显示您网站上最重要的操作,否则您可能不会冒任何呼吁被注意到的风险。最后,我想给大家留下一个集中行动的好例子。

  在280张幻灯片上的人已经决定,他们希望他们的用户尝试他们的产品的演示,所以这是唯一的呼吁行动在主页上。他们可以很容易地给他们的用户很多选择,增加他们的认知负荷,但是他们做了很好的工作,把他们的观众集中在他们认为对他们来说最重要的任务上。

  相关阅读

  选择的瘫痪与如何提高销售和顾客满意度

  “呼吁行动”按钮:示例和最佳做法

  10种有效的“行动号召”技术

  ?

 
QQ在线咨询
售前咨询热线
023-63612427
售后服务热线
023-63612876
返回顶部