核取方塊和切換按鈕的7個使用案例

富途web開發團隊發表於2018-08-30

歡迎關注富途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切換看起來太像按鈕了：一個說關閉的按鈕會讓它被點選動作它（因為這就是一個按鈕會做什麼）。然後使用者無法從錯誤中恢復，因為按鈕的狀態現在對他們來說是正確的（現在它說'開啟'因為我已將其關閉）。

直到明白左/右切換按鈕的原理才會停止切換，所以最好避免暫時在桌面應用程式上切換。”