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

何時(shí)使用撥動(dòng)開(kāi)關(guān)？

切換開(kāi)關(guān)最好用于更改系統(tǒng)功能和首選項(xiàng)的狀態(tài)。如果您想滿足用戶更改或更新首選項(xiàng)和設(shè)置的需要，設(shè)計(jì)中應(yīng)該有一個(gè)切換開(kāi)關(guān)。然而，切換設(shè)計(jì)可能有點(diǎn)混亂，因?yàn)樗鼈冇蟹浅Ｌ囟ǖ挠猛?，很像?fù)選框或單選按鈕。
不僅僅是在APP之中，包括網(wǎng)頁(yè)中，都會(huì)用到切換開(kāi)關(guān)。如下，是“切換開(kāi)關(guān)”的設(shè)計(jì)指南，可供參考。

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

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

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

2.不要忘記寫(xiě)好標(biāo)簽

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

4.選擇合適工具來(lái)設(shè)計(jì)撥動(dòng)開(kāi)關(guān)

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

5.使撥動(dòng)開(kāi)關(guān)便于移動(dòng)

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

6.測(cè)試您的撥動(dòng)設(shè)計(jì)

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