簡介：切換開關(guān)提示用戶在兩個(gè)互斥選項(xiàng)之間進(jìn)行選擇，并且總是有一個(gè)默認(rèn)值。開關(guān)應(yīng)該提供即時(shí)的結(jié)果，用戶可以根據(jù)需要自由的切換。

每天早上，我醒來，把水倒進(jìn)我的茶壺，然后打開開關(guān)。水一開，我就把水壺關(guān)掉，給自己倒一杯。我水壺上的開關(guān)就是一個(gè)例子。如果你仔細(xì)觀察，你會注意到它圍繞在我們周圍，因?yàn)楹芏鄸|西都有兩個(gè)簡單的狀態(tài)：它們要么已經(jīng)打開，要么已經(jīng)關(guān)閉。從電燈開關(guān)，到打開移動熱點(diǎn)，再到我們APP的設(shè)置頁面，我們每天都與切換器進(jìn)行交互。

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

當(dāng)設(shè)計(jì)人員為特定場景使用適當(dāng)?shù)慕M件時(shí)，它可以幫助用戶預(yù)測組件將做什么以及如何控制它。為了避免用戶的挫折感，請?jiān)谇袚Q開關(guān)設(shè)計(jì)上遵循以下指南。

1. 及時(shí)反饋結(jié)果

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

?錯誤案例：

在美國聯(lián)合航空公司的iOS應(yīng)用程序中，除了視覺更改之外，當(dāng)用戶點(diǎn)擊切換開關(guān)時(shí)沒有任何反應(yīng)。用戶如何知道切換是否有效？沒有提供結(jié)果。在這種情況下，單個(gè)復(fù)選框?qū)⑹亲罴堰x擇。

??正確案例：

當(dāng)為iOS啟用飛行模式時(shí)，Apple會通過將左上角的細(xì)胞條更改為飛機(jī)圖標(biāo)來立即提供結(jié)果

2. 提供簡潔明確的標(biāo)簽

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

切換標(biāo)簽應(yīng)該描述當(dāng)開關(guān)打開時(shí)控件會做什么，它們不應(yīng)該是模棱兩可的。

?錯誤案例：

??正確案例：

3. 遵循標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)

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

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

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

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

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

??正確案例：

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

4. 設(shè)計(jì)要一致

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

?錯誤案例：

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

5. 總結(jié)

切換開關(guān)幫助用戶更新設(shè)置信息。當(dāng)使用切換開關(guān)時(shí)，提供直接的標(biāo)簽，使用標(biāo)準(zhǔn)的設(shè)計(jì)，并給出即時(shí)的結(jié)果。請記住，切換開關(guān)只能在用戶需要在兩個(gè)相反的狀態(tài)之間進(jìn)行選擇時(shí)使用。

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