按钮最佳实践——色彩的用户体验

简评:作者从用户体验角度提出了按钮最佳实践的几点建议,尤其是色彩方面,提出“色彩心理学”的概念。

如果我们看一下 Gmail 的用户体验,界面非常简单,而且看起来好像线框模型的第一阶段。

Gmail 设计简洁,颜色单一(单色调),但是很棒!

这里的用户体验和上下文密切相关。

你看到一个很棒的蓝色的发送邮件的按钮了吗?

它的颜色和位置,在这个案例中,比起文字 “Send” 更重要。他们可以使用一个普通的图标而不是文字,对用户的行为没有影响。

事实上,在移动应用中,他们没有在按钮中使用文字,而是一个简单的蓝色飞机箭头与页面上的其他东西形成鲜明的对比——看起来足够像按钮了——除了将它作为首要的文字动作按钮没有别的选择了。

如何用按钮抓住用户的注意力?

设计 Web 界面的动作按钮需要谨慎和熟虑;为了让按钮出彩,它必须是你工作的一部分。

你可以为你的网站创造一个很好的动作按钮,结合一些科学的色彩研究和设计原则,大幅提升转化率。在我的项目中,我总是结合 6 个重要的工具来达到这个目标:

  • 位置 :给你的行动召唤(call-to-action) 按钮一个显眼的位置是非常重要的。按钮的位置对于吸引访客的眼球是至关重要的。在一个显眼的位置(突出的区域,布局的顶部或者中部,表单按钮的角度)可以导致更高的转化率,因为用户很可能注意到这些动作按钮而且发送动作。
  • 清晰的信息 (或者为移动设备设计的图标):使用正确的词,原创及使用动次来鼓励行动(购买,下载,观看,测试等等)。经验表明,用户的感觉存在一个很大的信任问题。为了提升点击转化率和构建信任,遇见他们的怀疑,并通过你采取的行动来告诉他们将能获得什么。
  • 形状 :矩形的按钮比圆形的好。
  • 大小 :一个元素与其周围相对应的元素的大小表明其重要性。记住:元素越大,越重要。决定你网站中特定动作的重要性,并相应地调整你按钮的大小。
  • 着色 :我相信最重要的部分是决定行动召唤按钮使用什么颜色,因为他们和用户心理交互。我建议相对于周围的元素和背景,使用高对比度的颜色。
  • 提供可选的行动 :一个网页可以有多个动作调用。有时提供次要的选项是必要的,为了让用户信服,稍后采用你设计的首要的行动调用。

色彩心理学

现在我有个问题:颜色对于转变来讲真的很重要吗?

颜色可以调起情感这是一个众所周知的事实,每种颜色都会让人产生不同的感觉或心情,因此,看到颜色时会有不同的反应(当然,不同的文化对颜色的感知也是不同的)。所以,选择行动召唤按钮的颜色取决于你想要启发什么样的情感。

例如:

  • 红色: 力量,激情,爱,消极的;
  • 绿色:成长,金钱,环境,积极的;
  • 蓝色:信任,和平,忠诚,安全,积极的;
  • 黑色:正式,奢侈,成熟,中性的;
  • 灰色:禁用的;
  • 棕色:户外,食物,地球;
  • 橙色:信息,兴高采烈,友好;
  • 紫色:尊贵,神秘,灵性;

还有一个提示:对比是关键!

如果你想突出设计元素,你可以在背景中使用互补色。

我建议大按钮的颜色不要太突出(相比于周围的元素和背景),小按钮的颜色应该要鲜艳一点。但无论你选择什么颜色,确保你设计的按钮是显而易见的并且不会和整体的设计冲突。

记住,对比度不仅仅是色轮伤的互补色,而且和值相关。

一个明亮的按钮不会像暗淡的按钮在明亮的背景中突出。最重要的是,文本也需要在按钮中突出。

一个不好的案例:

一个好的案例:

按钮的最佳实践

好,我现在展示一些按钮的简单指导,在我的顾客的行动召唤按钮,表单,弹窗中已经使用了(所以用这个来作为例子)。

像我之前说的,我用几种颜色来代表四种重要的感觉:

  • 积极的(CTA:保存,发送,下载):蓝色,绿色;
  • 消极的(CTA:删除,阻塞,重置):红色;
  • 中性的(CTA:查看更多,可选的,发现):黑色;
  • 不可用的:灰色;

所以,如果我们在白色背景中使用这些例子,在使用关于着色和对比技巧之前你会感觉更好一点。

如果在屏幕上两个距离很近的按钮对比度相同,用户的注意力就会被迷惑。你会看到,颜色在你的产品的用户体验(UX)中扮演者重要的角色,驱使你的用户的动作。

下载免费大礼包

原文地址:https://uxplanet.org/best-practices-for-buttons-b7048479d440

文/蔡耀冠

关键字:体验, 配色, 设计, 设计文章

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部