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

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

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

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

ナビゲーション バーには、同じ階層レベルの 3 ～ 5 個のナビゲーション移動先を配置できます。このコンポーネントは、大画面のナビゲーション レールに変換されます。

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

マテリアル 3 のタブとボトム アプリバーは、メイン ナビゲーションを補完したり、子ビューに表示したりするために使用できるセカンダリ ナビゲーション パターンです。

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

レイアウトの操作

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

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

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

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

図 20: 詳細表示のトップバーにあるアラート アクション（左）と、リストアイテムのインラインにあるオーバーフロー アイコン（右）

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