当更改状态是您的应用程序的功能时，切换按钮是您最好的朋友。它们通过在单个控件中显示两个或更多选项来节省空间。只需按一下按钮，它们就会立即改变状态。但如果你没有正确设计它们，它们就是你最大的敌人。
倒Vs. 直接配色方案
切换按钮的挑战是使当前状态显而易见。当视觉提示不清楚时，用户通常无法识别活动状态。这种混淆导致他们选择错误的选项并激活非预期的状态。
当用于指示当前状态的视觉提示是反转颜色方案时发生混淆。此样式在切换按钮上是典型的，但不是最佳的。用户不清楚较暗的按钮表示活动状态。他们中的许多人将较轻的按钮误认为是所选的选项，因为它也具有“开启”外观。
toggle_button-color_scheme
反转的颜色是有问题的，因为它们使按钮彼此太不相同。当按钮看起来不同时，当用户比较它们时，很难分辨出哪一个被强调。
切换按钮需要具有类似的样式，以便用户可以比较按钮并找到活动变体。然后，他们将变量选项指定为活动状态。没有用于比较的基线，用户不知道视觉提示是什么。
不使用反转颜色方案，而是使用直接颜色方案。直接配色方案在浅色背景上显示带有深色文本的两个按钮。不同之处在于所选选项具有浅色阴影和粗体文本标签以指示突出显示。不仅如此，未选择的选项还有更亮的边框和文字标签，以进一步突出对比度。
与反色配色方案相比，直接配色方案为活动状态提供了四个视觉提示。所选选项具有可见变化，而未选择选项则更小。一对一的比较使用户明白哪个按钮具有更大的重量。
让切换更少令人难以置信
直观切换按钮的关键是使用直接颜色方案。它使活动状态更容易识别并减少混乱。当视觉线索不清楚时，用户会犯错误。通过在切换按钮上应用更直观的样式，减少令人难以置信的切换。