如果您是设计师，在线营销商，或者刚好拥有一个尝试出售产品的网站，则有时必须设计一个合适的“购买按钮”。 然后，您将很快发现，如果希望获得良好的结果，仅将“立即购买”文本放在蓝色矩形上是不够的。

幸运的是，一旦您了解一些基本知识，设计适当的“购买按钮”就不会那么困难。 开始。

首先， 按钮上的文字是最重要的 ，但是还有其他一些功能需要解决。 为什么我说文字是最重要的？ 想象一下–如果按钮上的文字显示“ Go to Hell！”，那么设计精美的按钮有什么意义？ 案件结案。 好的副本是金钱的来源。

在今天的文章中，我们讨论了适当的“购买按钮”的5个关键特征 。 让我们来看看！

1.整体风格

这是该列表上的第一点，并非毫无道理，因为它是最重要的特征。

您想将按钮变成紫牛 。 这是塞思·戈丁（Seth Godin）推广的概念。 简而言之，您希望它与众不同； 值得注意的是，我的意思是不容忽视的。 有点像牧场中央的紫牛。

一些设计师在这方面并不是特别擅长。 试图创建一个与其所处网站的颜色和样式精美相关的按钮是很诱人的。 起初，这似乎是一个很好的主意，但事实并非如此。

问题在于这种按钮远非如此。 您不希望按钮混入； 您希望它脱颖而出。 因此，应该将其创建为一个完全独立的元素，而该元素恰好位于某个网站上，而不是需要与该网站保持一致的内容。

让我给你一个很好的例子，像紫牛一样的按钮。

这就是Firefox下载页面的外观。 我要你注意一件事。 左侧的按钮（下载按钮）看上去与该页面上的其他内容完全不同。 这是唯一的绿色事物。 这是唯一显示Firefox徽标的地方。 这是那里最大的元素之一。 它位于折痕上方。

所有这些特征使此按钮非常明显。 这是一头紫牛。 如果您说自己看不到，那只是想打动别人。

简而言之： 力争拥有出色的按钮 。

2.外观

让我们从color开始。

如果您想表现出色，请使用页面上其他任何地方都没有使用过的颜色。 就像Firefox家伙在他们的网站上所做的一样。 您可以使用诸如类的工具来查找与您网站的当前配色方案相匹配的颜色，但仍然有很大不同。

这里的关键词是“ different”。 如果您的网站大多是蓝色的，那么您就不需要蓝色的购买按钮。 您不需要蓝色阴影。 您不想要任何看起来有点蓝的东西。 您想要粉红色或橙色等。我确定您明白了。

还有一招。 橙色是紧随红色之后最可见的颜色。 但是，它并不会引发红色所带来的所有负面情绪（诸如“停止”，“当心！”和“危险”之类的东西）。 可以在amazon.com上找到互联网上最流行的橙色按钮。

接下来要关注的是按钮的大小 。 好吧，我能说什么，它必须很大。 越大越好。 （再次以Firefox为例。）

“我可以把它做得更大吗？” 在设计阶段是一个很好的问题。 做很多。

是简单还是浮华 ？ 按钮不能太浮华。 再次查看Firefox按钮。 浮华。 它上面有一只橙色的狐狸，但看起来仍然像个按钮。 这是您无法跨越的边界。 如果您的按钮看起来不像一个，那么没人会单击它。

这就是为什么没有简单的答案来回答哪个更好的方法（浮华或简单）的原因。 您只需要自己寻找。 始终拆分测试。 创建两个按钮，一个浮华，一个简单。 同时使用它们，看看哪个效果更好。 将为您提供帮助。

只是一个简单按钮的简单示例。

如您所见，该按钮没有使用任何橙色的狐狸，但是它仍然很明显。 事实上，ThemeFuse（我是其中的高级WordPress主题商店）提供了一些称为短代码的东西。 这些短代码使创建外观漂亮的按钮变得非常容易。

例如，只有一行：

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

我得到这个结果：

3.字体

Sans-serif字体是所有按钮的标准。 这是因为sans-serif字体对于每次在线使用都很可读。 （另一方面，衬线字体更适合印刷出版物。）

您希望按钮上的副本尽可能可读，因为它是页面上最重要的文本。 全盘比赛不是一个好主意。 混合大小写效果更好。 混合大小写是指每个单词的第一个字母均为大写字符。 （除了“ for”，“ the”，“ and”等字眼）

（图片来源： ）

可以使用的一些是：Arial，Helvetica，Franklin Gothic，Myriad或其他任何经典的sans-serif字体。

现在颜色怎么样。 当然，副本应与按钮的颜色形成鲜明的对比。 您不想要灰色。 您要黑底白字或蓝底橙字。

同样，文本必须具有很高的可读性。

4.安置

最佳位置取决于您网站的设计，这可能不足为奇。 但是，仍有一些规则值得遵守。

将其放置在最明显的位置 。 不要在这里尝试创新。 放置位置对客户/用户来说应该是显而易见的。

每次有人访问该网站时，他们都希望在某些地方看到某些东西。 诸如：左上角的徽标，右上角的购物车摘要，页脚中的版权条款等。您的工作是尝试找出最明显的购买按钮位置，然后将其放置在此处。

当然，它必须同时是最可见的地方。 这意味着两件事：

1. 绝对必须将其放置在折叠上方 ，并且
2. 不要害怕 。 Whitespace是每位优秀的网页设计师的朋友。 请记住，您可以在网站上放置多少东西都没有关系，重要的是您可以从网站中删除多少东西。

您可以通过复制按钮并将其放置在页面底部来将放置策略应用于类固醇。 这样，当有人阅读整个页面时，他们仍然可以在页面底部进行操作。

5.额外的元素

这是锦上添花。 额外的元素进一步提高了按钮的可见性。 元素示例： 箭头，购物车，放大镜，加号或各种品牌元素 。

我最喜欢的示例-Firefox示例-使用了一个非常酷的额外元素-橙狐（又名徽标）。

经验法则是使用强调按钮用途的其他元素。 例如，两个向下的箭头非常适合下载按钮。 购物车图标与添加到购物车按钮的效果很好（上面的亚马逊示例）。 带有搜索按钮的放大镜效果很好。 等等。

您还可以使用一些品牌元素。 例如，带有标准带有订阅订阅按钮），带有带有按我关注的推特按钮），带有狐狸的橙色带有下载Firefox按钮），带有自己的徽标（带有“我的购买”）的徽标东西按钮。

这里有些例子：

“自由”的力量

另一个技巧是使用英语中最强大的单词-免费。 每当广告宣传为免费的东西时，人们就会开始表现出非理性的行为（请查阅Dan Ariely的一本好书，《 》，找出我的意思。）

更多示例：

下一步是什么？

如果您精通Photoshop或其他 ，则可以立即创建一个漂亮的按钮。 另一种方法是通过ThemeFuse成为任何WordPress主题的幸运所有者，就像我在本文前面提到的那样。

您对设计优质购买按钮有何建议？ 我很乐意用您的意见更新这篇文章。

翻译自: