(翻译)取消按钮绝不该有背景色的原因

  取消按钮究竟是做什么用的?它用于放弃用户当前界面,并将用户带回之前的界面。用户将这个具有否定意义的按钮作为保护措施,防止对系统造成不必要的更改。
  为了让用户有安全感,取消按钮应意味着退回到安全状态,而不应是行为召唤按钮。这就是取消按钮绝不该有背景色的原因。[1]
中性按钮配中性颜色
  按钮上有颜色意味着行为召唤。取消按钮没有行为召唤功能,因为点击它不会对系统产生变动。因此,不要用颜色来强调取消按钮,否则就会让用户产生误会。相反,要让用户知道取消按钮不会更改系统,并且能取消行为[2]。

在这里插入图片描述
  应该给取消按钮配以中性颜色,表示它是中性的、中立的按钮[3]。当用户看到取消按钮没有颜色时,他们会更快地判断出使用它能退回到安全状态。这对于那些错误地激活确认界面并想要快速取消操作的用户来说是至关重要的。
  当界面上每个按钮都有颜色时,会分散用户注意力,这将使用户花更长时间地思考每一个动作。带中性色的取消按钮让用户更快地做出确定,不会分散用户注意力。准备行动的用户不会因取消按钮而分心。

“取消”有很多说法
  不是所有的取消按钮的名称都叫“取消”,但它们的功能都一样。例如,根据上下文不同,取消按钮的名称可能是:“现在不行”、“谢谢,不用”、“以后再说”或“跳过”。如果该按钮具有否定的行为,可以将其视为取消按钮,因为它与取消按钮的作用相同[4]。

在这里插入图片描述
  界面上按钮越多,就越需要有直观的取消功能。如果所有按钮都有颜色,则取消功能就不明显。但当取消按钮是中性色时,它让按钮选择更加直观。[5]

灰色要足够深
  当按钮用灰色时,重要的是颜色足够深,否则,按钮看着不清楚,像是被禁用一样。
  要确保按钮清晰易读,请使用WCAG2.0对比度工具(如Color Review 网站)检查颜色对比度,该工具会反馈你使用的灰色是否通过文本颜色的可访问性标准[6]。

在这里插入图片描述

取消按钮中性化
  一般而言,当用户激活确认界面时,他们是要准备采取行动的。但当他们误操作或想法发生变化时,需要取消按钮提供安全保障。
  彩色的取消按钮会发出错误的信号,它使用户把它看作行为召唤按钮,而不是用于退回到安全状态。将取消按钮中性化,使用户更轻松地操作确认界面。

原文地址:https://uxmovement.com/buttons/why-cancel-buttons-should-never-have-a-color/

[1]原文:To make your users feel safe, the Cancel button should signify a fallback to safety, not a call to action. This is why Cancel buttons should never have a color.
[2]原文:Instead, give them the impression that the button won’t make changes to the system and is their escape from action.
[3]原文:The Cancel button should have a neutral color to signify the neutral, non-committal button.
[4]原文:If the button has a dismissive behavior, treat it as a Cancel button because it serves the same function.
[5]原文:The more buttons there are on a screen, the more necessary a clear escape is. When all buttons have a color, the escape isn’t clear. But when the Cancel button is a neutral color, it makes the button choices more intuitive.
[6]原文:To ensure your button is legible, check the color contrast with a WCAG 2.0 contrast ratio tool such as Color Review. This tool tells you if your gray passes the accessibility standards for text color.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值