レスポンシブなナビゲーションパターン

アプリのナビゲーションデザインに困っていませんか？これらのパターンを参考にしてみてください。ここでは、大きな画面と小さな画面でのナビゲーションの扱い方をいくつか紹介します。大きな画面では、上や左のナビゲーションメニューが一般的ですが、小さな画面では、画面の面積が小さくなるため、情報を表示するのに最適な方法ではないことがよくあります。そのため、すべての画面サイズにおいて、コンテンツの表示とナビゲーションのしやすさを考慮する必要があります。

パターン 1: 先頭のトグルメニュー

このパターンでは、画面幅が狭くなるにつれて、上部のナビゲーションの項目がスペースが足りなくなるまで並び替えられます。この時、いくつかの項目は上部のナビゲーションからドロップダウンメニューに移動します。最も小さい画面では、すべてのナビゲーション項目がトグルメニューに収められ、ユーザーはトグルメニューを展開するためにタップする必要があります。

項目の優先順位をランク付けして、最も重要な項目が常に上部のナビゲーションに表示されるようにすることもできます。

利点:

ヘッダーにはボタンが 1 つなので、小さな画面でもコンテンツの空間が最大限に確保される
ほとんどの画面サイズで重要な項目は表示されたままで、項目の優先順位を決めることができる
ナビゲーション項目の視認性を維持する適切なスペースを確保し、適合しない項目は自動的に隠すことができる

欠点:

一部の項目がドロップダウンやトグルメニューに隠れるため、ナビゲーション項目が見つけにくくなることがある
最も小さな画面サイズで、ナビゲーションメニューを開くボタンにユーザーが気付かないことがある
隠れているナビゲーション項目を操作するのに手間が 1 つ必要になる

上部のトグルメニューとコンテンツブロックの 3 × 2 レイアウトによる広い UI レイアウト

上部のトグルメニューとコンテンツブロックの 2 × 3 レイアウトによる中くらいの幅の UI レイアウト

上部のトグルメニューとスクロールする帯状のコンテンツブロックで構成された、中くらいの幅で短い UI レイアウト

上部のトグルメニューと小さなコンテンツブロックを 2 × 3 でレイアウトした狭いモバイルレイアウト

パターン 2: 引き出せる下部のメニュー

1 つ目のパターンと同様に、上部のナビゲーションの項目は、空間が足りなくなるまで、より小さな幅で再配置されます。その時点で、いくつかの項目は上部のナビゲーションからドロップダウンメニューに移動します。項目の優先順位をつけて、最も重要な項目が常に上部のナビゲーションに表示されるようにすることもできます。

最小の画面では、いくつかの項目が画面の下に残り、残りの項目は隠されます。ユーザーはメニューをフリップして開き、残りのナビゲーション項目から選択することができます。下部に残っている項目を選択することもできます。