【設計文章翻譯 03期】複選框 VS 開關

來自專欄瓦力的工作坊

本期翻譯的文章來自 Saadia Minhas，她總結了在的選擇表單組件時，複選框和開關的不同用法。

表單提供了多種控制項來方便用戶填寫，在設計表單的時候，在合適的地方使用正確的控制項對設計師來說是一個挑戰。

複選框有三種狀態：未選中，選中和不確定狀態。最後一種狀態通常出現在一個父級選項底下有一組子選項，這些子選項選中或者未選中都有的情況。

開關控制項模擬了一個實物的開關，允許用戶打開或者關閉，就像燈的開關一樣。

按下開關控制項其實是一個分為兩步的操作：選擇和執行。而複選框僅僅只有一個選擇的操作，它的執行需要另外的控制項來輔助。

當要決定到底使用開關還是複選框控制項，最好是結合他們的使用情景，而不是僅僅看功能。

以下是一些在設計表單體驗時如何選擇這兩個控制項的案例和指導原則。

案例1：即時響應

在以下情況使用開關控制項：

• 無需明確操作即可立即響應應用的設置
• 需要開/關或者顯示/隱藏功能區顯示結果的設置
• 用戶需要執行而不需要審核或確認的即時操作

案例2:確認設置

在以下情況使用複選框：

• 應用設置需要在提交之前由用戶確認和審核
• 定義的設置需要在顯示結果之前執行提交，確定，下一步等操作
• 用戶必須執行其他步驟才能使更改生效

案例3：多選

在以下情況使用複選框：

• 有多個選項可供選擇，用戶必須從中選擇一個或多個選項
• 單擊多個切換按鈕逐個切換，每次單擊後查看結果都需要額外的時間

案例4：不確定的狀態

以下情況使用複選框：

• 當一個父選項底下有多個子選項時，會出現不確定的選擇狀態，這種狀態下，子選項只有個別被選中，並不是全選中

案例5：清晰的視覺狀態

以下情況選擇複選框：

• 在使用開關控制項時會出現這樣一個令人疑惑的情況，有時它很難讓人分清楚開關是在表示目前的狀態還是動作
• 需要提供明確的選定或未選擇狀態時

案例6：相關的條目

以下情況使用複選框：

• 用戶必須從相關的列表中選擇時

以下情況使用開關控制項：

• 用戶在切換獨立的功能和行為時

案例7：獨立的選項

以下情況使用複選框：

• 提供一個單獨的是/否選擇時
• 只有一個行為可以選擇或者取消，並且含義明確

以下情況使用開關控制項：

• 需要進行單一選擇，並且你希望為開/關類型提供兩個選項

結論

在表單中合適的地方提供適當的組件對於友好的用戶體驗來說非常重要。因為表單可能非常長而且有大量的選項，所以對於用戶來說讓他做一些額外的操作來填寫表單是很乏味的。本文提供的案例和指南將幫助你，在向表單添加控制項時決定該選擇複選框還是開關控制項。