按钮最佳实践——色彩的用户体验
简评:作者从用户体验角度提出了按钮最佳实践的几点建议,尤其是色彩方面,提出“色彩心理学”的概念。
如果我们看一下 Gmail 的用户体验,界面非常简单,而且看起来好像线框模型的第一阶段。
Gmail 设计简洁,颜色单一(单色调),但是很棒!
这里的用户体验和上下文密切相关。
你看到一个很棒的蓝色的发送邮件的按钮了吗?
它的颜色和位置,在这个案例中,比起文字 “Send” 更重要。他们可以使用一个普通的图标而不是文字,对用户的行为没有影响。
事实上,在移动应用中,他们没有在按钮中使用文字,而是一个简单的蓝色飞机箭头与页面上的其他东西形成鲜明的对比——看起来足够像按钮了——除了将它作为首要的文字动作按钮没有别的选择了。
如何用按钮抓住用户的注意力?
设计 Web 界面的动作按钮需要谨慎和熟虑;为了让按钮出彩,它必须是你工作的一部分。
你可以为你的网站创造一个很好的动作按钮,结合一些科学的色彩研究和设计原则,大幅提升转化率。在我的项目中,我总是结合 6 个重要的工具来达到这个目标:
- 位置 :给你的行动召唤(call-to-action) 按钮一个显眼的位置是非常重要的。按钮的位置对于吸引访客的眼球是至关重要的。在一个显眼的位置(突出的区域,布局的顶部或者中部,表单按钮的角度)可以导致更高的转化率,因为用户很可能注意到这些动作按钮而且发送动作。
- 清晰的信息 (或者为移动设备设计的图标):使用正确的词,原创及使用动次来鼓励行动(购买,下载,观看,测试等等)。经验表明,用户的感觉存在一个很大的信任问题。为了提升点击转化率和构建信任,遇见他们的怀疑,并通过你采取的行动来告诉他们将能获得什么。
- 形状 :矩形的按钮比圆形的好。
- 大小 :一个元素与其周围相对应的元素的大小表明其重要性。记住:元素越大,越重要。决定你网站中特定动作的重要性,并相应地调整你按钮的大小。
- 着色 :我相信最重要的部分是决定行动召唤按钮使用什么颜色,因为他们和用户心理交互。我建议相对于周围的元素和背景,使用高对比度的颜色。
- 提供可选的行动 :一个网页可以有多个动作调用。有时提供次要的选项是必要的,为了让用户信服,稍后采用你设计的首要的行动调用。
色彩心理学
现在我有个问题:颜色对于转变来讲真的很重要吗?
颜色可以调起情感这是一个众所周知的事实,每种颜色都会让人产生不同的感觉或心情,因此,看到颜色时会有不同的反应(当然,不同的文化对颜色的感知也是不同的)。所以,选择行动召唤按钮的颜色取决于你想要启发什么样的情感。
例如:
- 红色: 力量,激情,爱,消极的;
- 绿色:成长,金钱,环境,积极的;
- 蓝色:信任,和平,忠诚,安全,积极的;
- 黑色:正式,奢侈,成熟,中性的;
- 灰色:禁用的;
- 棕色:户外,食物,地球;
- 橙色:信息,兴高采烈,友好;
- 紫色:尊贵,神秘,灵性;
还有一个提示:对比是关键!
如果你想突出设计元素,你可以在背景中使用互补色。
我建议大按钮的颜色不要太突出(相比于周围的元素和背景),小按钮的颜色应该要鲜艳一点。但无论你选择什么颜色,确保你设计的按钮是显而易见的并且不会和整体的设计冲突。
记住,对比度不仅仅是色轮伤的互补色,而且和值相关。
一个明亮的按钮不会像暗淡的按钮在明亮的背景中突出。最重要的是,文本也需要在按钮中突出。
一个不好的案例:
一个好的案例:
按钮的最佳实践
好,我现在展示一些按钮的简单指导,在我的顾客的行动召唤按钮,表单,弹窗中已经使用了(所以用这个来作为例子)。
像我之前说的,我用几种颜色来代表四种重要的感觉:
- 积极的(CTA:保存,发送,下载):蓝色,绿色;
- 消极的(CTA:删除,阻塞,重置):红色;
- 中性的(CTA:查看更多,可选的,发现):黑色;
- 不可用的:灰色;
所以,如果我们在白色背景中使用这些例子,在使用关于着色和对比技巧之前你会感觉更好一点。
如果在屏幕上两个距离很近的按钮对比度相同,用户的注意力就会被迷惑。你会看到,颜色在你的产品的用户体验(UX)中扮演者重要的角色,驱使你的用户的动作。
原文地址:https://uxplanet.org/best-practices-for-buttons-b7048479d440
文/蔡耀冠
关键字:体验, 配色, 设计, 设计文章
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!