当前位置:网站首页>(翻译)按钮的对比色引导用户操作的方式
(翻译)按钮的对比色引导用户操作的方式
2022-08-01 22:04:00 【gc_2299】
你有没有误点过按钮?如果没有正确引导,面对模态窗口,用户很容易点错按钮。很多模态窗口催着用户做决定,却又不说清楚不同操作之间的区别。
显著不同的按钮颜色能够引导用户执行适合的操作。缺少明确的引导,不仅令用户困惑,延缓操作时间,还可能会导致用户误操作。
正面操作、中性操作和负面操作
每种按钮都会执行以下三种类型的操作:
1.正面操作:变更信息、发送信息或添加信息;
2.中性操作:不做任何改动或让用户返回屏幕(如取消按钮);
3.负面操作:删除消息、重置消息或阻塞消息。
模态窗口通常组合应用上述类型操作。为了让用户能够区分不同的操作,按钮的颜色应反映其作用。
正面操作应具有最高的对比色
模态窗口最常用的是正面操作。给予正面操作最高的对比色,同时设置其附近的中性操作或负面操作最低的对比色,便于用户知道执行什么操作能完成任务。
为得到最高的颜色对比,将正面操作按钮的背景色设为冷色,并将文本设为白色。蓝色、绿色和紫色等冷色能舒缓眼睛,并在视觉空间中处于靠后的位置。白色文本便于浏览,相比于黑色文本,内容更突出。
正面操作按钮附近的中性操作或负面操作按钮不应使用背景色,否则会使颜色对比度太相似。相反,中性操作或负面操作按钮应只具有边框,这样按钮与背景相融合,不会分散用户注意力。
负面操作具有最高对比色的时机
负面操作按钮使用的对比色不应高于正面操作按钮。正面操作按钮使用更频繁、更安全,不能让用户将负面操作误认做正面操作。但要是模态窗口中只有负面操作按钮和中性操作按钮,则负面操作应具有最高对比色。
在这种情况下,应将负面操作按钮的背景色设为暖色。红色、橙色和黄色等暖色会刺激眼睛,并在视觉空间中处于靠前的位置。用户看到负面操作按钮时,就会知道需要再三考虑才能点击按钮。
中性操作应具有最低的对比色
模态窗口不会只有中性操作,通常都要配合正面操作或负面操作使用。中性操作按钮应该具有最低的对比色,这样就不会分散用户注意力。
按钮的黑色边框足以表明其为中性操作,同时不填充背景色,使其不会与正面操作或负面操作按钮争抢用户注意力。
不要将中性操作按钮的边框和文本设为浅灰色,否则会被误认作禁用按钮。中性操作按钮还是要有别于背景,使其可见且可激活。
结语
如果颜色对比分明,正面操作、中性操作和负面操作是可以共存的。对比越明显,用户越能快速执行操作。颜色在用户界面中起着重要作用,不仅在美观方面,它也能引导用户执行操作。
原文地址:https://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/
边栏推荐
猜你喜欢
随机推荐
Today's sleep quality record 74 points
【C语言】猜数字小游戏
RxJs SwitchMapTo 操作符之移花接木
ImportError: `save_weights` requires h5py. Problem solved
AQS
【开源】Sentinel高性能高可用集群限流解决方案
Based on php tourism website management system acquisition (php graduation design)
如何防范 DAO 中的治理攻击?
Chapter 12, target recognition of digital image processing
shell specification and variables
more grown, more lonely
MySQL related knowledge
xctf攻防世界 Web高手进阶区 web2
1. @Component注解的原理剖析
Analysis of the development trend of game metaverse
How to prevent governance attacks in DAOs?
【建议收藏】ヾ(^▽^*)))全网最全输入输出格式符整理
365天挑战LeetCode1000题——Day 046 生成每种字符都是奇数个的字符串 + 两数相加 + 有效的括号
ModuleNotFoundError: No module named ‘yaml‘
网络水军第一课:手写自动弹幕









![[深入研究4G/5G/6G专题-48]: 5G Link Adaption链路自适应-4-下行链路自适应DLLA-PDCCH信道](/img/6b/d4ff120493e878fcf5c9aa728eced7.png)