当前位置:网站首页>(翻译)按钮的对比色引导用户操作的方式
(翻译)按钮的对比色引导用户操作的方式
2022-08-01 22:04:00 【gc_2299】
你有没有误点过按钮?如果没有正确引导,面对模态窗口,用户很容易点错按钮。很多模态窗口催着用户做决定,却又不说清楚不同操作之间的区别。
显著不同的按钮颜色能够引导用户执行适合的操作。缺少明确的引导,不仅令用户困惑,延缓操作时间,还可能会导致用户误操作。
正面操作、中性操作和负面操作
每种按钮都会执行以下三种类型的操作:
1.正面操作:变更信息、发送信息或添加信息;
2.中性操作:不做任何改动或让用户返回屏幕(如取消按钮);
3.负面操作:删除消息、重置消息或阻塞消息。
模态窗口通常组合应用上述类型操作。为了让用户能够区分不同的操作,按钮的颜色应反映其作用。
正面操作应具有最高的对比色
模态窗口最常用的是正面操作。给予正面操作最高的对比色,同时设置其附近的中性操作或负面操作最低的对比色,便于用户知道执行什么操作能完成任务。
为得到最高的颜色对比,将正面操作按钮的背景色设为冷色,并将文本设为白色。蓝色、绿色和紫色等冷色能舒缓眼睛,并在视觉空间中处于靠后的位置。白色文本便于浏览,相比于黑色文本,内容更突出。
正面操作按钮附近的中性操作或负面操作按钮不应使用背景色,否则会使颜色对比度太相似。相反,中性操作或负面操作按钮应只具有边框,这样按钮与背景相融合,不会分散用户注意力。
负面操作具有最高对比色的时机
负面操作按钮使用的对比色不应高于正面操作按钮。正面操作按钮使用更频繁、更安全,不能让用户将负面操作误认做正面操作。但要是模态窗口中只有负面操作按钮和中性操作按钮,则负面操作应具有最高对比色。
在这种情况下,应将负面操作按钮的背景色设为暖色。红色、橙色和黄色等暖色会刺激眼睛,并在视觉空间中处于靠前的位置。用户看到负面操作按钮时,就会知道需要再三考虑才能点击按钮。
中性操作应具有最低的对比色
模态窗口不会只有中性操作,通常都要配合正面操作或负面操作使用。中性操作按钮应该具有最低的对比色,这样就不会分散用户注意力。
按钮的黑色边框足以表明其为中性操作,同时不填充背景色,使其不会与正面操作或负面操作按钮争抢用户注意力。
不要将中性操作按钮的边框和文本设为浅灰色,否则会被误认作禁用按钮。中性操作按钮还是要有别于背景,使其可见且可激活。
结语
如果颜色对比分明,正面操作、中性操作和负面操作是可以共存的。对比越明显,用户越能快速执行操作。颜色在用户界面中起着重要作用,不仅在美观方面,它也能引导用户执行操作。
原文地址:https://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/
边栏推荐
- Analysis of the development trend of game metaverse
- 漫长的投资生涯
- VGUgarbage collector(垃圾回收器)的实现原理
- NgRx Store createSelector 的单步调试和源代码分析
- Flink cluster construction
- 【建议收藏】ヾ(^▽^*)))全网最全输入输出格式符整理
- Mini Program--Independent Subcontracting & Subcontracting Pre-download
- leetcode 204. Count Primes 计数质数 (Easy)
- File operations of WEB penetration
- Upload markdown documents to blog garden
猜你喜欢
xctf攻防世界 Web高手进阶区 webshell
【C语言实现】两种计算平均成绩题型,博主精心整理,值得一读
找工作必备!如何让面试官对你刮目相看,建议收藏尝试!!
LeetCode952三部曲之二:小幅度优化(137ms -> 122ms,超39% -> 超51%)
深度学习Course2第二周Optimization Algorithms习题整理
Advanced Algebra_Proof_The algebraic multiplicity of any eigenvalue of a matrix is greater than or equal to its geometric multiplicity
Based on php hotel online reservation management system acquisition (php graduation project)
【C语言实现】最大公约数的3种求法
[ASM] Bytecode Operation MethodWriter
[Niu Ke brush questions-SQL big factory interview questions] NO4. Travel scene (a taxi)
随机推荐
如何防范 DAO 中的治理攻击?
more grown, more lonely
使用分类权重解决数据不平衡的问题
易周金融分析 | 银行ATM机智能化改造提速;互联网贷款新规带来挑战
Based on php online music website management system acquisition (php graduation design)
[深入研究4G/5G/6G专题-48]: 5G Link Adaption链路自适应-4-下行链路自适应DLLA-PDCCH信道
Today's sleep quality record 74 points
SQL injection of WEB penetration
【移动Web】移动端适配
long investment career
力扣第 304 场周赛复盘
HCIP---Multiple Spanning Tree Protocol related knowledge points
SOM Network 2: Implementation of the Code
Based on php online learning platform management system acquisition (php graduation design)
今年的很美味
安全第五次课后练习
selenium无头,防检测
高等代数_证明_矩阵的行列式为特征值之积, 矩阵的迹为特征值之和
KMP 字符串匹配问题
The Microsoft campus ambassador to shout you to autumn recruit!