根據(jù)定義，UI/UX設(shè)計中的切換開關(guān)意味著用戶必須在兩個互斥選項之間進行選擇。當用戶按下開關(guān)時，將顯示與所選選項的簡短交互，然后立即生效。撥動開關(guān)的設(shè)計源于現(xiàn)實生活?？纯茨愕娜粘；顒?，你會發(fā)現(xiàn)你使用了很多物理開關(guān)，比如電燈開關(guān)和水壺。作為一名UI和UX設(shè)計師，如何在設(shè)計中實現(xiàn)這些切換開關(guān)？

何時使用撥動開關(guān)？

切換開關(guān)最好用于更改系統(tǒng)功能和首選項的狀態(tài)。如果您想滿足用戶更改或更新首選項和設(shè)置的需要，設(shè)計中應(yīng)該有一個切換開關(guān)。然而，切換設(shè)計可能有點混亂，因為它們有非常特定的用途，很像復(fù)選框或單選按鈕。
不僅僅是在APP之中，包括網(wǎng)頁中，都會用到切換開關(guān)。如下，是“切換開關(guān)”的設(shè)計指南，可供參考。

“切換開關(guān)”設(shè)計指南

1.撥動開關(guān)應(yīng)立即生效

如前所述，撥動開關(guān)的設(shè)計源于現(xiàn)實生活。以電燈開關(guān)為例，想想它是如何工作的。你按下按鈕打開燈光，然后再按下按鈕將其關(guān)閉。
在UI/UX設(shè)計中，切換開關(guān)簡單地模擬了現(xiàn)實生活中的開關(guān)，使用戶易于理解和使用。換句話說，當用戶與切換進行交互時，他們不需要單擊“保存”或“確認”來應(yīng)用新狀態(tài)。相反，當用戶按下開關(guān)時，所選選項立即生效，以更改系統(tǒng)功能和首選項的狀態(tài)。當由于系統(tǒng)延遲而無法立即獲得結(jié)果時，可以考慮添加處理狀態(tài)循環(huán)動畫，以幫助用戶知道正在實現(xiàn)切換。但請記住，操作時間不應(yīng)超過幾秒鐘。

2.不要忘記寫好標簽

當我們遇到具有良好標簽的切換開關(guān)時，我們將更容易理解切換控件的選項以及切換當前處于什么狀態(tài)。在書寫標簽時，您需要確保標簽短而清晰。單詞的數(shù)量不應(yīng)超過兩個，但也應(yīng)清楚地描述切換控件的功能。此外，最好使用左對齊的內(nèi)聯(lián)標簽，因為這些標簽最適合用戶掃描布局的方式。請記住，開關(guān)是OFF或ON，您不應(yīng)該添加額外的文本標簽，這會使您的界面變得混亂。
3.保持設(shè)計的視覺外觀一致
眾所周知，UI元素的視覺外觀有助于用戶預(yù)測與元素交互時會發(fā)生什么。如果您的設(shè)計與用戶已經(jīng)知道的不一致，他們將被迫停止并思考如何與UI交互。在創(chuàng)建設(shè)計時，您需要確保始終使用您選擇用于切換的視覺語言，并且所有切換都應(yīng)在應(yīng)用程序中以這種方式實現(xiàn)。

4.選擇合適工具來設(shè)計撥動開關(guān)

這看起來像是一個小細節(jié)，但它在整個產(chǎn)品原型化所需的時間和精力上產(chǎn)生了巨大的差異，尤其是在UI設(shè)計中包含許多小組件的大型產(chǎn)品。

5.使撥動開關(guān)便于移動

作為一名UI/UX設(shè)計師，您確保移動開關(guān)在各種產(chǎn)品中都可用的方式。要做到這一點，您需要確保布局通常允許以下兩件事：允許用戶無問題地觸摸開關(guān)，并允許組件之間有足夠的自由空間供界面呼吸。

6.測試您的撥動設(shè)計

最后但同樣重要的是，需要在發(fā)布設(shè)計之前進行用戶測試，以確保不會發(fā)生系統(tǒng)故障。只要記住測試可用性標準，包括通用UI設(shè)計和特定的切換組件。測試切換設(shè)計的最實用和有效的方法是一個很好的舊A/B測試。當涉及到切換設(shè)計時，您需要測試整個頁面以及特定組件上的視覺層次結(jié)構(gòu)。此外，在找到用戶可以立即理解的標簽之前，不要害怕修改標簽。
如上就是“切換開關(guān)”的設(shè)計步驟，在進行網(wǎng)頁設(shè)計、APP設(shè)計的時候，可予以參考和借鑒。