web-dev-qa-db-ja.com

フィルター機能がGoogleマテリアルデザインテーブルにどのように現れるか

マテリアルデザインのドキュメントを確認しましたが、- filter list icon

これがその場のアイコンです。

filter icon in situ, look to the top right of the image

インターフェースの振る舞いがどうあるべきか知りたい。フィルター条件のドロップダウンは表示されますか?ユーザーはフィルター値を指定できますか?ユーザーがフィルター値を選択したら、どのように表示されますか?どんな助けでもありがたいです。ありがとう

15
Ralph Marchant

材料設計-表 ページは可能な相互作用を指定します:

サポートされる相互作用

行ホバー(デスクトップ)

行の選択

列の並べ替え

列ホバー(デスクトップ)

長いヘッダータイトル

テキスト編集

メニュー

フィルターアクションに最適なのは、メニューです。


私が見つけることができる同様のフィルターアクションは App Bar にあります:

それをクリックするとメニューが表示されます。

アプリバーで使用されているアイコンは、既にテーブルでドロップダウン矢印として使用されています。

テーブルの場合、単純なメニューが表示され、選択したクエリがアイコンの横に表示されると思います。

1
Alvaro

同じ質問があります。ユーザーが選択/選択解除できるチップを表示するダイアログを開いて、テーブルの結果をフィルタリングします。これは、次の画像のように、マテリアルデザインの現在のバージョンが示唆しているものと一致しているようです。

enter image description here

1
Meli

このアイコンは、ボタンの/で使用されるシンボルのカテゴリからのものです。あなたの例で「フィルターリスト」アイコンをクリックすると、フィルターが表示されるというのは直感的に思えます。フィルターなしでは、アクション完了できません。

フィルターがどのように表示されるかは、オプションの数、ページUI、およびマテリアルデザインによっていくつかのガイダンスが提供されると思いますが、すべてのアイコンの仕様を明確にする必要があるほど厳密ではありません。

この場合、「 Material Design Data Table "の場合、フィルターは検索フィールドです。私はこのフィルターを期待していませんでしたが、これは良いUXではないとは言えません。

enter image description here

enter image description here

1
Madalina Taina

フィルターボタンをクリックしてフィルターオプションを表示することを期待しています。デスクトップでは、フィルターオプションのあるドロップダウンを期待します。

Airtable filter dropdownhttps://airtable.com/

YouTubeも同様のことを行います。

enter image description here

1
cdrini

Slide for Redditがボタンをどのように使用するかを次に示します。

enter image description hereenter image description here

カスタムフィルターが必要な場合は、選択する必要があるフィルター用に別のアクティビティポップアップを表示して、Doneをクリックして、変更が実際のアクティビティに反映されていることを確認してください。これにより、カスタムフィルターをドロップダウンに追加する複雑さがなくなります。

1
Swapnil Borkar

この質問はここ数か月の間、成功する答えはありませんでした。公式の実装はないので(少なくともこれまでのところ回答に掲載されています)推測しかできません

私の推測では、フィルターは要素に関連付けられているのではなく、表示されている列に関連付けられている可能性があります。要素のフィルタリングはおそらくより関連性がありますが、それではなぜガイドから欠落しているのでしょうか?

したがって、 this JSFiddle と同じように、テーブルの列は「フィルタリング」されます。アイコンをクリックすると List が表示され、表示する列を確認できます。

enter image description here

1
Alvaro

メニューで使用されるこのフィルターパターンを見ました: https://www.google.com/design/spec/components/menus.html#

フィルターの種類がメニューに表示されます。タップすると、テーブル内のアイテムが並べ替えられます。テーブルの複雑さによっては、不確定なアクティビティスピナーを使用して再ロードする必要がある場合があります。シンプルなテーブルの場合、ビュー内でアニメーション化できます。お役に立てれば。乾杯。

0
Aaron James