Status Bar
外観や動作
- ネットワーク接続、時刻、バッテリー残量などのユーザに必要な情報を示す
- 常に画面上部に表示される
ガイドライン
- 1. アプリケーションがゲーム・メディア閲覧用アプリケーション以外の場合は、ステータスバーの非表示はしっかり検討する
- ・非表示にする場合は、ユーザはバッテリーを確認する際に、アプリケーションを終了する必要がある
- ・iPadの場合はステータスバーを非表示にする必要はない
- 2. フルスクリーンのメディアを見せる間は、ステータスバーを非表示にする
- 非表示にする場合は、一回のタップで再表示出来るようにする
- 3. 独自のステータスバーは作成しない
- ユーザはシステム組み込みのステータスバーの外観や動作に慣れている
- 4. 必要な場合は、ネットワークアクティビティインジケータを表示する
- ネットワークアクティビティインジケータは時間のかかっているネットワークアクセスをユーザに示す
- 5. iPhoneの場合、ステータスバーの色を指定する
- ・グレイ、不透明な黒、または半透明な黒を選択可
- ・ステータスバーの色の変化をアニメーション化するかどうかを設定する
Navigation Bar
外観や動作
- 情報の階層内を移動する際は、ユーザはタイトルの左にある戻るボタンをタップして前の画面に戻る
- ナビゲーションバー内のコントロールはすべて周囲に囲み枠があり、iOSの場合は囲み枠にボーダー が付いている
iPhone
- デバイスの向きを横(縦)向きに変更すると、ナビゲーションバーの高さが自動的に変更される
- 常に画面の幅一杯に表示される
iPad
- デバイスの向きを更しても、ナビゲーションバーの高さ・透過性は変わらない
- 分割ビューの1つのペインのように画面全体に広がらない、1つのビュー内に表示できる
ガイドライン
- 1. タイトルには現在のビューのタイトルを使用
- ・移動した時は、タイトルが更新される必要がある
- ・戻るボタンをタイトルの左に表示し、戻るボタンには前のレベルのタイトルを示すラベルを付ける
- 2. ナビゲーションバー内のテキストを読みやすくする。
- 3. アプリケーションのトップレベルのナビゲーションバーにセグメント化コントロールを入れることを検討する
- セグメント化コントロールによて情報階層をフラットに出来、ユーザは探しているものを見つけやすくなる
- 4. ナビゲーションバーにコントロールを追加し過ぎない
- ビューの現在のタイトル、戻るボタン、およびビューのコンテン ツを管理するコントロール以外の要素は含めない
- 5. システムに用意されているボタンを使用する
- 6. アプリケーション全体と調和するよう、ナビゲーションバーの外観をカスタマイズする
- ・独自の背景画像、色合い、透過性を指定可能
- ・半透明のナビゲーションバーを使用する場合は、不透明のツールバーと組み合わせないようにするなど、外観やスタイルの一貫性を保つ
- 7. マルチセグメントの「戻る」ボタンを作成しない
Tool Bar
外観や動作
iPhone
- 常に画面ビューの最下部に表示
- 画面の向きを変更すると高さは自動的に変更される
iPad
- 常に画面ビューの最上部に表示
- 画面の向きを変更しても高さと透過性は変更されない
ガイドライン
- 1. 現在のコンテキストに合ったコマンドをユーザが選択できるようにする
- セグメント化コントロールをツールバーに追加することが可能
- 2. アプリケーション全体に調和するよう、ツールバーの外観をカスタマイズする
- ・独自の背景画像や色合い、透明度を指定可能
- ・例えば、半透明のツールバーを使用する場合は、不透明のナビゲーションバーと組み合わせないようにする
- 3. 各ツールバー項目に、タップするターゲット領域を少なくとも44×44ポイントに保つ
- 4. システムに用意されているツールバー項目を使用する。
- ただし適切な場合は、ツールバー項目の外観をカスタマイズする
- 5. ツールバー項目のスタイルを統一させる
Tab Bar
外観や動作
- 画面下の端に表示され、アプリケーションのあらゆる場所からアクセスできる
- 全てのタブ幅は等しい
- ユーザがタブを選択すると背景は明るくなり、アイコンは青く発行する
- iPhoneでは一度に最大5つタブを表示可能(iPadでは6つ以上)
ガイドライン
- 1. 現在のモード・画面内の要素を操作する目的で使用しない
- ユーザのためのコントロールを提供する場合はツールバーを使用する
- 2. 一般的にアプリケーションレベルの情報の整理のために使用する
- 3. 一般的にアプリケーションレベルの情報の整理のために使用する
- 4. 機能が使えない場合でもタブを削除しない
- UIを安定させるために、タブに対応する機能が使えない場合は、タブを削除するのではなく、無効の状態で表示する
- 5. タブバーにバッジを使用して控えめに情報を伝える
- 6. システムに用意されているタブバーアイコンを表示する
- 7. 必要に応じてタブバーの外観をカスタマイズする
- ・タブバー、アイコン、背景画像を変更する
- ・タップした場合の発光効果をカスタマイズする
- 8. 必要に応じて独自のインジケータ画像を与える
iPad
- 1. ビュー内でタブがコンテンツを切り替えたり、フィルタリングしたりする場合、分割ビュー のペインやポップオーバーでタブバーを使用可能
- 外観の調和性を考慮すると、多くの場合はセグメント化コントロールの使用が適切である
- 2. タブバーにタブを詰め込み過ぎない
- 3. その他(More)タブを作成しない
- 4. アプリケーションの視覚的安定さを高める為、どの向きでも同じタブを表示する
- ・縦向きの場合、推奨される7つのタブがちょうど画面幅になる
- ・横向きの場合、画面幅に対して中央に配置する
【iOSヒューマンインターフェイスガイドライン】
まとめ一覧