當更改狀態(tài)是您的應用程序的功能時，切換按鈕是您最好的朋友。它們通過在單個控件中顯示兩個或更多選項來節(jié)省空間。只需按一下按鈕，它們就會立即改變狀態(tài)。但如果你沒有正確設計它們，它們就是你最大的敵人。

倒Vs. 直接配色方案

切換按鈕的挑戰(zhàn)是使當前狀態(tài)顯而易見。當視覺提示不清楚時，用戶通常無法識別活動狀態(tài)。這種混淆導致他們選擇錯誤的選項并激活非預期的狀態(tài)。

當用于指示當前狀態(tài)的視覺提示是反轉顏色方案時發(fā)生混淆。此樣式在切換按鈕上是典型的，但不是最佳的。用戶不清楚較暗的按鈕表示活動狀態(tài)。他們中的許多人將較輕的按鈕誤認為是所選的選項，因為它也具有“開啟”外觀。

toggle_button-color_scheme

反轉的顏色是有問題的，因為它們使按鈕彼此太不相同。當按鈕看起來不同時，當用戶比較它們時，很難分辨出哪一個被強調。

切換按鈕需要具有類似的樣式，以便用戶可以比較按鈕并找到活動變體。然后，他們將變量選項指定為活動狀態(tài)。沒有用于比較的基線，用戶不知道視覺提示是什么。

不使用反轉顏色方案，而是使用直接顏色方案。直接配色方案在淺色背景上顯示帶有深色文本的兩個按鈕。不同之處在于所選選項具有淺色陰影和粗體文本標簽以指示突出顯示。不僅如此，未選擇的選項還有更亮的邊框和文字標簽，以進一步突出對比度。

與反色配色方案相比，直接配色方案為活動狀態(tài)提供了四個視覺提示。所選選項具有可見變化，而未選擇選項則更小。一對一的比較使用戶明白哪個按鈕具有更大的重量。

讓切換更少令人難以置信

直觀切換按鈕的關鍵是使用直接顏色方案。它使活動狀態(tài)更容易識別并減少混亂。當視覺線索不清楚時，用戶會犯錯誤。通過在切換按鈕上應用更直觀的樣式，減少令人難以置信的切換。