iOSヒューマンインターフェイスガイドライン まとめ (StatusBar, NavigationBar, ToolBar, TabBar)

# <a id="status_bar">Status Bar</a>
<p align="center"><img width="320" alt="StatusBar 2016-01-23 12.56.01.png" align="center" src="https://qiita-image-store.s3.amazonaws.com/0/62451/e4685937-9694-560f-0f6a-4f13b07ceb93.png"></p>

## 外観や動作
- ネットワーク接続、時刻、バッテリー残量などのユーザに必要な情報を示す
- 常に画面上部に表示される

## ガイドライン
<dl>
 <dt>1. アプリケーションがゲーム・メディア閲覧用アプリケーション以外の場合は、ステータスバーの非表示はしっかり検討する</dt>
 <dd>・非表示にする場合は、ユーザはバッテリーを確認する際に、アプリケーションを終了する必要がある</dd>
 <dd>・iPadの場合はステータスバーを非表示にする必要はない</dd><br>
 <dt>2. フルスクリーンのメディアを見せる間は、ステータスバーを非表示にする</dt>
 <dd>非表示にする場合は、一回のタップで再表示出来るようにする</dd><br>
 <dt>3. 独自のステータスバーは作成しない</dt>
 <dd>ユーザはシステム組み込みのステータスバーの外観や動作に慣れている</dd><br>
 <dt>4. 必要な場合は、ネットワークアクティビティインジケータを表示する</dt>
 <dd>ネットワークアクティビティインジケータは時間のかかっているネットワークアクセスをユーザに示す</dd><br>
 <dt>5. iPhoneの場合、ステータスバーの色を指定する</dt>
 <dd>・グレイ、不透明な黒、または半透明な黒を選択可</dd>
 <dd>・ステータスバーの色の変化をアニメーション化するかどうかを設定する</dd>
</dl>

# <a id="navigation_bar">Navigation Bar</a>
<p align="center"><img width="397" alt="NavigationBar 2016-01-23 13.15.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/62451/98610829-69a8-47c3-b304-c5c46cbe9c90.png"></p>

## 外観や動作
- 情報の階層内を移動する際は、ユーザはタイトルの左にある戻るボタンをタップして前の画面に戻る
- ナビゲーションバー内のコントロールはすべて周囲に囲み枠があり、iOSの場合は囲み枠にボーダー
が付いている

### iPhone
*****
- デバイスの向きを横(縦)向きに変更すると、ナビゲーションバーの高さが自動的に変更される
- 常に画面の幅一杯に表示される

### iPad
*****
- デバイスの向きを更しても、ナビゲーションバーの高さ・透過性は変わらない
- 分割ビューの1つのペインのように画面全体に広がらない、1つのビュー内に表示できる

## ガイドライン

<dl>
 <dt>1. タイトルには現在のビューのタイトルを使用</dt>
 <dd>・移動した時は、タイトルが更新される必要がある</dd>
 <dd>・戻るボタンをタイトルの左に表示し、戻るボタンには前のレベルのタイトルを示すラベルを付ける</dd><br>
 <dt>2. ナビゲーションバー内のテキストを読みやすくする。</dt><br>
 <dt>3. アプリケーションのトップレベルのナビゲーションバーにセグメント化コントロールを入れることを検討する</dt>
 <dd>セグメント化コントロールによて情報階層をフラットに出来、ユーザは探しているものを見つけやすくなる</dd><br>
 <dt>4. ナビゲーションバーにコントロールを追加し過ぎない</dt>
 <dd>ビューの現在のタイトル、戻るボタン、およびビューのコンテン
ツを管理するコントロール以外の要素は含めない</dd><br>
 <dt>5. システムに用意されているボタンを使用する</dt><br>
 <dt>6. アプリケーション全体と調和するよう、ナビゲーションバーの外観をカスタマイズする</dt>
 <dd>・独自の背景画像、色合い、透過性を指定可能</dd>
 <dd>・半透明のナビゲーションバーを使用する場合は、不透明の<a href="#tool_bar">ツールバー</a>と組み合わせないようにするなど、外観やスタイルの一貫性を保つ</dd><br>
 <dt>7. マルチセグメントの「戻る」ボタンを作成しない</dd>
</dl>

# <a id="tool_bar">Tool Bar</a>
<p align="center"><img width="437" alt="ToolBar 2016-01-23 13.22.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/62451/87266590-cb45-17c8-db0c-58a2b6eba9fa.png"></p>

## 外観や動作

### iPhone
*****
- 常に画面ビューの最下部に表示
- 画面の向きを変更すると高さは自動的に変更される

### iPad
*****
- 常に画面ビューの最上部に表示
- 画面の向きを変更しても高さと透過性は変更されない


## ガイドライン

<dl>
 <dt>1. 現在のコンテキストに合ったコマンドをユーザが選択できるようにする</dt>
 <dd>セグメント化コントロールをツールバーに追加することが可能</dd><br>
 <dt>2. アプリケーション全体に調和するよう、ツールバーの外観をカスタマイズする</dt>
 <dd>・独自の背景画像や色合い、透明度を指定可能</dd>
 <dd>・例えば、半透明のツールバーを使用する場合は、不透明の<a href="#navigation_bar">ナビゲーションバー</a>と組み合わせないようにする</dd><br>
 <dt>3. 各ツールバー項目に、タップするターゲット領域を少なくとも44×44ポイントに保つ</dt><br>
 <dt>4. システムに用意されているツールバー項目を使用する。</dt>
 <dd>ただし適切な場合は、ツールバー項目の外観をカスタマイズする</dd><br>
 <dt>5. ツールバー項目のスタイルを統一させる</dt>
</dl>


# <a id="tab_bar">Tab Bar</a>
<p align="center"><img width="667" alt="TabBar 2016-01-23 13.23.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/62451/30596cbc-dcee-e46e-de89-00edbcb100d3.png"></p>

## 外観や動作
- 画面下の端に表示され、アプリケーションのあらゆる場所からアクセスできる
- 全てのタブ幅は等しい
- ユーザがタブを選択すると背景は明るくなり、アイコンは青く発行する
- iPhoneでは一度に最大5つタブを表示可能(iPadでは6つ以上)

## ガイドライン
<dl>
 <dt>1. 現在のモード・画面内の要素を操作する目的で使用しない</dt>
 <dd>ユーザのためのコントロールを提供する場合は<a href="#tool_bar">ツールバー</a>を使用する</dd><br>
 <dt>2. 一般的にアプリケーションレベルの情報の整理のために使用する</dt><br>
 <dt>3. 一般的にアプリケーションレベルの情報の整理のために使用する</dt><br>
 <dt>4. 機能が使えない場合でもタブを削除しない</dt>
 <dd>UIを安定させるために、タブに対応する機能が使えない場合は、タブを削除するのではなく、無効の状態で表示する</dd><br>
 <dt>5. タブバーにバッジを使用して控えめに情報を伝える</dt><br>
 <dt>6. システムに用意されているタブバーアイコンを表示する</dt><br>
 <dt>7. 必要に応じてタブバーの外観をカスタマイズする</dt>
 <dd>・タブバー、アイコン、背景画像を変更する</dd>
 <dd>・タップした場合の発光効果をカスタマイズする</dd><br>
 <dt>8. 必要に応じて独自のインジケータ画像を与える</dt>
</dl>


### iPad
*****
<dl>
 <dt>1. ビュー内でタブがコンテンツを切り替えたり、フィルタリングしたりする場合、分割ビュー
のペインやポップオーバーでタブバーを使用可能</dt>
 <dd>外観の調和性を考慮すると、多くの場合はセグメント化コントロールの使用が適切である</dd><br>
 <dt>2. タブバーにタブを詰め込み過ぎない</dt><br>
 <dt>3. その他(More)タブを作成しない</dt><br>
 <dt>4. アプリケーションの視覚的安定さを高める為、どの向きでも同じタブを表示する</dt>
 <dd>・縦向きの場合、推奨される7つのタブがちょうど画面幅になる</dd>
 <dd>・横向きの場合、画面幅に対して中央に配置する</dd>
</dl>

## 【iOSヒューマンインターフェイスガイドライン】
***まとめ一覧***

- [Alert, ActionSheet, ModalView](http://qiita.com/shoheiyokoyama/items/3dfaef43e55a4ea0871b)

## 参考文献
[iOSヒューマンインターフェイスガイドライン](https://developer.apple.com/jp/documentation/MobileHIG.pdf "iOSヒューマンインターフェイスガイドライン")