複選框和切換按鈕的7個使用案例

歡迎關注富途web開發團隊，php , 前端須要你。缺人從衆

表單自帶的控件能夠方便咱們收集用戶的輸入。在表單設計時，恰當的使用合適的控件也是一項挑戰。

checkbox有三種狀態：未選擇，選擇和狀態不肯定的三種。最後一個狀態表示子選項在父選項分組裏而且子選項處於選擇和未選擇的中間狀態。

toggle表示物理開關，容許用戶打開或者關閉，就像開關燈同樣。

監聽toggle開關實現了兩個操做：選擇和執行，然而checkbox只是選擇一個選項，執行須要另外的控件來實現。

在決定用checkbox仍是toggle時，最好是關注具體的情景而不是功能。

如下是一些用例，以及在設計表單時決定用哪一個控件的一些指引。

案例一：及時反饋

如下這些狀況須要用toggle

• 應用設置不須要有很明確的操做就能夠即刻生效。
• 設置須要開/關或者顯示/隱藏來展現效果。
• 用戶選擇後沒必要審覈確認就能夠執行生效。

須要即刻響應時最好用toggle

案例二：設置須要確認

如下這些狀況須要用checkbox

• 應用設置須要用戶確認和審覈才能提交。
• 定義的設置生效以前須要有一些操做，好比點擊提交，OK，或者下一步。
• 用戶必須執行額外的操做才能使更改的變化生效。

若是須要一些明確的操做才能使得應用失效，首選checkbox

案例三：多選

如下這些狀況須要用checkbox

• 在多選中用戶須要選擇一個或者多個選項。
• 若是用toggle的話，須要一個一個的點擊，而每一次點擊都須要有額外的時間等待才能看到效果。

在列表中選擇多個選項可以使用checkbox

案例四：不肯定的狀態

「使用更好的切換開關設計能夠解決此問題。 顯示開/關聲明將提升清晰度。 微軟有正確的想法：https：//docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles」

如下這些狀況須要用checkbox

• 不肯定選擇狀態時須要有多個子選項在父選項的分組裏。這個不肯定的狀態意味着子選項是須要被選擇的（不是所有都必選）。

不肯定的狀態最好用checkbox展現

案例五：清晰的視覺

如下這些狀況須要用checkbox

• 有一種狀況會讓toggle的開關狀態比較困惑，就是有時很難分清這個開關是展現狀態仍是須要操做。
• 須要提供一個清晰的選擇和未選擇的狀態區別。

有時候toggle不能很清晰的表示出它是一個狀態仍是須要操做。

「這是toggle切換開關的主要問題。 它們（還）沒有像複選框那樣強大的約定來代表它們的狀態。 因爲不良的視覺設計和切換標籤，這種模式錯誤也會變得更糟。

在最近對桌面應用程序中的獨立切換開關的測試中，咱們觀察到大約200％的人中約有20％的人在他們意味着「關閉」時點擊切換到開啓狀態。 咱們認爲這是由於toggle切換看起來太像按鈕了：一個說關閉的按鈕會讓它被點擊動做它（由於這就是一個按鈕會作什麼）。 而後用戶沒法從錯誤中恢復，由於按鈕的狀態如今對他們來講是正確的（如今它說'打開'由於我已將其關閉）。

直到明白左/右切換按鈕的原理纔會中止切換，因此最好避免暫時在桌面應用程序上切換。」

案例六：須要選中類似的選項

如下這些狀況須要用checkbox

• 用戶須要在選出列表中的類似選項

在列表中選出類似的選項須要用checkbox

如下這些狀況須要用toggle

• 用戶須要切換不一樣的特性或者操做。

相互獨立無交集的一些操做須要用toggle

案例七：選項單一獨立

如下這些狀況須要用checkbox

• 無論這個選項的選擇與否會記錄一個是或者否的結果。
• 當只有一個選項時，你能夠選擇也能夠不選擇，可是選不選擇的效果區別比較明顯。

選擇意味着表示是/否選擇用checkbox

如下這些狀況須要用toggle

• 只有一個選擇，而且開關表明不一樣的選擇。

用toggle能更好的表示出開關的選擇

結論

在合適的情形下使用合適的控件可使界面更加友好。由於表單可能會有比較多的選項須要選擇，當用戶點擊選擇這些選項來完善信息時會以爲很枯燥。以上這些例子能夠幫助你在表單中添加控件時，能夠更好的選擇用checkbox和toggle。

原文：futu.im/article/che…

英文：uxplanet.org/checkbox-vs…

譯者：Diandian