app切換開關的交互設計指南

簡介:切換開關提示用戶在兩個互斥選項之間進行選擇,并且總是有一個默認值。開關應該提供即時的結果,用戶可以根據(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/

每天更新,
全站高品質素材免費下載!