簡介：切換開關提示用戶在兩個互斥選項之間進行選擇，并且總是有一個默認值。開關應該提供即時的結果，用戶可以根據(jù)需要自由的切換。

每天早上，我醒來，把水倒進我的茶壺，然后打開開關。水一開，我就把水壺關掉，給自己倒一杯。我水壺上的開關就是一個例子。如果你仔細觀察，你會注意到它圍繞在我們周圍，因為很多東西都有兩個簡單的狀態(tài)：它們要么已經打開，要么已經關閉。從電燈開關，到打開移動熱點，再到我們APP的設置頁面，我們每天都與切換器進行交互。

切換開關最適合用于更改系統(tǒng)功能和首選項的狀態(tài)。它可以替換兩個單選按鈕或一個復選框，允許用戶在兩個相反的狀態(tài)之間進行選擇。有時候，決定使用哪個組件(單選按鈕、復選框或切換開關)可能很困難。當您想知道哪個組件適合時，請考慮選項的數(shù)量和類型，以及是否有任何明確的默認值。下表總結了有關這些常用組件的問題和答案。

當設計人員為特定場景使用適當?shù)慕M件時，它可以幫助用戶預測組件將做什么以及如何控制它。為了避免用戶的挫折感，請在切換開關設計上遵循以下指南。

1. 及時反饋結果

切換開關應該立即生效，不應該要求用戶單擊保存或提交。如果直接的結果無法實現(xiàn)或看起來不太合適，那么應該使用替代方法(例如單選按鈕或一個復選框——參考上表)。如果您想在表單列表中包含切換開關，并且用戶需要單擊“?提交”按鈕以使其更改生效，請不要這樣做。這種情況會使用戶感到困惑，因為他們無法確定他們的切換選擇是否會立即生效。我們要不惜一切代價避免混淆。單獨的控件可以從需要單擊命令按鈕的控件生成即時結果。

?錯誤案例：

在美國聯(lián)合航空公司的iOS應用程序中，除了視覺更改之外，當用戶點擊切換開關時沒有任何反應。用戶如何知道切換是否有效？沒有提供結果。在這種情況下，單個復選框將是最佳選擇。

??正確案例：

當為iOS啟用飛行模式時，Apple會通過將左上角的細胞條更改為飛機圖標來立即提供結果

2. 提供簡潔明確的標簽

保持開關的標簽短而直接?？紤]到交互原則，即“菜單和按鈕標簽應首先具有關鍵字，形成唯一標簽?！崩?，當設計一個用戶可以更新通知的設置頁面時:一定要說電子郵件通知或短信通知，不要說你想要收到我們的電子郵件通知嗎?我們要知道用戶只閱讀他們認為他們需要的內容，所以在標簽前加上關鍵字，去掉多余的話術。

切換標簽應該描述當開關打開時控件會做什么，它們不應該是模棱兩可的。

?錯誤案例：

??正確案例：

3. 遵循標準進行設計

確保切換開關看起來像滑塊，并利用視覺提示(如運動和顏色)以避免混淆。當用戶改變切換狀態(tài)時，開關應該改變位置——就像在現(xiàn)實中那樣。

顏色是開關重要的視覺提示，有兩件事需要注意:對比和文化差異。當設計師使用低對比度的顏色時，用戶很難知道開關是什么狀態(tài)。因此，始終使用高對比度的顏色來表示狀態(tài)變化。此外，一定要評估對你的受眾的社會和文化影響。

此外，狀態(tài)描述符(開關旁邊的單詞On和Off)可以提供系統(tǒng)狀態(tài)的清晰可見性。

這個切換是打開還是關閉？在Windows 10中，狀態(tài)描述符（單詞Off）用于標識切換（關閉）的當前狀態(tài)。不幸的是，這個描述符是不明確的：因為單詞Off出現(xiàn)在開關的右邊，切換點在左邊，用戶也可以將切換的狀態(tài)解釋為on（即遠離標簽Off）。

在添加狀態(tài)描述時，請堅持on/off以迎合現(xiàn)實，并分別在切換的左邊和右邊包含off和on，以避免混淆。如果開關旁邊只有一個描述，則可以將其作為切換標簽。

??正確案例：

Daylio?Android應用程序使用對比色（紫色）和沒有狀態(tài)描述符來清楚地指示切換的狀態(tài)（在左側屏幕截圖中和在右側屏幕截圖中關閉）。

4. 設計要一致

遵循平臺規(guī)范，確保在應用中一致地設計切換開關。不一致性會迫使用戶放慢速度，并花更多時間考慮如何與組件交互。不要讓用戶去思考不同的設計功能是否相同。

?錯誤案例：

Chase Bank iOS應用程序使用切換和單選按鈕不一致。在元素類型和內容量之外，這三個頁面幾乎相同。當我與這些頁面進行交互時，我希望它們以相同的方式運行。相反，我花時間想知道為什么我的營銷偏好沒有生效。

5. 總結

切換開關幫助用戶更新設置信息。當使用切換開關時，提供直接的標簽，使用標準的設計，并給出即時的結果。請記住，切換開關只能在用戶需要在兩個相反的狀態(tài)之間進行選擇時使用。

原文地址：https://www.nngroup.com/articles/toggle-switch-guidelines/