XCode 13.2 日本語化計画 : Human Interface Guidelines

ナビゲーションバー

ナビゲーションバーはアプリスクリーンの上部、ステータスバーの下に表示され、一連の階層スクリーンをナビゲートできます。多くの場合新しいスクリーンが表示されると、以前のスクリーンのタイトルでラベル付けされた戻るボタンがバーの左側に表示されます。ナビゲーションバーの右側には、アクティブなビュー内のコンテンツを管理するための [Edit(編集)] ボタンや [Done(完了)] ボタンなどのコントロールが含まれている場合があります。分割ビューでは、ナビゲーションバーは分割ビューの単一のペインに表示される場合があります。ナビゲーションバーは半透明で、背景の tint (色合い) があり、キーボードがスクリーン上に表示されているとき、ジェスチャが発生したとき、またはビューのサイズが変更されたときに非表示になるように構成できます。

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

開発者向けガイダンスについては、UINavigationBar (UINavigationBar) を参照してください。

ナビゲーションバーのタイトル

ナビゲーションバー内に現在のビューのタイトルを表示することを検討してください。 ほとんどの場合、タイトルは人々が見ているものを理解するのに役立ちます。ただし、ナビゲーションバーにタイトルを付けるのが冗長だと思われる場合は、タイトルを空のままにしておくことができます。たとえば、コンテンツの最初の行が必要なすべてのコンテキストを提供するため、Notes は現在の note (メモ) にタイトルを付けません。

コンテキストをさらに強調したい場合は、大きなタイトルを使用してください。 大きなタイトルはコンテンツと決して競合してはなりませんが、一部のアプリでは、大きなタイトルの大きく太字のテキストは、閲覧や検索の際に人々を方向付けるのに役立ちます。たとえば、タブ付きのレイアウトでは、大きなタイトルを使用すると、アクティブなタブを明確にし、人々が一番上までスクロールしたことを示します。Phone はこのアプローチを使用しますが、Music はアルバム、アーティスト、プレイリスト、ラジオなどのコンテンツ領域を区別するために大きなタイトルを使用します。iOS 13 以降では、大きなタイトルのナビゲーションバーには、デフォルトで背景素材やシャドーは含まれていません。また、人々がコンテンツをスクロールし始めると、大きなタイトルは標準のタイトルに移行します。開発者向けガイダンスについては、prefersLargeTitles (prefersLargeTitles) を参照してください。

大きなタイトルのナビゲーションバーの境界線を非表示にすることを検討してください。 iOS 13 以降では、ナビゲーションバーのシャドーを削除することで、ナビゲーションバーの下の境界線を非表示にできます (人々がコンテンツ領域をスクロールすると、境界線が自動的に再表示されます)。境界のないスタイルは、タイトルとコンテンツのつながりの感覚を高めるため、大きなタイトルのナビゲーションバーでうまく機能します。ただし、バーのタイトルとボタンを区別するのが難しい場合があるため、境界のないスタイルは標準タイトルのナビゲーションバーと同じようにはうまく機能しない可能性があります。これの例外は、iPad での分割ビューで、両方で境界のないスタイルを使用して、プライマリビューとセカンダリビューの間の一貫性を維持したい場合があります。

ナビゲーションバーコントロール

コントロールが多すぎるナビゲーションバーで混雑させないでください。 一般に、ナビゲーションバーには、ビューの現在のタイトル、戻るボタン、およびビューのコンテンツを管理する 1 つのコントロールのみを含める必要があります。ナビゲーションバーでセグメント化されたコントロールを使用する場合、バーにはタイトルやセグメント化されたコントロール以外のコントロールを含めないでください。

ナビゲーションバーコントロールのカスタムグリフを作成する場合は、以下のサイズを使用し、必要に応じてバランスを調整して下さい。

標準の戻るボタンを使用して下さい。 人々は、標準の戻るボタンを使用すると、情報の階層をたどって行くことができることを知っています。ただし、カスタムの戻るボタンを実装する場合は、それがまだ戻るボタンのように見え、人々が期待するとおりに動作し、インターフェースの他の部分と一致し、あなたのアプリを通して一貫して実装されていることを確認してください。システムが提供する戻るボタンの山形模様をカスタムイメージに置き換える場合は、カスタムマスクイメージも提供して下さい。iOS はこのマスクを使用して、移行中にボタンのタイトルをアニメーション化します。

マルチセグメントのパンくずのパスを含めないでください。 戻るボタンは常に単一のアクションを実行し、以前のスクリーンに戻ります。現在のスクリーンへのフルパスがないと人々が迷子になる可能性がある場合は、アプリの階層をフラット化することを検討してください。

テキストのタイトルのボタンに十分なスペースを与えましょう。 ナビゲーションバーに複数のテキストボタンが含まれている場合、それらのボタンのテキストが一緒に実行されているように見え、ボタンが区別できなくなる可能性があります。ボタンの間に固定スペースアイテムを挿入して、区切りを追加しましょう。開発者向けガイダンスについては、UIBarButtonItem (UIBarButtonItem) の UIBarButtonSystemItemFixedSpace (UIBarButtonSystemItemFixedSpace) 定数値を参照してください。

ナビゲーションバー内のセグメント化されたコントロールを使用して、アプリの情報階層をフラット化することを検討してください。 ナビゲーションバー内のセグメント化されたコントロールを使用する場合は、階層の最上位でのみ使用し、下位レベルで正確な戻るボタンのタイトルを選択してください。追加のガイダンスについては、セグメント化されたコントロール を参照してください。

前：システムアイコン 次：検索バー