用戶體驗設計之「複選框」 vs 「切換」的區別及用法「超級乾貨」

用戶體驗設計之“複選框” vs “切換”的區別及用法「超級乾貨」

在用戶界面設計中切換VS複選框

表單提供了幾個控件,可以更輕鬆地收集用戶的輸入。在設計表格時,在正確的位置使用正確的控件是一項挑戰。

一個複選框控制有三種狀態:未選中,選中和不確定的。最後一個狀態表示子選項列表在父選項下分組並且子選項處於選定和未選擇狀態的情況。

撥動開關表示物理交換機,允許用戶打開或關閉的東西,比如一個光開關。

點擊切換開關是一個兩步操作:選擇和執行,而複選框只是選擇一個選項,其執行通常需要另一個控件。

在選中複選框和切換開關控件之間時,最好關注使用上下文而不是其功能。

以下是一些用例以及在設計表單體驗時決定這兩個控件之間的指導原則。

案例1:即時回覆

使用撥動開關時,

  • 無需明確操作即可立即響應應用的設置。
  • 設置需要開/關或顯示/隱藏功能才能顯示結果。
  • 用戶需要執行不需要審核或確認的即時操作。
用戶體驗設計之“複選框” vs “切換”的區別及用法「超級乾貨」

使用切換開關可以最好地選擇需要即時響應的選項。

案例2:設置確認

使用複選框 時,

  • 應用設置需要在提交之前由用戶確認和審核。
  • 定義的設置需要在顯示結果之前執行提交,確定,下一步,應用等操作。
  • 用戶必須執行其他步驟才能使更改生效。
用戶體驗設計之“複選框” vs “切換”的區別及用法「超級乾貨」

如果需要顯式操作來應用設置,則首選複選框。

案例4:不確定狀態

使用複選框 時,

  • 當多個子選項在父選項下分組時,需要中間選擇狀態。中間狀態將表示在列表中選擇了多個子選項(但不是全部)。
用戶體驗設計之“複選框” vs “切換”的區別及用法「超級乾貨」

使用複選框可以最好地顯示不確定狀態。

案例5:清晰的視覺狀態

使用複選框 時,

  • 有可能與切換開關的開/關狀態混淆。有時很難理解開關是顯示狀態還是動作。
  • 需要提供明確的選定或未選擇狀態。
用戶體驗設計之“複選框” vs “切換”的區別及用法「超級乾貨」

有時撥動開關不能清楚地表明它是狀態還是動作。

案例6:相關項目

使用複選框 時,

  • 用戶必須從相關項目列表中選擇選項。
用戶體驗設計之“複選框” vs “切換”的區別及用法「超級乾貨」

要選擇列表中的相關項,請使用複選框。

使用撥動開關時,

  • 用戶正在切換獨立的功能或行為。
用戶體驗設計之“複選框” vs “切換”的區別及用法「超級乾貨」

獨立項目使用撥動開關進行選擇。

案例7:單一選項

使用複選框時,

  • 提供單個二進制是/否選擇。
  • 只能選擇或取消選擇一個選項,其含義是顯而易見的。
用戶體驗設計之“複選框” vs “切換”的區別及用法「超級乾貨」

單個是/否選項更適用於複選框。

使用撥動開關時,

  • 需要進行單一選擇,並且你希望為開/關類型的決策提供兩個選項。
用戶體驗設計之“複選框” vs “切換”的區別及用法「超級乾貨」

使用切換開關可以最好地理解單個開/關決定。

結論

重要的是在表格中的正確位置提供正確的控制以使其讓用戶使用友好。由於表格可能很長而且有大量選項,如果用戶必須額外點擊以填充他的信息,這對用戶來說變得乏味。提供的用例和指南將幫助你在向表單添加控件時決定複選框和切換開關。


分享最新鮮的設計文章!提供最優質的設計服務!


分享到:


相關文章: