如何创建有效的行动召唤按钮

行动召唤在网页设计中——尤其是在用户体验方面——是一个描述在网页中用于诱导用户行为的元素的术语。在网站界面中,最流行的行动召唤的表现是出现在点击表单按钮、完成一个行动(比如”Buy this now!”)或使用附加信息带到一个页面(比如”Learn more …”)等请求用户来采取行动的地方。

我们如何创建有效的行动召唤按钮来吸引用户的注意并引诱他们点击?我们将在本文中通过分享一些有效的设计技术和查看一些实例来尝试回答这个问题。

有效的行动召唤按钮的最佳实践

设计行动召唤按钮到网站界面需要一些远见和计划;它必须是你的原型和信息结构流程的一部分以使他们能够正常工作。在本节中,我们将讨论行动召唤按钮的设计技术。

用大小吸引用户注意

在网页中,一个元素相对于其周围元素的大小表明其重要性:元素越大,它就越重要。判断网站的某种行为有多么至关重要,行动召唤按钮的型号也应相应的调整。

行动召唤按钮与周边元素

Lifetree Creative展示大小的主意以表明他们的行动召唤按钮的重要性。将按钮的大小与公司的logo对比。为了吸引用户的注意,这个行动召唤按钮在宽度方面比logo大了大约20%。尽管logo在页面中放的比较高,你的眼睛还是被吸引到了行动召唤按钮,因为它相对于周边元素比较大。

行动召唤按钮与不太重要的行动召唤的大小

一个网页可能有多个行动召唤。为了区分一个行动召唤与其它行动的相关重要性,你可以改变他们的大小。这里在 paramoreredd 网站有一个使用这个理念的实例,那个页面的让用户注册以获取邮件通知的行动召唤按钮明显的比继续阅读性东召唤按钮大一些,表明在该网页中,与继续阅读日志相比他们更希望你采取订阅

使用突出的位置吸引用户注意

页面中的行动召唤按钮的位置是吸引访问者的注意的关键。放置在突出的位置,比如页面的章节的头部可以带来较高的页面转换因为用户将很可能注意到行动召唤按钮并采取行动。

放置在明显的区域、

将一个行动召唤按钮放置在一个明显的区域是一个让它在页面布局中突出的一个方法。你可以在 dailymile 看到这个概念,行动召唤按钮看起来在一个比其它元素比如图形条高的层面上(在顶部)。

时间: 2024-10-30 02:11:27

如何创建有效的行动召唤按钮的相关文章

wince-WINCE6.0 创建对话框右上角没有OK按钮

问题描述 WINCE6.0 创建对话框右上角没有OK按钮 刚接触WINCE6.0,请问为什么我创建对话框右上角没有OK按钮呢?在设备上运行也是没有OK按钮,麻烦教我一下,谢谢

用CSS3创建一个旋转可变色按钮

先从HTML: < div> < a class="button">旋转按钮</a> < /div> 和现在的CSS: .button { background:#aaa; color:#555; font-weight:bold; font-size:15px; padding:10px 15px; border:none; margin:50px; cursor:pointer; -webkit-transition:-webkit-

C#代码创建WPF程序,增加按钮失败。新手求解答~

问题描述 新手一枚,最简单的增加按钮单击退出程序失败.程序运行后只有空白窗体无按钮,求助.下面是程序namespacee4_1{///<summary>///MainWindow.xaml的交互逻辑///</summary>partialclassMainWindow:Window{privateButtonbutton1=newButton();publicMainWindow(){Title="noVS2008";WindowStartupLocation=

制作良好的行动召唤按钮的10个技术

Having an effective call to action is an essential part of any website. A call to action is not just limited to ecommerce sites. Every website should have an objective it wants users to complete whether it is filling in a contact form, signup for a n

网页设计师:好的行动召唤按钮的组成

With these priority tasks, you need to remove any friction that slows the user's progress. Call-to-action buttons can be a good way of doing this. They look great, but the reason you're using them is to grab the user's attention. Choosing your words

创建按钮(Buttons)和导航条(Navigation Bars)

按钮|创建 创建按钮(Buttons)和导航条(Navigation Bars)(下) 刚才我们创建了一个按钮,接下来我们就可以利用这个按钮方便的创建导航条了.在Fireworks中你可以利用同一个按钮反复衍生出一系列类似的按钮来组成导航条,而无需重复创建多个类似的按钮,大大减少了工作量,这就是Fireworks神奇的地方!!!现在我们就去看看是怎么做的吧. 打开Library面版,将Home按钮拖到画板中,重复这个动作几次,使画板中有多个Home按钮,在这里我一共放了4个相同的按钮. 将这些按

java编程,在屏幕上显示一个带标题的窗口,并添加一个按钮

问题描述 java编程,在屏幕上显示一个带标题的窗口,并添加一个按钮 编写程序,在屏幕上显示一个带标题的窗口,并添加一个按钮,当用户单击按钮时,弹出对话框,显示用户单击了按钮. 解决方案 找点Java 的 Swing学习资料,这种界面估计用netbean或idea都可以自动生成. 解决方案二: import java.awt.Frame; import java.awt.Graphics; import java.awt.GridLayout; import java.awt.event.Act

利用JavaScript创建功能强大的GUI

javascript|创建 大多数的计算机用户都非常熟悉Windows的图形用户界面(GUI),都通过使用Word或微软的电子邮件客户端软件了解了按钮.工具条.标签,但与客户端软件都拥有几乎一致的界面截然不同的是,我们可以发现,每个网站的界面都各不相同.用户需要学会如何使用每一种互联网应用程序.尽管大多数的互联网应用程序都不是太复杂,但一个用户需要不断地去学习应用程序界面,时时感觉自己象个新手,这对于用户而言,毕竟不是一件令人愉快的事. 通过利用javascript和CSS建立互联网应用程序或网

利用&amp;#106avascript创建功能强大的GUI(2)

创建 我们首先来创建一个拥有三个按钮的简单工具条:一个粗体按钮,一个斜体按钮,一个连接按钮.该工具栏是向一个现有的文本域添加功能的好方法,它可以让用户在无需了解HTML的情况下对输入的文本进行简单的控制.任何让用户参与或进行反馈的网站都可以利用这一工具栏进行加强. 我们的工具栏在功能上可以分为下面4个部分: ·封装选定文本附件HTML标记的JavaScript函数 ·定制工具栏.按钮的外观和风格的样式表 ·响应鼠标事件的JavaScript函数 ·包含工具栏代码.图像.表格元素的HTML 我们首