KDE BLOG

Webデザインやコーディングについて書いています

【Human Interface Guidelines 翻訳 vol.8】iOS - App Architecture - Navigation

元ページ
https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/

People tend to be unaware of an app’s navigation until it doesn’t meet their expectations. Your job is to implement navigation in a way that supports the structure and purpose of your app without calling attention to itself. Navigation should feel natural and familiar, and shouldn’t dominate the interface or draw focus away from content. In iOS, there are three main styles of navigation.

人々は予測しない限り、アプリのナビゲーションに気付かない傾向があります。
あなたの仕事は、ナビゲーション自体に注意を向けることなく、アプリの構造と目的をサポートする方法でナビゲーションを実装することです。
ナビゲーションは自然で親しみやすいものにする必要があり、インターフェースを支配したり、コンテンツからフォーカスを奪ったりしてはなりません。
iOSには、3つの主要なナビゲーションスタイルがあります。

Hierarchical Navigation(階層ナビゲーション)

Make one choice per screen until you reach a destination. To go to another destination, you must retrace your steps or start over from the beginning and make different choices. Settings and Mail use this navigation style.

目的地に到着するまで、画面ごとに1つの選択を行います。
別の目的地に行くには、ステップをたどるか、最初からやり直して別の選択をする必要があります。
「設定」と「メール」はこのナビゲーションスタイルを使用します。

f:id:jinseirestart:20200627162412p:plain

Flat Navigation(フラットナビゲーション)

Switch between multiple content categories. Music and App Store use this navigation style.

複数のコンテンツカテゴリを切り替えます。
「ミュージック」と「App Store」はこのナビゲーションスタイルを使用します。

f:id:jinseirestart:20200627233516p:plain

Content-Driven or Experience-Driven Navigation(コンテンツ主導またはエクスペリエンス主導のナビゲーション)

Move freely through content, or the content itself defines the navigation. Games, books, and other immersive apps generally use this navigation style.

コンテンツ内を自由に移動するか、コンテンツ自体がナビゲーションを定義します。
ゲーム、書籍、その他の没入型アプリは通常、このナビゲーションスタイルを使用します。

f:id:jinseirestart:20200627234840p:plain

Some apps combine multiple navigation styles. For example, an app that uses flat navigation may implement hierarchical navigation within each category.

一部のアプリは、複数のナビゲーションスタイルを組み合わせています。
たとえば、フラットナビゲーションを使用するアプリは、各カテゴリ内に階層ナビゲーションを実装できます。

Always provide a clear path. People should always know where they are in your app and how to get to their next destination. Regardless of navigation style, it’s essential that the path through content is logical, predictable, and easy to follow. In general, give people one path to each screen. If they need to see a screen in multiple contexts, consider using an action sheet, alert, popover, or modal view. To learn more, see Action Sheets, Alerts, Popovers, and Modality.

常に明確なパスを提供します。
アプリ内のどこにいるか、次の目的地への行き方を常に知っておく必要があります。
ナビゲーションスタイルに関係なく、コンテンツのパスが論理的で予測可能であり、簡単にたどることが不可欠です。
一般に、各画面へのパスは1つにします。
複数のコンテキストで画面を表示する必要がある場合は、アクションシート、アラート、ポップオーバー、またはモーダルビューの使用を検討してください。
詳細については、アクションシートアラートポップオーバーモダリティを参照してください。

Design an information structure that makes it fast and easy to get to content. Organize your information structure in a way that requires a minimum number of taps, swipes, and screens.

コンテンツにすばやく簡単にアクセスできるようにする情報構造を設計します。
最小数のタップ、スワイプ、および画面を必要とする方法で情報構造を整理します。

Use touch gestures to create fluidity. Make it easy to move through your interface with minimum friction. For example, you could let people swipe from the side of the screen to return to the previous screen.

タッチジェスチャーを使用して流動性を作成します。
最小限のフリクションでインターフェースを簡単に移動できます。
たとえば、画面の横からスワイプして前の画面に戻ることができます。

Use standard navigation components. Whenever possible, use standard navigation controls such as page controls, tab bars, segmented controls, table views, collection views, and split views. Users are already familiar with these controls, and will intuitively know how to get around your app.

標準のナビゲーションコンポーネントを使用します。
可能な限り、ページコントロール、タブバー、セグメント化されたコントロール、テーブルビュー、コレクションビュー、分割ビューなどの標準のナビゲーションコントロールを使用してください。
ユーザーはすでにこれらのコントロールに慣れており、アプリ内を移動する方法を直感的に理解できます。

Use a navigation bar to traverse a hierarchy of data. The navigation bar’s title can show the current position in the hierarchy, and the back button makes it easy to return to the previous location. For specific guidance, see Navigation Bars.

ナビゲーションバーを使用して、データの階層を移動します。
ナビゲーションバーのタイトルには、階層内の現在の位置を表示できます。
[戻る]ボタンを使用すると、前の場所に簡単に戻ることができます。
具体的なガイダンスについては、ナビゲーションバーを参照してください。

Use a tab bar to present peer categories of content or functionality. A tab bar lets people quickly and easily switch between categories, regardless of the current location. For specific guidance, see Tab Bars.

タブバーを使用して、コンテンツまたは機能といった同等のカテゴリを表示します。
タブバーを使用すると、現在の場所に関係なく、カテゴリをすばやく簡単に切り替えることができます。
具体的なガイダンスについては、タブバーを参照してください。

On iPad, use a split view instead of a tab bar. Split views provide the same quick navigation as tab bars while making better use of the large display. For guidance, see Split Views.

iPadでは、タブバーの代わりに分割ビューを使用します。
分割ビューは、タブバーと同じクイックナビゲーションを提供すると同時に、大きなディスプレイをより有効に活用します。
ガイダンスについては、ビューの分割を参照してください。

Use a page control when you have multiple pages of the same type of content. A page control clearly communicates the number of pages available and which one is currently active. The Weather app uses a page control to show location-specific weather pages. For specific guidance, see Page Controls.

同じタイプのコンテンツの複数のページがある場合は、ページコントロールを使用します。
ページコントロールは、使用可能なページ数と現在アクティブなページを明確に伝えます。
天気アプリは、ページコントロールを使用して、場所固有の天気ページを表示します。
具体的なガイダンスについては、ページコントロールをご覧ください。

TIP
Segmented controls and toolbars don’t enable navigation. Use a segmented control to organize information into different categories. Use a toolbar to provide controls for interacting with the current context. For additional information on these types of elements, see Segmented Controls and Toolbars.

ヒント
セグメント化されたコントロールツールバーはナビゲーションを有効にしません。
セグメント化されたコントロールを使用して、情報をさまざまなカテゴリに整理します。
ツールバーを使用して、現在のコンテキストと対話するためのコントロールを提供します。
これらの種類の要素の詳細については、セグメント化されたコントロールツールバー」を参照してください。