当前位置:网站首页>(翻译)按钮的对比色引导用户操作的方式
(翻译)按钮的对比色引导用户操作的方式
2022-08-01 22:04:00 【gc_2299】
你有没有误点过按钮?如果没有正确引导,面对模态窗口,用户很容易点错按钮。很多模态窗口催着用户做决定,却又不说清楚不同操作之间的区别。
显著不同的按钮颜色能够引导用户执行适合的操作。缺少明确的引导,不仅令用户困惑,延缓操作时间,还可能会导致用户误操作。
正面操作、中性操作和负面操作
每种按钮都会执行以下三种类型的操作:
1.正面操作:变更信息、发送信息或添加信息;
2.中性操作:不做任何改动或让用户返回屏幕(如取消按钮);
3.负面操作:删除消息、重置消息或阻塞消息。
模态窗口通常组合应用上述类型操作。为了让用户能够区分不同的操作,按钮的颜色应反映其作用。
正面操作应具有最高的对比色
模态窗口最常用的是正面操作。给予正面操作最高的对比色,同时设置其附近的中性操作或负面操作最低的对比色,便于用户知道执行什么操作能完成任务。
为得到最高的颜色对比,将正面操作按钮的背景色设为冷色,并将文本设为白色。蓝色、绿色和紫色等冷色能舒缓眼睛,并在视觉空间中处于靠后的位置。白色文本便于浏览,相比于黑色文本,内容更突出。
正面操作按钮附近的中性操作或负面操作按钮不应使用背景色,否则会使颜色对比度太相似。相反,中性操作或负面操作按钮应只具有边框,这样按钮与背景相融合,不会分散用户注意力。
负面操作具有最高对比色的时机
负面操作按钮使用的对比色不应高于正面操作按钮。正面操作按钮使用更频繁、更安全,不能让用户将负面操作误认做正面操作。但要是模态窗口中只有负面操作按钮和中性操作按钮,则负面操作应具有最高对比色。
在这种情况下,应将负面操作按钮的背景色设为暖色。红色、橙色和黄色等暖色会刺激眼睛,并在视觉空间中处于靠前的位置。用户看到负面操作按钮时,就会知道需要再三考虑才能点击按钮。
中性操作应具有最低的对比色
模态窗口不会只有中性操作,通常都要配合正面操作或负面操作使用。中性操作按钮应该具有最低的对比色,这样就不会分散用户注意力。
按钮的黑色边框足以表明其为中性操作,同时不填充背景色,使其不会与正面操作或负面操作按钮争抢用户注意力。
不要将中性操作按钮的边框和文本设为浅灰色,否则会被误认作禁用按钮。中性操作按钮还是要有别于背景,使其可见且可激活。
结语
如果颜色对比分明,正面操作、中性操作和负面操作是可以共存的。对比越明显,用户越能快速执行操作。颜色在用户界面中起着重要作用,不仅在美观方面,它也能引导用户执行操作。
原文地址:https://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/
边栏推荐
- Based on php film and television information website management system acquisition (php graduation design)
- ModuleNotFoundError: No module named ‘yaml‘
- AI应用第一课:支付宝刷脸登录
- 今日睡眠质量记录74分
- 安全第五次课后练习
- ARFoundation入门教程U2-AR场景截图截屏
- Homework 8.1 Orphans and Zombies
- HCIP---Architecture of Enterprise Network
- SAP Spartacus NgExpressEngineDecorator 的工作原理
- 【牛客刷题-SQL大厂面试真题】NO4.出行场景(某滴打车)
猜你喜欢

Raspberry Pi information display small screen, display time, IP address, CPU information, memory information (C language), four-wire i2c communication, 0.96-inch oled screen

19 Lectures on Disassembly of Multi-merchant Mall System Functions - Invoice Management on the Platform

恒星的正方形问题

罗克韦尔AB PLC RSLogix5000中的比较指令使用方法介绍
![[ASM] Bytecode Operation MethodWriter](/img/54/a9f3ddd02ffc02aa965a083c03d322.jpg)
[ASM] Bytecode Operation MethodWriter

Delicious this year

Based on php film and television information website management system acquisition (php graduation design)

Shell programming conditional statement

(*゚ヮ゚)*【精品C语言整理】*(゚ヮ゚*)女盆友缠着你让你教她写代码怎么办?安排,三万字博文带你走遍C语言,从此不再害怕编程

感觉自己好傻
随机推荐
字符串——Trie
Based on php hotel online reservation management system acquisition (php graduation project)
【开源】Sentinel高性能高可用集群限流解决方案
Image fusion GANMcC study notes
LeetCode952三部曲之一:解题思路和初级解法(137ms,超39%)
【C语言】猜数字小游戏
NFT的10种实际用途(NFT系统开发)
C语言必杀技3行代码把运行速度提升4倍
工程建筑行业数据中台指标分析
kubernetes CoreDNS全解析
越长大越孤单
统计单词数
Recycling rental system 100% open source without encryption Mall + recycling + rental
找工作必备!如何让面试官对你刮目相看,建议收藏尝试!!
46.全排列
【Verilog刷题篇】硬件工程师从0到入门1|基础语法入门
【建议收藏】ヾ(^▽^*)))全网最全输入输出格式符整理
图论——强连通分量缩点+拓扑排序
漫长的投资生涯
MySQL相关知识