web-dev-qa-db-ja.com

タブレイアウトでのフィルタリング/並べ替えのマテリアルデザインのベストプラクティスはありますか?

私がやろうとしていることの各タブに独立したフィルターと並べ替えオプションを追加するためのマテリアルデザインのベストプラクティスを見つけようとしていますタブレイアウト。

提案した内容最初のリストのサブヘッダーの横にあるタブの下に[フィルター/並べ替え]テキストボタンを配置することを提案しています。

Google Appsで見つけた例デザイナーが最初のリストのサブヘッダーに並べ替えオプションを配置した例があります。

マテリアルデザインがUXのすべての側面をカバーしているわけではないことを理解していますが、リストをフィルタリングする方法(つまり、リストタイトルフィルター)を提案するときに重複があるようです。

以下のリンクと非常によく似たこの質問をさらに検索しますが、正解を期待してGoogleから例を提供しています。

モバイル-1つのタブでのアイテムの並べ替え

解決策ではないと私が思うこと

リストタイトルフィルターはタブ付きページであるため、おそらく問題外です。ツールバーにアイコンを追加することは、すでにフィックスコンテンツがいっぱいであるため利用できません。

enter image description here

8
Rhys

すばらしい質問です。まったく同じ問題があります。マテリアルデザインの仕様から理解できることから、多くのオプションがあります。

マイWebアプリについて

カードが表示されたタブがあります。私のWebアプリの情報アーキテクチャでは、タブはカードのカテゴリ(食べる場所、するべきこと、ナイトライフなど)に相当します。しかし、私のカードにもタグがあります(子供向け、今すぐ開く、低価格など)。カードは1つのカテゴリにのみ含めることができますが、複数のタグを適用できます。

したがって、私が検討しているオプションと、thinkがマテリアルデザインの仕様と一致しているオプションは次のとおりです。

オプションA-ツールバー

カードを含むシートの上部にあるツールバーを使用できます。この場合、シートはタブにあります。 spec によると、「ツールバーは用途が広く、さまざまな方法で使用できます。」たとえば、(仕様から)カードまたはフローティングの場合:

enter image description hereenter image description here

あなたが同意するかどうかはわかりませんが、私はあなたをシートの上部にあるツールバーのようなものだと思っています-仕様によると全く問題ありません。

オプションB-ボトムシートツールバー

あるいは、シェルフを起動するシートの下部にあるツールバーを利用することもできると思います。 spec によると、モーダルボトムシートは「メニューの明確なエントリポイントがないときにコンテキストメニューを表示する」ために使用できます。これは仕様の例です: enter image description here

これは、Webアプリに下部ナビゲーションがないため、私にとってはうまくいきます。

オプションC-ボタン

これらはタブバーの下に表示され、各タブで繰り返されます。必要に応じて、永続的なフッターボタンの使用を検討できます。タブの下部にフィルターボタンを配置するというアイデアが気に入っています。上部にあるコントロールが少なく、ユーザーが誤って間違ったものに触れる可能性が低いためです。

オプションD-展開してツールバーまたはフライアウトを表示するFAB。FABはタブ上で確実に使用できます- こちらの仕様を参照してください 。以下はそのリファレンスの例です。

enter image description here

仕様によると、FABはツールバーまたはすべてのアクションを含む単一のマテリアルシートに変換できます。

enter image description hereenter image description here

私のアプリがページでの主なアクション(したがってFABの用途)がカードをフィルターすることであるので、私はこれが好きです。これの動きを示す優れたビデオがあるスペックを見てください。つまり、FABはツールバーを含む同じ色のシートになります(非常に細かい)。

別の代替案は、このようにすることです。FABは、各タグのアイコンアバターに展開されます(これも好きです): enter image description here

これは、タグが6つしかない場合にのみ機能します。仕様で推奨されている最大値であるためです。いくつになるかわかりませんが、たったの6かもしれません。

FAB to Toolbarオプションで行くつもりです...

2
Meli

マテリアルデザインの背景で問題を解決できると思います

https://material.io/design/components/backdrop.html

これにより、バックレイヤーに複数のフィルターとコントロールを含めることができ、フロントレイヤーにフィルターされたコンテンツを表示することができます。上記の背景コンポーネントのマテリアルガイドラインを参照してください。

2

私はいくつかの基本的な質問をする必要があると思います:

固有のソートを必要とするタブになる結果を引き起こした[〜#〜] and [〜#〜]フィルタリング?

このアプリとそのコンテンツで達成しようとしていますか?

タブ、フィルタリング、および並べ替え(スマートフォン画面上)は、発生させようとしているエクスペリエンスと互換性がありますか?

ユーザーがそのような複雑で忙しいインタラクティブなエクスペリエンスに負担をかけないように、資料、コンテンツ、アクティビティ、目的を提示および整理できる他の方法はありますか?

文脈上の問​​題分析のための推測と解説:

あなたは実際にあなたが提示し、相互作用を提供することで任務の何でもの操作のレイアウト、設計、組み込みの多くの側面に必要な無数の決定を行う責任を避けようとしているのではないかと思います以降:

意思決定や設計の実際の実行を回避するための決定は、責任を分散する方法を見つけることになります。その一部は、ユーザー、Androidのガイドライン、および今日の「ベストプラクティス」が何を意味するかに責任を負わせています。そして、このサイトの良いユーザー。

より具体的には、この取り組みでは、フィルタリングと並べ替えが、プレゼンテーション、使用法、および発見可能性の責任を回避し、代わりにユーザーに投げかける手段であると判断したようです。

提案

Xをより重視したUIの設計/構造を再考する:

一歩下がって、タッチスクリーンのコンテンツと容量を確認してから、少し時間をかけてユーザーのように感じ、それらについても感じてください。

このアプローチは、この方法でソートとフィルタリングを融合させることの問題を明らかにしたいと思います。さらに、より効果的なパスが目的の機能を実現する方法の再考である可能性があることを明らかにし、機能性、使いやすさ、画面スペース、および検出可能性、コーディング、コーディングの許容できる妥協点について内部の意思決定者と話し合うことを期待します応答性。

1
Confused

オーバーフローメニューの使用を検討してください。

Filtering and sorting using the material design overflow menu

1
KevinC

チップを使用すると、ユーザーは情報の入力、選択、コンテンツのフィルター、またはアクションのトリガーを行うことができます。チップは、複数のインタラクティブな要素のグループとして動的に表示されます。一貫しておなじみの行動を促すボタンであるボタンとは異なり、ユーザーが同じ一般的な領域に同じアクションとして表示することを期待しているボタン。

0
James