Tab Bars

https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/

Tab Bars

タブバー

A tab bar appears at the bottom of an app screen and provides the ability to quickly switch between different sections of an app. Tab bars are translucent, may have a background tint, maintain the same height in all screen orientations, and are hidden when a keyboard is displayed. A tab bar may contain any number of tabs, but the number of visible tabs varies based on the device size and orientation. If some tabs can’t be displayed due to limited horizontal space, the final visible tab becomes a More tab, which reveals the additional tabs in a list on a separate screen.

アプリ画面の下部にタブバーが表示され、アプリのさまざまなセクションをすばやく切り替えることができます。 タブバーは半透明で、背景色があり、すべての画面のオリエンテーション問わず同じ高さを維持し、キーボードが表示されたときに非表示になります。 タブバーには任意の数のタブを含めることができますが、表示されるタブの数はデバイスのサイズと向きによって異なります。 限られた水平スペースのために一部のタブを表示できない場合、最後に表示されるタブは[その他]タブになり、別の画面上のリストに追加タブが表示されます。

 

In general, use a tab bar to organize information at the app level. A tab bar is a good way to flatten your information hierarchy and provide access to several peer information categories or modes at once.
一般的には、タブバーを使用してアプリレベルで情報を整理します。 タブバーは、情報階層を平坦化し、複数の同列情報カテゴリまたはモードへのアクセスを一度に提供するのに適しています。

Use a tab bar strictly for navigation. Tab bar buttons should not be used to perform actions. If you need to provide controls that act on elements in the current view, use a toolbar instead. See Toolbars.

厳密にナビゲーションにはタブバーを使用してください。 アクションを実行するためにタブバーのボタンを使用しないでください。 現在のビューの要素に作用するコントロールを提供する必要がある場合は、代わりにツールバーを使用します。 ツールバーを参照してください。

Avoid having too many tabs. Each additional tab reduces the tappable area for selecting a tab and increases the complexity of your app, making it harder to locate information. Although a More tab can display extra tabs, this requires additional taps and is a poor use of space. Include essential tabs only, and use the minimum tabs necessary for your information hierarchy. Too few tabs can be a problem too, as it can make your interface appear disconnected. In general, use between three and five tabs on iPhone. A few more are acceptable on iPad.

あまりに多くのタブを避ける。 タブを追加するたびに、タブを選択するためのタップ可能な領域が減り、アプリの複雑さが増し、情報を見つけるのが難しくなります。 [その他]タブには余分なタブが表示されることがありますが、これには追加のタップが必要となり、スペースを使いにくくなります。 必須のタブのみを含め、情報階層に必要な最小限のタブを使用します。 タブが少なすぎる場合も問題有りで、インターフェイスが切断されているように見えることがあります。 一般的に、iPhoneでは3〜5つのタブを使用します。 iPad上ではさらにいくつかは受け入れられます。

Don’t remove or disable a tab when its function is unavailable. If tabs are available in some cases but not in others, your app’s interface becomes unstable and unpredictable. Ensure that all tabs are always enabled, and explain why a tab’s content is unavailable. For example, if there are no songs on an iOS device, the My Music tab in the Music app explains how to download songs.

タブが機能を使用できないときに削除または無効にしないでください。 いくつかのケースではタブを利用できますが、他のタブでは利用できない場合、アプリのインターフェースは不安定になり、予測できなくなります。 すべてのタブが常に有効になっていることを確認し、タブのコンテンツが利用できない理由を説明します。 たとえば、iOSデバイスに曲がない場合、音楽アプリの[マイミュージック]タブに曲のダウンロード方法が記載されています。

Always switch contexts in the attached view. To keep your interface predictable, selecting a tab should always affect the view that’s directly attached to the tab bar, not another view elsewhere on screen. For example, selecting a tab on the left side of a split view shouldn’t cause the right side of the split view to suddenly change. Selecting a tab in a popover shouldn’t cause the view behind the popup to change.

アタッチされたビューでは常にコンテキストを切り替えます。 インターフェースを予測可能に保つために、タブを選択すると、タブバーに直接接続されているビューにのみ影響し、画面上の別のビューには影響しません。 たとえば、分割ビューの左側のタブを選択しても、分割ビューの右側が突然変更されてはなりません。 ポップオーバー内のタブを選択しても、ポップアップの背後にあるビューが変更されるべきではありません。

Make sure tab bar icons are visually consistent and balanced. The system offers a range of predefined icons for common use cases. See System Icons > Tab Bar Icons. You can also create your own icons. See Custom Icons.

タブバーのアイコンが視覚的に一貫性とバランスが取れていることを確認してください。 このシステムでは、一般的な使用事例にあらかじめ定義された一連のアイコンが用意されています。 「システムアイコン」>「タブバーアイコン」を参照してください。 独自のアイコンを作成することもできます。 カスタムアイコンを参照してください。

Use badging to communicate unobtrusively. You can display a badge—a red oval containing white text and either a number or an exclamation point—on a tab to indicate that new information is associated with that view or mode.

目立たないコミュニケーションにバッジを使用してください。 新しい情報がそのビューまたはモードに関連付けられていることを示すために、バッジ（白いテキストと数字または感嘆符を含む赤い楕円）をタブに表示できます。

For developer guidance, see UITabBar.

TIPIt’s important to understand the difference between a tab bar and a toolbar, because both types of bars appear at the bottom of an app screen. A tab bar lets the user switch quickly between different sections of an app, such as the Alarm, Stopwatch, and Timer tabs in the Clock app. A toolbar contains buttons for performing actions related to the current context, like creating an item, deleting an item, adding an annotation, or taking a photo. See Toolbars. Tab bars and toolbars never appear together in the same view.
両方の種類のバーがアプリ画面の下部に表示されるので、タブバーとツールバーの違いを理解することが重要です。 タブバーを使用すると、時計アプリのアラーム、ストップウォッチ、タイマータブなど、アプリのさまざまなセクションをすばやく切り替えることができます。 ツールバーには、アイテムの作成、アイテムの削除、注釈の追加、写真の撮影など、現在のコンテキストに関連するアクションを実行するためのボタンがあります。 ツールバーを参照してください。 タブバーとツールバーは、同じビューに同時に表示されません。