1. 簡要了解設計中的開關
設計中提到的開關其實就是仿照物理開關的映射,提供了兩種最為簡單、直接的對立選項,比如開/關、啟動/禁用等。
它就像生活中控制燈泡的開關,摁下燈泡立即亮起。所以它要表達的意思也必須明確,不然用戶都不知道,即將要啟動/禁用的是什么。
![]()
2. 開關組件的特點
(1)對象標簽名稱須傳達清晰,能夠讓用戶能夠明確感知操作后的動作開啟或關閉什么;
(2)主體標簽信息和按鈕是分離的,兩個視覺焦點;
(3)一般點擊后會立即反饋;
(4)沒有 hovering 效果 ,有動作效果,更適合手指操作;
3. 開關使用場景舉例
(1)開關的標簽意符需傳達清晰
和單選、復選框不一樣的是,開關主體所表示的信息和開關本身(開關按鈕)是分離的。
用戶在點擊開關按鈕前,必須用文字清晰告知用戶點擊后會發生什么,甚至有時需要通過增加小標題來加以說明開關按鈕的功能。
![]()
(2)一般情況下只作為立即生效的功能使用開關按鈕
在表單填寫時,往往最終會有「提交」按鈕作為結束態,開關作為表單字段的填寫,用戶點擊后并不能夠立即生效,往往需要再次點擊「提交」按鈕才能生效。
![]()
(3)有風險,需著重提醒用戶
開關的視覺權重較高,在復雜的表單信息中,它能夠很快吸引到用戶的注意力,并能夠給用戶以視覺提醒。
![]()
(4)避免大面積使用開關,使用它控制局部細節或者次要設置
開關在視覺感知上它和按鈕上有些接近,所以盡量避免在表單中使用大量的開關來控制局部層級內容,因為開關是控制單一操作,大量內容都試用開關的情況下會導致信息繁瑣,影響用戶體驗,這種情況推薦使用復選框來替代開關作為局部控制。

(5)把開關作為高層級內容控制或信息設置
把開關用來作為總控制,開啟后顯示更多層級的內容,關閉后避免 了web 表單中大面積的使用開關按鈕,會和其他的基本組件造成視覺干擾。
將開關作為高層級總控制,可以提升用戶的興趣,同時還能表現出開關的重要性。
![]()
5. 小結
開關按鈕視覺突出且反應快。用戶瀏覽表單、填寫內容組之間,一般不需要很強的視覺差異。如果填寫的表單信息之間對比差異過大,開關往往給用戶造成過大的視覺干擾,反而阻礙用戶瀏覽表單的效率。



