マテリアルデザインのベストプラクティスをフィルターまたは分類しますか？
マテリアルデザインの仕様を使用してウェブアプリケーションを設計しています。
ユーザーがタブに表示されるカードをフィルタリングできるようにする必要があります。
マテリアルデザインについて私が理解していることから、このために機能するかなりの数の異なるオプションがあります。以下に概説するオプションAからDを参照してください。
私は現在、ツールバーの並べ替えアクション（下のオプションA）またはフライアウト付きのFAB（最大6つのオプション（下のオプションD）しかないため）を使用することを考えています。
Aの利点は、アクションがすべて上部にあること（つまり、タブとフィルターカードを変更すること）であり、Aの欠点は、アクションがすべて上部にあること（見落としやすく、小さなデバイスでは間違ったボタンを押す）です...他の人がどうなるか知りたい。
元々、これをこの質問への私の回答として追加しました ですが、メイヨーが質問として作成することを提案したので、ここにあります。
マイWebアプリについて
カードが表示されたタブがあります。私のWebアプリの情報アーキテクチャでは、タブはカードのカテゴリ（食べる場所、するべきこと、ナイトライフなど）に相当します。しかし、私のカードにもタグがあります（子供向け、今すぐ開く、低価格など）。カードは1つのカテゴリにのみ含めることができますが、複数のタグを適用できます。
したがって、私が検討している、マテリアルデザインの仕様と一致するオプションは次のとおりです。
オプションA-ツールバー
カードを含むシートの上部にあるツールバーを使用できます。この場合、シートはタブにあります。仕様によると、「ツールバーは用途が広く、さまざまな方法で使用できます。」たとえば、（仕様から）カードまたはフローティングの場合：
あなたが同意するかどうかはわかりませんが、私はあなたをシートの上部にあるツールバーのようなものだと思っています-仕様によると全く問題ありません。
オプションB-ボトムシートツールバー
あるいは、シェルフを起動するシートの下部にあるツールバーを利用することもできると思います。仕様によると、モーダルボトムシートを使用して、「メニューの明確なエントリポイントがない場合にコンテキストメニューを表示する」ことができます。これは、仕様の例です。
私はすでにWebアプリの下部ナビゲーションを持っているので、これは私の選択肢ではありません。
オプションC-ボタン
これらはタブバーの下に表示され、各タブで繰り返されます。必要に応じて、永続的なフッターボタンの使用を検討できます。タブの下部にフィルターボタンを配置するというアイデアが気に入っています。上部にあるコントロールが少なく、ユーザーが誤って間違ったものに触れる可能性が低いためです。
オプションD-ツールバーまたはフライアウトを表示するように展開されるFAB。FABはタブ上で確実に使用できます。仕様のこちらを参照してください。以下はそのリファレンスの例です。
仕様によると、FABはツールバーまたはすべてのアクションを含む単一のマテリアルシートに変換できます。
私のアプリがページでの主なアクション（したがってFABの用途）がカードをフィルターすることであるので、私はこれが好きです。これの動きを示す優れたビデオがあるスペックを見てください。つまり、FABはツールバーを含む同じ色のシートになります（非常に細かい）。
別の代替案は、このようにすることです。FABは、各タグのアイコンアバターに展開されます（これも好きです）。
これは、タグが6つしかない場合にのみ機能します。仕様で推奨されている最大値であるためです。いくつになるかわかりませんが、たったの6かもしれません。
私は間違いなくFABレイアウトの代わりにツールバーを計画します。現在、最大6つのオプションがあるはずですが、同じことが一定期間にわたって変更される可能性があります。
もう1つは、FABは通常、ショートカットバーとして使用され、素早いアクションを提供することです。したがって、それをフィルタリングオプションとして使用すると、混乱が生じます。
私は個人的にツールバーを使用することを好み、ユーザーがツールバーをタップすると6つのカードがフライアウトします。そうすれば、ユーザーにクイックフィルターボタンが提供され、将来の拡張が問題なく機能するようになります。
リストしたオプションはすべて機能するように聞こえますが、機能するかどうかはいくつかの要因によって異なります。たとえば、テキストラベルを表示する必要がありますか、それともアイコンは十分に説明的ですか？あなたは主に電話、タブレット、またはラップトップの使用をターゲットにしていますか、それぞれのエクスペリエンスはどのようになりますか？タグは最大で6つありますが、ない場合は、デザインをどのように適応させるのでしょうか。
オプションごとにいくつかのワイヤーフレームまたは忠実度の低いモックアップを作成し、さまざまなシナリオ（電話とラップトップ、タッチとマウスなど）でそれぞれがどのように機能するかを確認することをお勧めします。
その後、選択した1つまたは2つのソリューションを忠実に再現したモックアップを作成し、それらを現実的な感じのプロトタイプに接続して、それらを磨くことをお勧めします。