モバイルアプリで使えるナビゲーションコンセプト10選

Ben Bate

イギリスのプロダクトデザイナー、ベンです。 ウェブサイトDribbleでフォローしてみてください。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

10 Innovative Navigation Examples in Mobile App Design (2017-09-26)

モバイルのナビゲーションデザインには、さまざまな形や形式があります。すべてのナビゲーションが同じ構造でできていれば、ユーザーにとってわかりやすく直感的ですが、現実はそれほど単純ではありません。

アプリにはそれぞれ固有の問題がありますが、それらはナビゲーションデザインを使用して解決できます。たとえば、7つか8つの主要なメニュー項目があるアプリでは、おそらくハンバーガーアプローチを実装します。3つのメニュー項目があるアプリでは、タブバーのようなものを実装するでしょう。

これとは別に、AppleのiOSでは下部のタブバーを、GoogleのAndroidでは上部のタブバーとハンバーガーナビゲーションを以前から推奨しているという対立もあります。

良い点は、デザイナーが製品やユーザーにとって最適なソリューションを追及していることもあり、ナビゲーションデザインにおいては画期的な革新がいくつか見られることです。この記事では、最新の優れたデザインコンセプトをいくつかまとめていきます。

パブガイド

Pub Guide for Windows OSは、わかりやすい太字のフォントと上部にボリュームを持たせたレイアウトを使用するという、標準的なWindowsのナビゲーションシステムを独自に実装しています。

下部のナビゲーション

この美しく実装された例は、下部のタブを上部のフィルターバーとを組み合わせて使用​​しています。結果としてインタラクションは、使い勝手と視覚的な印象の両方を満たしています。

サイドメニューナビゲーション

このサイドメニューナビゲーションでは、独特なハンバーガーアイコンと、素晴らしい開閉時の遷移のエフェクトが使用されています。

ニュースナビゲーション

Googleニュースのナビゲーションコンセプトでは、独自のレイアウトを使用して、同じナビゲーションメニューに3つの段階を持たせています。最初のレベルではトピックに焦点を当て、もっとも詳細なレベルになるとコンテンツの可読性とスペースを最大限に活かしています。

ナビゲーション検索

リーチは、検索機能を実装するという非常に革新的な方法を思いつきました。最上部に別のメニューを追加するのではなく、タブの項目として検索を含んでおり、検索とシンプルなフィルタが一緒に開きます。

概要ナビゲーション

このナビゲーションのコンセプトはとても印象的で、水平レイアウトから、進行状況のインジケータを含んだコンパクトな垂直のレイアウトに切り替えたりします。

カラフルなナビゲーション

このアニメーションのコンセプトでは、ハンバーガーアイコンから全画面のナビゲーションリストに移行する、視覚的に美しいエフェクトが使用されています。

サイドナビゲーション

このサイドナビゲーションは独特で、左下の拡大ボタンをタップすると、画面の縦幅いっぱいの90度のリストから、幅広の水平リストに遷移します。

下部のナビゲーション

追加ボタンをタップすると、このアプリの下部のナビゲーションが美しいアニメーションエフェクトを引き起こします。残りのユーザーインターフェイスはフェードアウトして、2つの新しいナビゲーションアイテムに焦点を絞ることができます。

インタラクションナビゲーション

このモバイルナビゲーションの操作の例は、1度のタップでナビゲーションアイテムが画面全体に最初に表示されるという点で非常によく考えられています。ユーザーがスクロールを始めると、このナビゲーションはハンバーガーアイコンに凝縮され、最適な表示領域でコンテンツが表示されます。