根據(jù)定義,UI/UX設計中的切換開關意味著用戶必須在兩個互斥選項之間進行選擇。當用戶按下開關時,將顯示與所選選項的簡短交互,然后立即生效。撥動開關的設計源于現(xiàn)實生活??纯茨愕娜粘;顒?,你會發(fā)現(xiàn)你使用了很多物理開關,比如電燈開關和水壺。作為一名UI和UX設計師,如何在設計中實現(xiàn)這些切換開關?
何時使用撥動開關?
切換開關最好用于更改系統(tǒng)功能和首選項的狀態(tài)。如果您想滿足用戶更改或更新首選項和設置的需要,設計中應該有一個切換開關。然而,切換設計可能有點混亂,因為它們有非常特定的用途,很像復選框或單選按鈕。
不僅僅是在APP之中,包括網(wǎng)頁中,都會用到切換開關。如下,是“切換開關”的設計指南,可供參考。
“切換開關”設計指南
1.撥動開關應立即生效
如前所述,撥動開關的設計源于現(xiàn)實生活。以電燈開關為例,想想它是如何工作的。你按下按鈕打開燈光,然后再按下按鈕將其關閉。
在UI/UX設計中,切換開關簡單地模擬了現(xiàn)實生活中的開關,使用戶易于理解和使用。換句話說,當用戶與切換進行交互時,他們不需要單擊“保存”或“確認”來應用新狀態(tài)。相反,當用戶按下開關時,所選選項立即生效,以更改系統(tǒng)功能和首選項的狀態(tài)。當由于系統(tǒng)延遲而無法立即獲得結果時,可以考慮添加處理狀態(tài)循環(huán)動畫,以幫助用戶知道正在實現(xiàn)切換。但請記住,操作時間不應超過幾秒鐘。
2.不要忘記寫好標簽
當我們遇到具有良好標簽的切換開關時,我們將更容易理解切換控件的選項以及切換當前處于什么狀態(tài)。在書寫標簽時,您需要確保標簽短而清晰。單詞的數(shù)量不應超過兩個,但也應清楚地描述切換控件的功能。此外,最好使用左對齊的內聯(lián)標簽,因為這些標簽最適合用戶掃描布局的方式。請記住,開關是OFF或ON,您不應該添加額外的文本標簽,這會使您的界面變得混亂。
3.保持設計的視覺外觀一致
眾所周知,UI元素的視覺外觀有助于用戶預測與元素交互時會發(fā)生什么。如果您的設計與用戶已經(jīng)知道的不一致,他們將被迫停止并思考如何與UI交互。在創(chuàng)建設計時,您需要確保始終使用您選擇用于切換的視覺語言,并且所有切換都應在應用程序中以這種方式實現(xiàn)。
4.選擇合適工具來設計撥動開關
這看起來像是一個小細節(jié),但它在整個產(chǎn)品原型化所需的時間和精力上產(chǎn)生了巨大的差異,尤其是在UI設計中包含許多小組件的大型產(chǎn)品。
5.使撥動開關便于移動
作為一名UI/UX設計師,您確保移動開關在各種產(chǎn)品中都可用的方式。要做到這一點,您需要確保布局通常允許以下兩件事:允許用戶無問題地觸摸開關,并允許組件之間有足夠的自由空間供界面呼吸。
6.測試您的撥動設計
最后但同樣重要的是,需要在發(fā)布設計之前進行用戶測試,以確保不會發(fā)生系統(tǒng)故障。只要記住測試可用性標準,包括通用UI設計和特定的切換組件。測試切換設計的最實用和有效的方法是一個很好的舊A/B測試。當涉及到切換設計時,您需要測試整個頁面以及特定組件上的視覺層次結構。此外,在找到用戶可以立即理解的標簽之前,不要害怕修改標簽。
如上就是“切換開關”的設計步驟,在進行網(wǎng)頁設計、APP設計的時候,可予以參考和借鑒。
如沒特殊注明,文章均為方維網(wǎng)絡原創(chuàng),轉載請注明來自http://www.oulysa.com/news/6719.html