2019-02-10 Understanding navigation Material Design Understanding navigation ナビゲーションの理解 Navigation enables users to move through an app. ナビゲーションを使用すると、ユーザーはアプリ内を移動できます。 CONTENTS Types of navigation Lateral navigation Forward navigation Reverse navigation Types of navigation ナビゲーションの種類 Navigation is the act of moving between screens of an app to complete tasks. It’s enabled through several means: dedicated navigation components, embedding navigation behavior into content, and platform affordances. ナビゲーションとは、アプリの画面間を移動してタスクを完了することです。 これは、専用のナビゲーションコンポーネント、コンテンツへのナビゲーション動作の埋め込み、プラットフォームのアフォーダンスなど、さまざまな方法で実現できます。 Navigational directions ナビゲーションの方向 Based on your app’s information architecture, a user can move in one of three navigational directions: アプリの情報アーキテクチャに基づいて、ユーザーは次の3つのナビゲーション方向のいずれかに移動できます。 Lateral navigation refers to moving between screens at the same level of hierarchy. An app’s primary navigation component should provide access to all destinations at the top level of its hierarchy.横方向のナビゲーションとは、同じ階層レベルの画面間を移動することです。 アプリの主要なナビゲーションコンポーネントは、その階層の最上位レベルにあるすべての目的地へのアクセスを提供する必要があります。 Forward navigation refers to moving between screens at consecutive levels of hierarchy, steps in a flow, or across an app. Forward navigation embeds navigation behavior into containers (such as cards, lists, or images), buttons, links, or by using search.順方向ナビゲーションとは、階層の連続したレベルで画面間を移動すること、フロー内でステップを移動すること、またはアプリ間で移動することを指します。 順方向ナビゲーションは、ナビゲーション動作をコンテナ（カード、リスト、画像など）、ボタン、リンク、または検索を使用して埋め込みます。 Reverse navigation refers to moving backwards through screens either chronologically (within one app or across different apps) or hierarchically (within an app). Platform conventions determine the exact behavior of reverse navigation within an app.リバースナビゲーションとは、年代順に（1つのアプリ内または異なるアプリ間で）または階層的に（アプリ内で）画面を逆方向に移動することです。 プラットフォームの規約によって、アプリ内のリバースナビゲーションの正確な動作が決まります。 Lateral navigation allows movement between the top-level screens of this music app’s information architecture. 横方向のナビゲーションにより、この音楽アプリの情報アーキテクチャのトップレベルの画面間を移動できます。 Users of this music app can use forward navigation to access a song in one of two ways: この音楽アプリのユーザーは、前方ナビゲーションを使用して、次の2つの方法のいずれかで曲にアクセスできます。 Navigating hierarchically from a music album to a particular song音楽アルバムから特定の曲への階層的なナビゲート Searching for the song and navigating directly to it, bypassing screens in the hierarchy above the song (Library and Album)曲の上の階層にある画面（ライブラリとアルバム）を迂回して、曲を検索して直接ナビゲートする From a song screen, users may navigate in reverse in one of two ways: 曲の画面から、ユーザーは次の2つの方法のいずれかで逆方向にナビゲートできます。 Upward in the hierarchy to the song’s parent, in this case the album containing the song階層の上方向に曲の親、この場合はその曲を含むアルバム Chronologically, to a search results screen, but only if the user just navigated to the song from that screen年代順に検索結果画面に移動します。ただし、ユーザーがその画面から曲に移動したときだけです。 Lateral navigation 横方向のナビゲーション Lateral navigation refers to movement between screens at the same level of hierarchy. It enables access to different app destinations and features, or pivoting between related items in a set. 横方向のナビゲーションとは、同じ階層レベルにある画面間の移動を指します。 さまざまなアプリの送信先や機能にアクセスしたり、セット内の関連項目間を移動したりできます。 Destinations and hierarchy 目的地と階層 An app’s primary navigation component should provide access to all destinations at the top level of its hierarchy. Apps with two or more top-level destinations can provide lateral navigation through a navigation drawer, bottom navigation bar, or tabs. アプリの主要なナビゲーションコンポーネントは、その階層の最上位レベルにあるすべての目的地へのアクセスを提供する必要があります。 最上位の目的地が2つ以上あるアプリでは、ナビゲーションパネル、下部のナビゲーションバー、またはタブを使用して横方向のナビゲーションを提供できます。 Component Use for # destinations Devices Navigation drawer Top-level destinations 5+ Mobile, Tablet, Desktop Bottom navigation bar Top-level destinations 2-5 Mobile Tabs Any level of hierarchy 2+ Mobile, Tablet, Desktop Navigation drawers are appropriate for five or more top-level destinations, and can be used across device sizes for a consistent navigation experience. ナビゲーションドロワーは5つ以上の最上位目的地に適しており、一貫したナビゲーションエクスペリエンスのためにデバイスサイズを超えて使用できます。 Bottom navigation bars provide access to 2-5 top-level destinations on mobile devices. Their location, visibility, and persistence across screens allow quick pivoting between destinations. 下のナビゲーションバーからは、モバイルデバイスの最上位2〜5の目的地にアクセスできます。 画面間の位置、可視性、および永続性により、目的地間を素早くピボットできます。 Tabs can be used at any level of an app’s hierarchy to present two or more peer sets of data across screen sizes. タブをアプリの階層の任意のレベルで使用して、画面サイズにまたがって2つ以上のピアデータセットを表示できます。 Do. Tabs (2) can enable additional lateral navigation within an app’s hierarchy when paired with a top-level navigation component like a navigation drawer (1). ナビゲーションドロワー（1）のようなトップレベルのナビゲーションコンポーネントと組み合わせると、タブ（2）でアプリの階層内の追加の横方向ナビゲーションを有効にできます。 Forward navigation 前方ナビゲーション Methods of forward navigation 前方ナビゲーションの方法 Forward navigation refers to one of three types of movement between screens to complete a task: 前方ナビゲーションとは、タスクを完了するための画面間の移動の3つのタイプのうちの1つを指します。 Downward in an app’s hierarchy to access deeper content, from a parent screen (higher level of hierarchy) to a child screen (lower level)親画面（上位階層）から子画面（下位階層）へ、より深いコンテンツにアクセスするためにアプリの階層を下方向に移動 Sequentially through a flow, or an ordered sequence of screens, such as a checkout processフロー、またはチェックアウトプロセスなどの順序付けられた一連の画面を介して順次 Directly from one screen to any other in the app, such as from a home screen to a screen deep in an app’s hierarchyホーム画面からアプリの階層の奥にある画面など、アプリ内のある画面から他の画面に直接移動する Implementing forward navigation 前方ナビゲーションの実装 While lateral navigation uses dedicated navigation components, forward navigation is often embedded into a screen’s content through a variety of components. ラテラルナビゲーションは専用のナビゲーションコンポーネントを使用しますが、フォワードナビゲーションはさまざまなコンポーネントを介して画面のコンテンツに埋め込まれることがよくあります。 Forward navigation can be implemented using: 前方ナビゲーションは、次の方法で実装できます。 Content containers such as cards, lists, or image listsカード、リスト、画像リストなどのコンテンツコンテナ Buttons that advance to another screen別の画面に進むボタン In-app search on one or more screens1つ以上の画面でのアプリ内検索 Links within contentコンテンツ内のリンク The cards on the home screen (parent) provide a preview of each note’s content and can be tapped to navigate to the full note (child).ホーム画面のカード（親）は各メモの内容のプレビューを提供し、タップして全メモ（子）に移動できます。 Buttons can provide a clear affordance to advance in a flow through their label, placement, and visual emphasis.ボタンは、ラベル、配置、および視覚的な強調を介して順を追って進むための明確なアフォーダンスを提供します。 Search allows users to quickly access screens anywhere within an app’s information architecture.検索機能により、ユーザーはアプリの情報アーキテクチャ内のどこにいても画面にすばやくアクセスできます。 Reverse navigation 逆ナビゲーション Reverse navigation refers to backward movement between screens. It can move users chronologicallythrough their recent screen history, or upwards through an app’s hierarchy. 逆方向ナビゲーションとは、画面間の逆方向移動を意味します。 最近の画面履歴からユーザーを年代順に移動したり、アプリの階層を上に移動したりできます。 Reverse chronological navigation 逆年代順ナビゲーション Reverse chronological navigation refers to navigating in reverse order through a user’s history of recently viewed screens. It can move users between screens within an app or across multiple apps. For example, the Back button on a web browser is a form of reverse chronological navigation. 逆年代順ナビゲーションとは、ユーザーが最近表示した画面の履歴を逆方向にナビゲートすることです。 アプリ内の画面間または複数のアプリ間でユーザーを移動できます。 たとえば、Webブラウザの「戻る」ボタンは、逆年代順ナビゲーションの一種です。 This type of navigation is typically provided by the operating system or platform. Individual platforms define how it behaves and how users can access that functionality. この種のナビゲーションは通常、オペレーティングシステムまたはプラットフォームによって提供されます。 個々のプラットフォームは、それがどのように振る舞うか、そしてユーザーがその機能にどのようにアクセスできるかを定義します。 The Back button allows users to navigate recently viewed screens in reverse chronological order. [戻る]ボタンをクリックすると、最近表示した画面を時系列の逆順に移動できます。 The Back button (A) in the Android navigation barAndroidナビゲーションバーの[戻る]ボタン（A） The Back button (B) in a web browserWebブラウザの[戻る]ボタン（B） Upward navigation 上向きのナビゲーション Upward navigation allows users to navigate one level upwards within a single app’s hierarchy, until the app’s home or top-level screen is reached. For example, the Up arrow in a top app bar is a form of upwards reverse navigation.上方向のナビゲーションでは、アプリのホーム画面またはトップレベルの画面に到達するまで、ユーザーは単一のアプリの階層内で1つ上のレベルに移動できます。 たとえば、上部のアプリバーの左向き矢印は、上向きの逆ナビゲーションの形式です。 Upward navigation should be implemented for all child screens in an app and follow platform guidance. Android and web apps should use the Material Up action, while iOS apps should use the back button within an iOS Navigation Bar. アプリ内のすべての子画面に対して上向きのナビゲーションを実装し、プラットフォームのガイダンスに従うべきです。 AndroidおよびWebアプリケーションはMaterial Upアクションを使用する必要がありますが、iOSアプリケーションはiOSナビゲーションバー内の戻るボタンを使用する必要があります。 Upward navigation is possible on Android and web apps through an Up action (A)AndroidおよびWebアプリでは、上方向の操作で上方向のナビゲーションが可能です（A） Upward navigation is possible on iOS through the back button (B) in an iOS Navigation BariOSのナビゲーションバーにある戻るボタン（B）を使用すると、iOS上でのナビゲーションが可能になります。 Considerations 検討事項 The design and functionality of your app should account for both kinds of reverse navigation in your app’s target platforms. To optimize a user’s experience when navigating in reverse: アプリのデザインと機能は、アプリのターゲットプラットフォームにおける両方の種類のリバースナビゲーションを考慮する必要があります。 逆方向に移動するときにユーザーの操作性を最適化するには Return users to their prior screen position and state, such as their vertical scroll position, to speed up information recall and task resumption.垂直方向のスクロール位置など、前の画面位置および状態にユーザーを戻すと、情報の呼び戻しおよびタスクの再開が迅速になります。 Provide clear messaging if a screen’s prior state is no longer available, such as when information from a form has been cleared for privacy.フォームの情報がプライバシーのために消去された場合など、画面の以前の状態が利用できなくなった場合は、明確なメッセージを送信します。 Clearly indicate child screens’ relationship with screens above them in the hierarchy. For example, if a user moves directly to a child screen in your app, they should be able to identify the parent screen to which they can navigate upward.階層内で上位の画面との子画面の関係を明確に示します。 たとえば、ユーザーがアプリ内の子画面に直接移動した場合、上に移動できる親画面を識別できるはずです。
