ナビゲーションバー

ナビゲーションバーはアプリスクリーンの上部にが表示され、コンテンツの階層をナビゲーションできます。

ナビゲーションバーはまた、スクリーンのタイトルを表示する自然な場所も提供します。これは、人々があなたのアプリやゲームに慣れるのに役立ち、また、スクリーンのコンテンツに影響を与えるコントロールを含めることもできます。

macOS にはナビゲーションバーがありません。macOS アプリでナビゲーションを有効にするには、多くの場合、サイドバーまたはツールバーの [戻る] ボタンのようなナビゲーションコントロールを使用します。また、通常はタイトルバーに macOS ウィンドウのタイトルを表示します。

ベストプラクティス

有用なコンテキストを提供する場合は、タイトル領域を使用して現在のスクリーンを描写します。 スクリーンのタイトルは、人々があなたのアプリをナビゲートするときに自分の場所を確認するのに役立ちます。ただし、ナビゲーションバーにタイトルを付けるのが冗長に思える場合は、タイトル領域を空のままにしておけます。たとえば、メモは通常、コンテンツの最初の行で十分なコンテキストを提供するため、現在のメモにタイトルを付けません。あなたのアプリの名前は、スクリーンやコンテンツの階層に関する有用な情報を提供しないため、タイトルとしてはうまく機能しません。

簡潔なスクリーンのタイトルを書きます。 スクリーンの目的を抽出する単語または短いフレーズを目指します。約 15 文字以下を使用すると、[戻る] ボタンとオプションのコントロール用の十分なスペースが確保されるため、ほとんどのスクリーンでうまく機能する傾向があります。

より没入感のある体験を提供するために、ナビゲーションバーを一時的に非表示にすることを検討してください。 たとえば、Photos では、人々が写真をフルスクリーンで表示すると、ナビゲーションバーやその他のインターフェイス要素が非表示になります。このタイプの動作を実装する場合は、人々がスクリーンをタップするか下にスワイプしてナビゲーションバーを復元できるようにします。

標準の [戻る] ボタンを使用します。 標準の [戻る] ボタンを使用すると、情報の階層をたどることができることを人々は知っています。カスタムの [戻る] ボタンを実装する場合は、それが依然として [戻る] ボタンのように見え、人々が期待するように動作し、インターフェースの残りの部分と一致し、あなたのアプリやゲーム全体で一貫して実装されていることを確認してください。システムで提供される [戻る] ボタンのシェブロンをカスタムイメージに置き換える場合は、カスタムのマスクイメージも提供する必要があります。たとえば、iOS はこのマスクを使用して、遷移中にボタンのタイトルをアニメーション化します。

テキストラベルを使用するボタンには十分なスペースがあることを確認してください。 ナビゲーションバーに複数のテキストのラベル付きボタンが含まれている場合、これらのボタンのテキストが一緒に表示され、ボタンが区別できなくなることがあります。ボタンの間に固定スペースを挿入して区切りを追加します。開発者向けガイダンスについては、UIBarButtonSystemItemFixedSpace (UIBarButtonSystemItemFixedSpace) を参照してください。

プラットフォームの考慮事項

tvOS に関する追加の考慮事項はありません。macOS ではサポートされていません。

iOS、iPadOS

ナビゲーションバーでセグメントコントロールを使用して、情報階層をフラットにすることを検討してください。 たとえば、Phone は [Recents(最近)] タブのナビゲーションバーにあるセグメントコントロールを使用して、最近の通話をすべて表示するか、不在着信のみを表示するかを切り替えることができます。このようなデザインがあなたのアプリで適切な場合は、セグメントコントロールを階層の最上位レベルのナビゲーションバーにのみ配置し、2 番目のレベルのスクリーンには正確な [戻る] ボタンのラベルを作成してください。ガイダンスについては、セグメントコントロールを参照してください。

大きなタイトルを使用して、人々がナビゲートしたりスクロールしたりする際に方向性を維持できるようにします。 たとえば、Phone は大きなタイトルを使用してアクティブなタブを明確にし、Music は大きなタイトルを使用してアルバム、アーティスト、プレイリスト、ラジオなどのコンテンツ領域を区別します。デフォルトでは、人々がコンテンツをスクロールし始めると大きなタイトルは標準のタイトルに移行し、人々が一番上までスクロールすると大きなタイトルに戻り、現在の位置を思い出させます。開発者向けガイダンスについては、prefersLargeTitles (prefersLargeTitles) を参照してください。

標準のタイトル

大きなタイトル

大きなタイトルのナビゲーションバーの境界線を非表示にして、タイトルとコンテンツのつながりを強調することを検討してください。 ただし、このデザインを標準タイトルのナビゲーションバーに適用する場合は注意が必要です。バーのタイトルとボタンは、境界線が表示されていないと区別しにくくなる可能性があるためです。対照的に、iPad の分割ビューでは、一次ビューと二次ビューの両方で境界のないスタイルを使用して、両方のビューの間の一貫性を維持したい場合があります。バーの陰影を削除することで、ナビゲーションバーの下の境界線を非表示にできます (人々がコンテンツ領域をスクロールすると、境界線は自動的に再表示されます)。