マテリアルデザインに対して複数行のタブがありますか？
このモックアップに見られるように、タブの複数の行が必要です。
1つはカテゴリをクリックし、もう1つはカテゴリを選択します。
これでいい？
また、付記-「カテゴリ」が選択されている場合、さまざまなカテゴリがすべて表示されるページがある場合、ユーザーは希望するものをクリックします（ https://rrrepo.co/explore）のように =）？または、自動的に最初のカテゴリに入る必要がありますか？
以下のマテリアルデザインのためにUXを妥協しないでください。マテリアルデザインは、ユーザーエクスペリエンスを補完するものであり、それを規定するものではありません。ですから、御言葉に従ってはいけません。まず、最高のユーザーエクスペリエンスを決定し、次に、Googleマテリアルデザインガイドラインのどれをどの程度使用するかを決定します。
Google Material Designの最近の更新によると、 here はマテリアルがタブの使用について話し、ネストされたタブの使用を禁止します：
Googleは最高のUXを作るために多くの努力を払っていますが、肝心なことは、テストがネストされたタブでより良い結果をもたらすなら、それらを使用することです。
ただし、ドロップダウンメニューやその他のナビゲーション手段などの代替手段の使用も検討できます。サイドナビゲーションとタブの組み合わせが良いオプションでしょう。
Googleがマテリアルデザインのために提案したガイドラインは、ガイドラインにすぎないことを覚えておいてください。彼らはすべての状況であなたを助けることはできませんが、あなたにジャンプスタートを与えるのに十分です。
これでいい？
マテリアルデザインガイドラインには、この状況に対処するためのいくつかの推奨事項があります。現在、ナビゲーションには2つのレベルがあります。
- 上の3つのタブ
- タブの2番目のレベル。これにより、さらにフィルターをかけることができます。
プライマリナビゲーションの処理に関する推奨事項 を見つけることができます。これは、現在行っているようにタブを使用することです。 Google Inboxにあります のもう1つのオプションは、左側のスライドアウトメニューに主要なナビゲーションを表示することです。
一般に、限られた量の画面スペースで作業している場合は、最初にユーザーに最も重要な情報を提示する必要があります。カテゴリのリストは、おそらくページで最も重要なものではありません。
また、調べたいと思われる マルチレベルナビゲーションを処理するためのパターン も提供します。複数のレベルのナビゲーションがある場合は、ナビゲーションドロワーの使用をお勧めしますが、サイドメニューには通常1レベルのナビゲーションのみを含めることをお勧めします。デスクトップデバイスでは、ナビゲーションドロワーに複数のネストレベルを設定できますが、モバイルでは（画面スペースを確保するため）、2番目のレベルのナビゲーションに多くのオプションがある場合は、各オプションでランディングページに移動することをお勧めします。
もう1つのオプションは、スペースが限られているときにタブを上に移動してナビゲーションドロワーに折りたたむことです。これは、多くのタブがある場合に特に便利です。これはGoogleが行うことです Googleストアで 画面サイズが小さい場合。
十分なスペースがある場合は、すべてのカテゴリから始めます。
そして、画面サイズが縮小されると、タブは左のスライドメニューにプッシュされます。
左側のサイドバーにそれほど多くのコンテンツがない場合、これは検討する必要があるかもしれません。
カテゴリが選択されている場合、さまざまなカテゴリがすべて表示されるページを作成する必要がありますか？次に、ユーザーは希望するものをクリックします（ https://rrrepo.co/explore に従って）？
通常、メインタブをクリックすると、タブに関連するページに移動する（探索ページのような）またはアクションに移動することが期待されます。その情報をインラインで表示することがトリガーされます（ドロップダウンの表示など）。
これの良い例 Amazonとそのメニュー 。メニューを右クリックして新しいタブで開くと、すべてのカテゴリが この「ディレクトリ」ページに移動します になります。
または、自動的に最初のカテゴリに入る必要がありますか？
私はこれを強くお勧めします。特に、ユーザーに他の可能なカテゴリがあることが明らかにされていない場合は特にそうです。 「Categories」をクリックすることで、1つだけに限定されたページではなく、利用可能なカテゴリに関する一般的な情報が見つかると予想されます。
はい、マテリアルデザインでは複数行のタブを配置することはお勧めできません。これは、どのWebサイト/アプリでもお勧めできません。
マテリアルデザインブログでは、情報が非常に明確であり、ここにも投稿すると役立つと思います。
- 単一の行としての現在のタブ。必要に応じてタブラベルを2行目に折り返してから切り捨てます。
- 含めないタブ内に一連のタブ付きコンテンツを含める。
- 表示されているコンテンツに対応するタブを強調表示します。
- タブを階層的にグループ化します。タブのグループをそのコンテンツに接続します。
- 2つの間の関係を維持するために、タブをコンテンツに隣接させてください。
タブ構造でカテゴリを表示する際の問題は、部屋が不足しやすいことです。タブレットでの現在のデザインを検討してください。 1024px幅でもコンテンツはすべて表示されますか？
考慮すべきもう1つのことは、現在のカテゴリの卓越性です。 この記事 は、ほとんどのユーザーがビューポートの左端から約200px後に注意を向ける方法について説明しています。その200pxは多くのセカンダリナビゲーションが存在する場所であり、それは良いことです。これはユーザーの主な目的ではなく、必要な場合にのみ呼び出されます。対照的に、ほとんどのユーザーは1つのカテゴリをクリックしてから、そのアクションの大部分を実行する可能性がありますが、カテゴリはページの右上にあります。
モックアップの左側には、カテゴリを格納するための十分なスペースがあります。実際、これは、@ Jakeの this link が示すように、マテリアルデザインと最も一致するアプローチです。