（翻译）禁用按钮不应变灰的原因

禁用按钮未激活时是什么样式？大部分设计人员会将未激活按钮设为灰色，但这么做按钮的启用状态和禁用状态看着完全不同，让用户措手不及。从灰色变为全彩色不可预料，会影响用户的预期。
为了获得流畅的用户体验，最好不要将禁用按钮设置为灰色，而应增加按钮的透明度，使其透明。

禁用按钮变透明后，用户还能看到按钮启用状态时的部分样式。虽然按钮变淡了，但还能看出部分用色。当禁用按钮切换到启用状态时，新外观符合用户的预期。
透明的按钮更能融合背景，而灰色按钮看着很突兀（除非背景也是灰色）。灰色禁用按钮样式醒目，更有可能被用户点击，真出现这种情况，他们会想知道为什么点了没有反应。
灰色按钮的另一个问题是，用户很容易将它们误认为是次要操作。灰色通常表示按钮优先级低（如取消按钮）。用户看到灰色按钮时无法确定它是否被禁用，除非点击按钮才行，这种不确定性和不可预测性不符合最佳用户体验的要求。

要让按钮变透明，应调整按钮的不透明度，而非颜色。最优的不透明度值会根据背景色而变化。从经验上看，不透明度应小于40%，或者透明到文本标签不可读。不透明度足够低特别重要，否则用户可能会认为按钮是激活状态。
将禁用按钮透明处理，标识按钮的未激活状态，不让用户混淆。这样，随着界面情境变化，用户将会获得流畅的、可预知的用户体验。

原文地址：https://uxmovement.com/buttons/why-you-shouldnt-gray-out-disabled-buttons/

（翻译）禁用按钮不应变灰的原因相关推荐

qt按钮禁用和激活禁用_为什么试探法只是经验法则：禁用按钮的情况
qt按钮禁用和激活禁用 Most user experience designers will be familiar with Jackob Nielsen's 10 usability heuri ...
flutter的按钮如何变为不可选中_如何在Flutter中禁用按钮？
小编典典我想你可能要出台一些辅助功能,以build您的按钮 ,以及与一些属性键关机的沿有状态的部件. 使用StatefulWidget / State并创建一个变量来保存您的条件(例如isButto ...
如何实现点击按钮后禁用按钮的功能？
我们在开发应用程序的时候,经常会遇到这样的需求:用户点击按钮后就让按钮不可再点击,这样可以防止因为用户连续点击按钮导致数据重复的问题,那么该如何实现这样的功能呢? 要实现这种功能,可以有以下一些方式: ...
Layui禁用按钮，Layui禁用且隐藏按钮
禁用按钮注:不加'pointer-events','none'还是会触发提交 $('.lay-submit-btn').css('pointer-events','none');$('.lay-su ...
el-table点击禁用按钮，只禁用本行的编辑按钮，不影响其他行
el-table点击禁用按钮,只禁用本行的编辑按钮,不影响其他行 1.效果如图所示 2.html部分:这里控制禁用,启用,以及编辑按钮是否可用的字段都要写在list里面 //这里控制禁用,启用,以及编 ...
（翻译）‘Sign Up’ 和‘Sign In’按钮让用户混淆的原因
你能多快看出"Sign Up(PS:注册)"和"Sign In(PS:登录)"的区别?将它们作为按钮名称同时使用,会让用户点错按钮.出现上述问题并不是用户的 ...
js禁用按钮_探索js让你的网页“自己开口说话”
本文为作者行舟客投稿,原文地址为https://yunxiaomeng.blog.csdn.net/article/details/108672415 欢迎点赞! 背景最近一直在研究音视频流,正好想 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
easyui按钮linkbutton置灰与取消置灰
easyuilinkbutton按钮置灰: $('#btnid').linkbutton('disable'); 这样按钮再次点击也不可用. 取消置灰: $('#sureBtn').linkbutto ...
按钮linkbutton置灰与取消置灰
[html] view plain copy easyuilinkbutton按钮置灰: $('#btnid').linkbutton('disable'); 这样按钮再次点击也不可用. 取消置灰 ...

（翻译）禁用按钮不应变灰的原因

（翻译）禁用按钮不应变灰的原因相关推荐

最新文章

热门文章