レイアウトとナビゲーション パターン

アプリにユーザーが移動できる複数の宛先が含まれている場合は、他のアプリで一般的に使用されているレイアウトとナビゲーションの組み合わせを採用することをおすすめします。多くのユーザーはすでにこれらの組み合わせのメンタルモデルを持っているため、アプリをより直感的に操作できます。

レイアウトとナビゲーションの組み合わせ

ナビゲーション バーとモーダル ナビゲーション ドロワーは、親レイアウト ビューとプライマリ ナビゲーションの宛先のプライマリ ナビゲーション パターンとして使用されます。

ナビゲーション バーには、同じ階層レベルで 3 ~ 5 個のナビゲーションの宛先を含めることができます。このコンポーネントは、大画面のナビゲーション レールに変換されます。

ナビゲーション ドロワーには 5 つ以上のナビゲーションの宛先を含めることができますが、ナビゲーション バーほど理想的なパターンではありません。これは、コンパクト サイズで上部バーにアクセスする必要があるためです。

Material 3 のタブ下部アプリバーは プライマリ ナビゲーションを補完したり、子ビューに表示したりするために使用できるセカンダリ ナビゲーション パターンです。

ここで、タブは兄弟コンテンツをグループ化するセカンダリ ナビゲーション レイヤとして機能します。

レイアウト アクション

ユーザーがアクションを実行できるようにするコントロールを提供します。一般的なパターンには、上部バーのアクション、フローティング アクション ボタン(FAB)、メニューなどがあります。

最も重要なアクションの場合、FAB はユーザー向けの大きくて目立つボタンを提供します。このレベルでは、一度に 1 つのアクションのみを提供します。FAB は、複数のサイズとラベルを含む展開された形式で表示できます。Scaffold を使用して FAB を固定し、スクロールしても常に 表示されるようにします。

ユーザーが植物ギャラリーに植物をすばやく追加できるフローティング アクション ボタン(FAB)

セカンダリ アクションは、上部バー内、または関連コンテンツの近くにグループ化されている場合はページ内に配置できます。

詳細表示の上部バーのアラート アクション (左)とリスト項目のインラインのオーバーフロー アイコン(右)

すぐに必要にならない追加のアクションは、オーバーフロー メニューに追加します。