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

倒Vs. 直接配色方案

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

當(dāng)用于指示當(dāng)前狀態(tài)的視覺提示是反轉(zhuǎn)顏色方案時(shí)發(fā)生混淆。此樣式在切換按鈕上是典型的，但不是最佳的。用戶不清楚較暗的按鈕表示活動(dòng)狀態(tài)。他們中的許多人將較輕的按鈕誤認(rèn)為是所選的選項(xiàng)，因?yàn)樗簿哂小伴_啟”外觀。

toggle_button-color_scheme

反轉(zhuǎn)的顏色是有問題的，因?yàn)樗鼈兪拱粹o彼此太不相同。當(dāng)按鈕看起來不同時(shí)，當(dāng)用戶比較它們時(shí)，很難分辨出哪一個(gè)被強(qiáng)調(diào)。

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

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

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

讓切換更少令人難以置信

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