web-dev-qa-db-ja.com

フィルターを設計する方が良いですか?

どちらがフィルターに適していますか、単一の値を選択します。

  1. チェックボックス(jsを使用して単一の選択を保持)
  2. ドロップダウンリスト
  3. ラジオボタン
  4. ハイライトされたラベル

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

8
Bruce Dou

何をしたいかによります。 :)

  • 複数のフィルターを一度に適用する場合は、checkboxes(または他のトグルボタン)を使用します。それらを単一の値に使用する場合は、@ AndroidHustleを使用してそれらの操作を聞き、単一の独立したブール値にのみ使用します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

  • ドロップダウン、コンボボックス、またはオートコンプリートボックスを使用して、ドロップダウンの背後に代替フィルターを非表示にします。通常、フィルターのリストが無限にある場合は、優れたアイデアです。

mockup

bmmlソースをダウンロード

  • ラジオボタンまたはSegmented Controlを使用して、どのオプションがあるかを明確に出力します。区別可能な属性。

mockup

bmmlソースをダウンロード

  • 最後に、Segmented Control(iOS用語)はラジオボタングループとは異なり、1行に収まるという利点があり、タブの使用に似ていますそれがあなたが求めているものであるなら、フィルター以上のものを禁止してください。

mockup

bmmlソースをダウンロード

編集:

考えてみると、何にフィルターをかけたいかに応じて、リストにあるコントロールごとにリストが表示されます。 DatePicker、フリーテキスト、複数値コントロール、位置スライダー。

コンテキスト、プラットフォーム、コンテンツなどがなければ、この質問に対する1つの正しい答えはありません。 :)

14
JOG

neverチェックボックスオプショングループを操作してラジオオプショングループのように機能させる必要があります。これは、ユーザーインタラクティブ要素の従来の予期される動作に違反します。したがって、単一の選択チェックボックスはありません。

ドロップダウンリストとラジオボタン:これは、検索フォームのレイアウト(これがそうである場合)とオプションの数によって異なります。ラジオボタンは2〜3個のオプションに適していますが、それ以上のスペースを占めるようになり、ドロップダウンが推奨されます。

ハイライトされたラベルパネルは、ラジオオプショングループと同様のインタラクティブパターンに従います。違いは、アプリケーションの美学によりシームレスに統合できることです。繰り返しになりますが、ラジオオプショングループと同様に、多すぎる場合は簡単に混雑する可能性があります。ただし、私の経験では、ラジオボタンとは対照的に、それらは、たとえばエリアの検索や、そのエリアで販売されている自動車、オートバイ、自転車のリアルタイムフィルタリングなど、リアルタイムフィルタリングを示すことがよくあります。これは、ルックアンドフィールがタブに似ていて、すぐにインタラクティブな要素になるためと考えられます。検索フォームで事前に検索を設定するためにそれを使用することは、私にはなじみがありません。

9
AndroidHustle

それは本当に依存すると私は思います:

  • ラジオボタン:最大4-5のオプションから選択する場合
  • ドロップダウンリスト:最大20から30のオプションがある場合(約100のオプションに使用しますが、この場合、使用するのは非常に困難です)
  • tabs:オプションが少ししかなく、タブがUIに収まる場合
  • filter field:100を超えるオプションから選択する場合

一般的には、候補やオートコンプリートを含むフィルターフィールドを使用します。

4