インターフェースの基本Bars ⑤タブバーについて

iOS human interface guidelineについてまとめていきたいと思います。
インターフェースの基本のbar、タブバー（Tab Bars）について例を交えながらまとめたいと思います。

タブバーは、アプリの画面の下部に表示され、アプリの異なるセクションをすばやく切り替える機能を提供します。

タブバーは半透明で、背景の色合いがあり、すべての画面の向きで同じ高さを維持し、キーボードが表示されている場合は非表示になります。

タブバーには任意の数のタブを含めることができますが、表示されるタブの数はデバイスのサイズや向きによって異なります。

水平方向のスペースが限られているために表示できないタブがある場合は、最後に表示されるタブが「More」タブになり、別の画面に追加のタブが一覧で表示されます。

アプリレベルで情報を整理するためにタブバーを使用しましょう

タブバーは、情報階層をフラットにし、複数のピア情報カテゴリやモードに一度にアクセスできるようにするための良い方法です。

タブバーを厳密にナビゲーションに使用しましょう

タブバーボタンは、アクションを実行するために使用すべきではありません。現在のビューの要素に対してアクションを行うコントロールを提供する必要がある場合は、代わりにツールバーを使用します。

ツールバーは以下です

タブは多すぎないようにしましょう

タブを追加するたびに、タブ選択するためのタップ可能な領域が減少し、アプリの複雑さが増し、情報を見つけるのが難しくなります。

Moreタブで追加のタブを表示することはできますが、これはタップ数が多くなり、スペースの無駄遣いになります。

重要なタブのみを含め、情報階層に必要な最小限のタブを使用してください。

タブ数が少なすぎると、インターフェイスがバラバラに見えてしまうこともあります。

一般的には、iPhoneでは3～5つのタブを使用します。iPadではそれ以上でも構いません。

アプリ内の異なる領域に移動するとき、タブバーを非表示にしないようにしましょう

タブバーはアプリのグローバルナビゲーションを可能にするので、どこにいても表示されたままにしておく必要があります。

ただし、モーダルビューは例外です。モーダルビューでは、ユーザーが終了したときには、モーダル ビューとは別の体験を提供するため、アプリの全体的なナビゲーションの一部ではありません。

タブの機能が利用できないときにタブを削除したり、無効にしたりしないようにしましょう

タブが利用可能な場合とそうでない場合があると、アプリのインターフェイスが不安定になり、予測できなくなります。

すべてのタブが常に有効になっていることを確認し、タブのコンテンツが利用できない理由を説明してください。

例えば、iOSデバイスに曲がない場合、「ミュージック」アプリの「マイミュージック」タブで曲をダウンロードする方法を説明します。

添付のビューで常にコンテキストを切り替えるようにしましょう

インターフェイスを予測可能なものにするために、タブを選択すると、画面上の他のビューではなく、タブバーに直接接続されているビューに影響を与えるようにします。

タブバーのアイコンが視覚的に一貫しており、バランスが取れていることを確認しましょう

一般的な使用例のために、事前に定義されたアイコンを提供しています。

こちら

バッジを使って目立たないようにコミュニケーションをとりましょう

白いテキストと数字または感嘆符を含む赤い楕円形のバッジをタブに表示して、新しい情報がそのビューまたはモードに関連付けられていることを示すことができます。

次はツールバーについてまとめる予定です。

女性限定、初心者限定のデザインコミュニティを運営中です。興味のある方はぜひTwitterからご連絡ください！