[日本語]マテリアルデザイン『Understanding navigation』#09

2022年10月6日 13:09

はじめに
今回は『マテリアルデザインガイドライン』の『Understanding navigation』について解説していきます。
なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいな。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。
正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design URL：https://material.io/
※動画・画像データ等はこちらから引用させていただいております。

『navigation』とは？

マテリアルデザインにおける『Navigation』とは、アプリの画面間を移動する行為、つまり『画面遷移』のことです。

そして、この『Navigation』には以下の3つの種類があります。

①Lateral navigation(横方向のナビゲーション)
②Forward navigation(前方向のナビゲーション)
③Reverse navigation(戻るナビゲーション)

まずは、①Lateral navigation(横方向のナビゲーション)について解説していきます。

①Lateral navigation(横方向のナビゲーション)とは？

「Lateral navigation」とは、「横方向のナビゲーション」という意味で、「同じ階層の別の画面へ遷移」することを指します。

また、下の図のように、最上位の階層の画面は「Lateral navigation」によって、全ての画面に遷移できるようにする必要があります。

音楽アプリの画面フロー図：ピンク色の枠と矢印で示されている画面遷移が「Lateral navigation」です。

また、マテリアルデザインでは『最上位にある画面数』によって、「適しているコンポーネント」の提供がされています。(以下の表)

最上位の画面数が「5画面以上」の場合は、「Navigation drawer」が適している

最上位の画面数が「3~5画面」の場合は、「Bottom navigation bar」が適している

なお、下の図のように「Tab」は「Navigation drawer」と組み合わせることで、(最上位の画面ではなくても)「Lateral navigation(横方向の「ナビゲーション」を実現させることができます。

②Forward navigation(前方向のナビゲーション)とは？

「Forward navigation」とは、直訳すると「前方向のナビゲーション」という意味で、これは「深い階層への画面へ遷移」することを指します。

「Album」画面から「Song」画面への遷移、「Search」画面から「Song」画面への遷移が「Forward navigation」です。

また、「Forward navigation」には以下の3つの方法があります。

1.『階層の高い画面から、深い画面への遷移』

「Card」コンポーネントをタップすると、「Card」の詳細画面という深い階層の画面へと遷移することができます。

2.『順番の決められたフローによる画面遷移』

3.『最上部の階層の画面から、深い階層の画面への直接的な画面遷移』

検索を使用することで、ユーザーは最上位の画面からアプリ内の任意の画面にすばやくアクセスできます。

③『Reverse navigation』とは？

「Reverse navigation」とは、直訳すると「戻る方向のナビゲーション」で、つまり「前の画面へ戻る画面遷移」のことです。

「Song」画面から「Album」画面への遷移、「Song」画面から「Search」画面への遷移が「Reverse navigation」です。
(❷「Search」画面へ戻るフローは「Search」画面から検索して「Song」画面へ遷移した場合に限ります。）

「Reverse navigation」は、基本的に「個々のプラットフォーム」で提供されます。

[戻る] ボタンを使用すると、ユーザーは最近表示した画面を新しい順に移動できます。
❶Android ナビゲーションバーの [戻る] ボタンは「Reverse navigation」
❷Web ブラウザーの [戻る] ボタンは「Reverse navigation」

『Reverse navigation』の考慮事項

「Reverse navigation」によって前の画面に戻る際には、以下の考慮すべきことがいくつかあります。

ユーザーが前の画面に戻った際の、位置と状態 (スクロール位置など) を記憶して表示すること。
フォームからの情報がプライバシーのために消去された場合など、前の画面が利用できない状態になった場合は、明確なメッセージを表示すること。
子画面と、上位の画面との関係を明確に示します。たとえば、深い階層の画面を表示した際、その上の階層に画面があることを識別できるようにする必要があります。

まとめ

今回は、『Understanding navigation』についてまとめました。

⭐️『navigation』には3つの種類がある
①Lateral navigation(横方向のナビゲーション)
②Forward navigation(前方向のナビゲーション)
③Reverse navigation(戻るナビゲーション)

さらに②Forward navigationには3つの方法がある
1.『階層の高い画面から、深い画面への遷移』
2.『順番の決められたフローによる画面遷移』
3.『最上部の階層の画面から、深い階層の画面への直接的な画面遷移』

UIを設計していく際に重要な項目なので繰り返し理解していきたい内容だと思いました。

最後まで読んでいただきありがとうございます!