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