モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。
独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、7〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、3つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。
デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。
01. Pub Guide ナビゲーション
こちらのWindows OS 向けアプリインターフェースでは、美しい見た目のフォントをつかい、トップページのコンテンツを集約しながら、標準的なWindowsのナビゲーションに独自のユニークなアニメーション以降を追加、実装しています。Pub Guide。
02. ボトム・ナビゲーション
上部にあるフィルタ機能と組み合わせ、画面スクリーン下部に配置されたナビゲーションメニュー。機能性だけでなく、魅力的なビジュアルを表現したサンプル例 Bottom Navigation。
03. サイドメニュー・ナビゲーション
ユニークなハンバーガーメニューを採用し、開閉時には円形を活用した遷移エフェクトが印象的な Side Menu Navigation。
04. Google Newsstand ナビゲーション
Google Newsstand のコンセプトデザインで、ユニークなレイアウトを展開する3階層にまたがるナビゲーションメニュー。トップレベルではトピックに焦点を当て、最も低い階層ではスクリーン幅いっぱいでコンテンツを展開し、読みやすさや可読性を最大限活用しています。
05. 検索バー付きナビゲーション
こちらのモバイルアプリでは、キーワード検索機能をうまくナビゲーションメニューに実装しています。最初に4つのメインメニューをアイコン付きで表示し、フィルタ機能と一緒に検索バーが表示される Reach Search Navigation。
06. オーバービュー・ナビゲーション
このナビゲーションコンセプトは、コンテンツを順番に並べた水平レイアウトから、進行状況インジケータを含むコンパクトな垂直レイアウトへの切り替えが印象的なデザイン。Overview Navigation。
07. カラフル・ナビゲーション
ハンバーガーメニューをクリックすると、スクリーン全体を使って各種コンテンツをリスト形式でアニメーション表示するサンプル例、Colorful Navigation Animated。
08. サイド・ナビゲーション
矢印アイコンをクリックすることで、垂直方向に表示されていたナビメニューが、左側から立体的に展開するアニメーションが素敵なナビゲーションパターン、Side Navigation。
09. ボトム・ナビゲーション
このアプリでは、ナビゲーションメニューの中心にある追加ボタンをタップすることで、他のインターフェースはフェードアウトで半透明となり、2つのボタンにフォーカスする、視覚的にもユニークなトランジションを楽しむことができる Bottom Navigation。
10. インタラクション・ナビゲーション
このモバイルアプリ向けナビゲーションメニューでは、最初にすべてのコンテンツをスクリーン全体表示し、一回のタップで各コンテンツに移動できるなど非常によく考えられています。ユーザーがスクロールをはじめると、ナビゲーションメニューはハンバーガーメニューに集まり、コンテンツの表示に最適な領域を確保することができます。Interaction Navigation
サムネイル@ : Navigation in UI by Tubik – Dribbble
参照元リンク : 10 Innovative Navigation Examples in Mobile App Design – Speckyboy Magazine