面向色盲的设计之选中状态

面向色盲的设计之选中状态

（预计阅读时间：60s）

在用户界面上通过使用色彩可以传达很多信息，但却没有很好的照顾到色盲用户，他们经常难以区分不同的颜色。

如果你的按钮只使用颜色做为引导，这很难告诉用户所选择的状态到底是什么，你或许可以使用形状来标识按钮的状态，而不仅仅是使用颜色。

导航栏

通常导航栏上会有很多按钮，但如果你只使用颜色就很难分辨哪个是选中的状态，许多网站会采用对按钮添加对比色，而这很难引起色盲用户的注意。

采用对按钮添加下划线的方式来替代仅仅使用颜色的方式，这对色盲用户来讲不难猜出来哪个是被选中的按钮，他们看一眼大概就能猜的到。

分段按钮

另一个色盲用户需要更多的视觉提示的就是分段按钮。许多只使用颜色来区分不同状态的方式，对于正常的用户来讲显而易见，而色盲用户就会遇到麻烦。

用户会看到一个浅色填充与深色填充，并感到诧异到底是浅色还是深色的是被选中并高亮显示的，可以通过对选中按钮的旁边添加一个复选标识来澄清混乱。

切换开关按钮

对于色盲用户来讲，切换开关按钮面临着同样的问题，如果仅仅使用颜色来区分打开/关闭，很难说明白哪个是选中状态。

为了使状态更加清晰，可以考虑在按钮上添加ON/OFF的标签亦或在ON的状态下增加一个复选标识。

仅仅使用颜色是不够的

如果想要触达每一位用户，仅仅通过使用颜色显然是不够的，考虑使用复选标识，下划线或标签作为额外的按钮状态的视觉辅助。

色盲用户已经比我们更难了，只需你多考虑一点就能让他们的生活更加美好。

————分割线——————

1.即使只有相对较小的一部分群体（色盲），还是有必要记住设计时要照顾到他们，我们需要明白，最后的设计将适用于每一位用户，这关系到一个更加优秀的用户体验。

2.原文链接：http://uxmovement.com/buttons/making-selected-button-states-clear-for-color-blind-users/

持续关注 UX/UI、黑客增长、AR/VR、区块链、自动驾驶及改变世界，关注微信公众号：iThinkBigger