web-dev-qa-db-ja.com

トグルスイッチ、ラジオボタン、チェックボックスの違いは何ですか?これらのパターンが使用できる最良のケースは何ですか?

これらのパターンが使用できる最良のケースは何ですか?

enter image description here

7
Sknny

まあ、それはあなたがどのシステムであるかに依存します。
AndroidiOS および Windows のモバイルガイドラインがあります。

たとえば、iOSでは通常のチェックボックス(tickbox btwとは呼ばれません)またはラジオボタンは使用されませんが、 要素のグループ化されたリスト (「テーブルビュー」にスクロールダウン)またはスイッチのみが使用されます。

しかし、私が学んだことから、これらすべてのコントロールを次のように使用します。


ラジオボタン

  • 相互に排他的なオプションの場合。ただし、バイナリ選択の場合は不可 enter image description here
  • オプションが多すぎる場合(Windowsでは数値は8)、代わりにドロップダウンを使用します

チェックボックス

  • バイナリオプションまたはセット内の複数のオプションを選択する場合
  • "do not .."のような否定ではなく、常に肯定的なコマンドで使用する必要があります。

enter image description here


スイッチ

  • バイナリオプションにも使用されますが、通常は実際のスイッチから期待されるような何かをアクティブ化/非アクティブ化します。

enter image description here

  • [保存]を押すか、前の画面に戻った後だけでなく、スイッチによって影響を受ける設定をすぐに変更することは、優れたユーザーエクスペリエンスです。
    現実のスイッチへのこの期待があるため(たとえば、ライトがすぐにオンになることはわかっています)
12
Big_Chair

トグルスイッチの一般的な用途は、何かを開始または停止することです。 Wi-FiやBluetoothアクセスなど。これは、ライトスイッチに類似しています。

enter image description here

ラジオボタンは、一度に1つだけ選択できる他のいくつかのラジオボタンのグループで使用されます。 1つを選択すると、他のすべての選択が解除されます。

enter image description here

チェックボックス(またはチェックボックス)は、他のいくつかのチェックボックスのグループで使用できますが、他のボックスとの依存関係はありません。いずれかを選択しても、他のチェックボックスには影響しません。チェックありは真を表し、チェックなしは偽を表します。

enter image description here

4
Benny Skogberg

トグル-比較的人気があるにもかかわらず(たとえば、Appleそれらを標準のインターフェイスコントロールとして使用))トグルスイッチには、固有の状態とアクションのあいまいさがあります。つまり、ラベル( 'on'たとえば、)は現在の状態またはアクションです。

ラジオボタン-ユーザーが2つ以上の選択肢から1つのオプションを選択できるようにします。各オプションは1つのラジオボタンで表されます。ユーザーは、ラジオボタングループ内の1つのラジオボタンのみを選択できます。

チェックボックス-このようなスイッチの使いやすさを向上させるにはさまざまな方法があります。これらはどちらもかなり人気があり、ほとんどのユーザーがそれを取得する前に数回の学習を繰り返すだけでよいことを覚えておく必要があります。ただし、認識の観点からすると、トグルスイッチに比べてチェックボックスの方がはるかに簡単(かつ高速)に解釈できます。

---------------------トグルの例--------- ------------

Toggle example

---------------------ラジオボタンの例-------- -------------

Radio button example

---------------------チェックボックスの例--------- ------------

CheckBox example

最後に、それらを利用するという状況に応じて、つまり、どのようにしてユーザーに提示するかを指定します。たとえば、トグルはデフォルトでオン/オフのシナリオで考慮されますが、前面または背面のカメラ選択に使用できます。

参照URL-

ラジオボタンまたは2つのオプションのうちの1つのトグルスイッチ?

https://msdn.Microsoft.com/en-us/library/windows/apps/hh465475.aspx

https://msdn.Microsoft.com/en-us/library/windows/apps/hh700395.aspx

トグルボタンとチェックボックスおよびトグルスイッチ

注-わかりやすく理解するために、上記の参照リンクを確認してください。

0
nikhil84