如何设计更好的按钮

任何推广文案——无论是广告、邮件还是网站文案,其唯一目的就是引导读者走向那个闪亮、互动、最常见的是矩形的可点击UI元素,即按钮。Call-to-action(CTA)按钮不仅寄托着每个营销人员在转化技术上取胜的希望,同时也是一种有可能体现品牌形象的心理效应。一个单纯的按钮怎么能做到这一点?CTA按钮作为任何用户界面中最关键的元素之一,可以通过它的智能设计来传达复杂和优雅。hostgator美国独立服务器为您介绍如何设计更好的按钮。

长话短说——有效的CTA按钮最基本的目的就是要有点击价值。CTA按钮在形状、大小和信息传递的基础上与他们相关的最终目标有所不同。继续阅读,以了解一些简单的设计技巧,并充分利用这些点击磁铁。推荐阅读:《用户体验设计原则:每一款成功移动应用的基石》

一:让它们可发现

由于长期接触与特定颜色相关的特定形状,人们的思维往往习惯于以特定的方式对它们做出反应。对颜色和形状的认知有能力影响人们的心情和情绪。传统的CTA按钮最好是一个水平的矩形。虽然尝试用抽象的形状来表示按钮可能有点过于雄心勃勃,但这不应该意味着坚持使用老式的矩形。

涉及到颜色时,建议设计师为按钮使用对比色,并坚持使用可以轻松识别为按钮的形状。尽管如此,在安全的范围内对它们进行调整,使它们看起来更有现代感,绝对是一条安全的道路。例如,设计师可以尝试柔化角或弯曲矩形的边角,使按钮看起来更时尚。推荐阅读:《设计对话框以提升UX用户体验》

二:增加一些阴影

按钮存在于不同类型的设计中——立体设计、镂空设计、平面设计和落影设计等。光与影的相互作用激发了设计的灵感,使它们看起来更有生命力。为按钮添加一个柔和、模糊的阴影,使其更具深度和突出性。然而(这是一个相当重要的 “然而”),很容易过度使用这些光影效果。设计师们倾向于添加一个又一个的效果,而没有停下来思考这些效果是单纯的好看还是真的有必要。所以,添加阴影,但要保持微妙。最好的做法是将阴影的颜色与按钮的颜色相匹配,不透明度保持在40%以下,并且让阴影比按钮更小。

三:在需要的地方设置强调

人们在扫描网站内容时,通常按照Z型模式向下滚动。相邻放置的按钮也是如此。希望网站访问者点击的按钮必须朝右侧放置。那是用户目光的终点和停留的地方。对于垂直堆叠的按钮,将高优先级的按钮放在底部更有意义,原因和上一句话说的一样。

如果将这些高优先级的按钮放在左手边或者顶部,会扰乱读者的自然扫描方向,最终影响读者的注意力。设计师一般也会使用幽灵按钮来阻止用户点击这些按钮。

四:让图标帮点忙

按钮不一定要在一个纯色的长方形上写两个字。就像图片一样,图标也可以说出千言万语。文字按钮除了文字之外,完全可以利用图标。不,这并不意味着在太小的空间里添加了太多的东西。它只是意味着正在使信息更加强调。然而,确保不要过度使用颜色。必须确保图标的颜色与文字的颜色相匹配。此外,可能会偏离那些有颜色填充或太多细节的图标是安全的。同样,关键是保持简单,坚持使用轮廓图标。推荐阅读:《网站设计实践:如何优化用户流》

五:记住8点规则

给按钮留下一些呼吸空间。避免在按钮周围留下过多或过少的空白。理想的方法是遵循8点规则。本质上,8点法则规定,设计中的所有元素,包括高度、宽度以及周围的空间,都要遵循8的倍数。 可能会想知道为什么是8?答案是大多数流行设备的平均屏幕尺寸大多数是8的倍数。因此,以8为增量来缩放设计(尺寸和间距)有助于保持所有设计元素的一致节奏。反过来,这也确保了所有网站页面的一致性。有关这个概念的更多信息,可以阅读这里。对于相邻放置或垂直堆叠的按钮,在按钮的所有侧面保持相同的8点距离。

既然谈论了空间,设计师也必须记得密切关注字母间距。根据字母的密度,保持文字每个字母之间的最佳间距,以保证阅读的方便性。

六:按钮存在于不同的状态中

当然不是指地理上的! 但重要的是要记住,任何CTA按钮都会经历不同的外观状态——闲置、悬停和点击。充分利用视觉效果,如添加水滴阴影、发光效果、颜色变化等,可以帮助实现这些状态之间的区别。很多品牌都在UI按钮设计的这一方面推陈出新,这将是令人惊奇的发展方向。

这些只是让按钮在网站页面上真正大放异彩的众多方法中的一部分。但无论按钮设计得多么好,都要归结为两个最终的要求——位置和信息传递。如果文案已经把网站访问者带到了一个他/她已经准备好做出决定的地步,但是按钮的间距太远而无法触及,或者更糟糕的是,它没有说出让他/她点击的恰到好处的话,那么就失去了交易。

按钮设计得不好,会有一百种情况。然而,设计师只能通过试错来学习。为了让学习之旅更加轻松,我们会继续推出更多这样的UI设计专用文章。推荐相关阅读:《UI和UX之间的三个重要区别》

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注