建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > 交互设计教程 >

5条建议帮助设计一个成功的购买按钮

更新时间:2017-05-06整理编辑:建站学习网阅读:0

不管你是设计师、网销人员还是电子商务站点的站长,都不能忽视“购买按钮“所起到的作用。在本文中,我们将一起跟随来自波兰的企业家Karol K看看在“购买按钮“的设计中应注意的几点。

站长之家(CHINAZ.com)4月11日编译:如果你是一名设计师,或网销人员,或者刚盘了一家网站打算卖 点东西,从某些方面来看,你必须得设计一个合适的“购买按钮“。不过很快你会发现只是把“buy now(立即购买)“字样的文字放在一个蓝色的矩形上是不够的,因为这并没产生你预期的效果。幸运的是,一旦你了解了一些基本知识,设计一个合适的购买按 钮并不太难。

首先,按钮上的文本非常重要,但还有其它功能要处理。为什么说文本最重要呢?试想一下,如果上面写的是诅咒性质的字样,按钮设计得再漂亮也没有用。因此,好的内容是金钱的来源。

在今天的文章中,我们会讨论一个合适的“购买按钮“至关重要的5个特征。

1.整体样式

这是第一条,也是最重要的特性。

你要琢磨让你的按钮变成“紫牛“。“紫牛“的概念是有塞斯·高汀(Seth Godin)提出。简而言之,就是让你的产品出众。我的意思是说,出众的产品是不会被大家忽视的,就像草地中间那头闪亮的紫牛一样耀眼。

一些设计师并不太擅长产品的包装。创建一个与网站颜色和样式完美契合的按钮是很吸引人的。这似乎是一个非常好的主意,可惜它不是。

问题是这样的按钮并不能引人注意。你也不想你的按钮被埋没,希望它受人瞩目,因此,它应该被当做完全独立的元素进行创作,出现在某些网站,而没必要与网站的风格保持一致。

看看下面这个体现“紫牛“概念的案例。

Mozilla Firefox

这是一个看起来像是FireFox的下载页面。请注意,在折叠处上方,有一个大片绿色的下载按钮,看起来与页面上其它元素完全不同,是放FireFox标志的唯一地方,也是整个页面最大的元素之一。

所有的特征让这个按钮显得非常抢眼。这很好地诠释了“紫牛“这一概念。如果你要说没看到,你正好为别人留下了印象。

简单来说就是让按钮引人瞩目。

2.外观

从颜色开始。

如果你想使用从未使用过的颜色来吸睛,可学习前面提到的FireFox网站。使用Color Scheme Designerto工具找到与你当前网站的配色方案协调的颜色,但依然要保持颜色的反差。

“颜色的反差“在这里是关键。如果你的网站以蓝色为主色调,就不再需要蓝色的购买按钮,蓝色的投影也没必要。有点蓝色感觉的元素统统不需要,粉色,橙色等有差异的颜色才是你的最佳选择。我相信你明白我的意思了。

另外的一条策略。橙色是除红色之外最显眼的颜色。但是,它不会像红色那样提升负面情感(像停住,小心,危险等都是用红色标识)。互联网上最有名的 橙色按钮可在亚马逊网站(amazon.com)找到。

另外需注意的是按钮的尺寸。按钮要大,越大越好。可参见firefox的案例。

有人在设计阶段问“还可以弄得再大点吗“,答案是肯定的。

要简洁还是要炫?

按钮不能做得太炫了。前面所提到的FireFox按钮就很炫,虽然上面有一只橙色的狐狸,外观上依然是一个按钮,这是必须遵守的。如果连按钮都不像,谁还会去点击。

这就是为什么不能简单回答按钮简洁好还是炫好。你得找到适合自己的风格。我们可进行分开测试,同时创建两个按钮:一个简洁,一个炫,看谁的效果更好。Google网站优化工具会帮你做出抉择。

看看下面这个简洁按钮的例子

ThemeFuse

你可以看到按钮上没橙色狐狸,但是依然很显眼。事实上,ThemeFuse(WordPress主题商店可以找到)提供了短代码。这些短代码让创建漂亮的按钮变得非常简单。

比方说,我用了下面这行代码之后:

[button link=“domain.com“ class=“btn_orange“]Click here to buy my awesome product![/button]

得到的按钮效果

3.字体

Sans-serif字体符合所有类型的按钮。因为,这种字体非常易读,适合网络使用。(另外,它也更适合用来印刷出版物)

尽量让按钮上的文本易读,因为它是页面上最重要的文本之一。文本不宜全部大写,大小写混合更佳,即每个单词的首字母大写。

Arial、Helvetica、Franklin Gothic、Myriad等字体很保险,可放心使用。

现在在来谈颜色。当然,文本内容应该与按钮的颜色反差极大。灰色-灰色就不行,可以选用黑-白,蓝色-橙色。

另外,文本必须具备高度可读性。

4.按钮的位置

按钮的最佳位置取决于网站的设计,这可能并不会让人感到意外。但是依然有些规则要遵守。

尽量放到最显眼的位置,这里就不用讲究创意了。只需要让顾客和客户看到就行。

每次访问网站,用户都期望在某些位置看到某些东西,比如说:左上角的标志,右上角的购物车结算,页脚的版权声明等。你的工作就是找出“购买按钮“最显眼的位置,然后把它放在那儿。

当然,它也要放在最显眼的位置上,这意味着两件事:

完全放在折叠处上方。不要担心空白区域,空白是每位网页设计师的朋友。记住,你在一个网站放多少内容不重要,重要的是你能从中删掉多少内容。

通过复制按钮,将其放在页面底部,来改变你的位置策略。这样别人在浏览整个页面时,依然可在底部进行操作。

5.额外元素

这些额外元素会带来锦上添花的效果,进一步加深按钮的可见度。比如说,箭头图标,购物车,放大镜,标识,或各种品牌元素等等。

我还是首推FireFox的案例,橙色的狐狸这一元素运用得相当酷。

经验表明,额外元素起到了强调按钮的作用。比如,两个指向朝下的箭头很好表达了下载的意思。购物车图标与添加到购物车按钮很搭。在前面中提到的亚马逊的例子,放大镜与搜索按钮的搭配就很棒。

你也可以使用一些品牌元素。比如说,标准的RSS订阅流的按钮。twitter的关注图标,FireFox的橙色狐狸下载图标,自由的购买产品按钮。(jaysming)

下面有一些案例:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

本文网址:https://www.dedexuexi.com/wysj/jhsj/3108.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
不简单的启动画面
« 上一篇2017年05月09日
window.parent和window.opener区别是什么
2017年05月09日下一篇 »
  • 网易云音乐WP1.0设计项目实战
    0阅读
    WP 平台是很多设计师很少涉足的地方,优设之前发过一篇WP设计规范指南,今天网易的同学继续上干货,来一篇WP的设计项目实战!作为一款有诚意的音乐APP,这次设计过程相当用心,值得学习的地方也很多,学习来。项目背景Windows Phone一直是各家公司缺少投入的平台,WP用户不得不经常面对一个成...
  • 马伯庸教你如何做一个万年好甲方
    0阅读
    编者按:原以为亲王精通历史,会写小说,现在才知道他也很懂作为甲方的门道啊。今天分享@马伯庸 同学的一篇好文,前有笑点,后有干货,有趣得紧。作为设计师,能遇到这样的甲方就嫁了吧。@马伯庸 :对我们甲方来说,艺术性是第三才需要考虑的因素。我们第二考虑的是如何有效率地把核心信息传达到客户那儿去。无论多么...
  • 网站设计主题和风格是重点
    0阅读
    企业为了在互联网上争夺一席之地,纷纷建起了网站。企业的网站就像企业的网络门户,既然是门面那么就要将网站建设好,充分展现企业的良好形象。貌似许多企业建网站是为了赶时髦,因为他们的企业网站设计的实在是不堪入目,这样不仅不会为企业带来什么利益,相反还会毁了企业的形象。那么企业要建好这样的门面应该如何入手呢...
  • 如何给网站布置干净的“关于我们”页面
    0阅读
    所有网站,无论是官方、电子商务、社会化网络还是个人站点,都应该设计一个恰到好处的关于页面,直截了当地告诉到访者,为什么要浪费他们宝贵的时间浏览你的网站。 一、为什么要有关于页面 不要让用户思考! 1、向浏览者传达本站的价值,留住用户 2、始终提醒自己站点的主旨,不要跑题 二、起什么名 关于页面存在的...
  • 如何建立一个成功的移动应用
    0阅读
    一个消费者应用程序是否成功,只通过相加其组成部分的总和来计算。简单的查看用户手机应用的下载历史,用户设备残留的移动应用数量,和那些真的被坚持使用的移动应用情况,就能知道这句话的真实含义。然而,如果你想知道为什么有些用户不再使用某些手机应用,那这篇文章可能会给你一些启示。 像一台机器一样,移动应用通过...
 
QQ在线咨询