Googleマテリアルデザイン③(ナビゲーション)

Googleマテリアルデザイン③(ナビゲーション) UIデザイン
UIデザイン デザイン

ナビゲーションを理解する

ナビゲーションの種類

  • 横方向のナビゲーション
  • フォワードナビゲーション
  • リバースナビゲーション

横方向のナビゲーション

横方向のナビゲーションとは、同じ階層レベルの画面間の移動を指します。さまざまなアプリの宛先や機能にアクセスしたり、セット内の関連アイテム間でピボットしたりできます。

・ナビゲーションドロワー

→5つ以上のトップレベルの宛先に適しており、一貫したナビゲーションエクスペリエンスのためにデバイスサイズ全体で使用できます。

・下部のナビゲーションバー

→3〜5つのトップレベルの宛先に適しており、それらの位置、可視性、および画面全体での永続性により、宛先間ですばやくピボットできます。

・タブ

→アプリの階層の任意のレベルで使用して、画面サイズ全体で2つ以上のピアデータセットを表示できます。

フォワードナビゲーション

フォワードナビゲーションとは、タスクを完了するための画面間の3種類の移動のいずれかを指します。

  • 下層画面へのアクセス(親画面から子供画面)
  • プロセスのフロー(順序づけられたシーケンス)
  • アプリ内の一つの画面から別の画面へ直接移動
フォワードナビゲーションの実装
  • カード、リスト、画像リストなどのコンテンツコンテナ
  • 別の画面に進むボタン
  • 1つ以上の画面でのアプリ内検索
  • コンテンツ内のリンク

リバースナビゲーション

リバースナビゲーションとは、画面間の後方移動を指します。ユーザーを最近の画面履歴で時系列に移動したり、アプリの階層を上に移動したりできます。

リバースナビゲーションの実装
  • もどるボタン
  • 上に戻るボタン

ナビゲーショントランジション

階層的な移動

階層遷移は、ユーザーがアプリ内で1レベル上または下に移動したときを反映します。互いに隣接するレベルの画面には、親と子の関係があり、親は子よりも高い階層レベルに配置されます。

ピアトランジション

ピア遷移は、同じ階層レベルの画面間で発生します。

同じ親を共有する画面(アルバム内の写真、プロファイルのセクション、フローのステップなど)は、相互の関係を強化するために一斉に移動します。ピア画面は片側からスライドインし、その兄弟は画面から反対方向に移動します。

検索

検索を使用すると、ユーザーはアプリ全体でコンテンツをすばやく見つけることができます。基本検索を使用すると、ユーザーは検索テキストフィールドにクエリを入力して、関連する結果を表示できます。

検索クエリの入力方法を拡張して、履歴の提案、クエリのオートコンプリート、音声入力を含めることができます。

永続的な検索

検索がアプリの主な焦点である場合は、永続検索を使用します。検索テキストフィールドは検索バー内に表示され、フォーカスを受け取る準備ができています。

拡張可能な検索

検索がアプリの主な焦点ではない場合は、拡張可能な検索を使用します。拡張可能な検索では、開いている検索テキストボックスではなく、ツールバーに検索アイコンが表示されます。

タイトルとURLをコピーしました