インターフェースの基本Bars ①ナビケージョンバーについて

今回もiOS human interface guidelineについてまとめていきたいと思います。
インターフェースの基本のbarの一、ナビケージョンバーについて例を交えながらまとめたいと思います。

Navigation Bars

ナビゲーションバーとはアプリ画面の上部、ステータスバーの下に表示され、一連の階層画面を操作するもののことを言います。

新しい画面が表示されると、多くの場合、前の画面のタイトルが付いた戻るボタンがバーの左側に表示されます。

ナビゲーションバーの右側にアクティブビュー内のコンテンツを管理するための編集ボタンや完了ボタンのようなコントロールが含まれている場合があります。

スプリットビューでは、ビューの1ペインにナビゲーションバーが表示されることがあります。

ナビゲーションバーは半透明で背景の色合いがある場合があります。キーボードが画面上にあるとき、ジェスチャーが発生したとき、またはビューのサイズが変更されたときに非表示にすることができます。

フルスクリーンでコンテンツを表示する場合は、ナビゲーションバーを一時的に非表示にすることを検討しましょう

ユーザーがコンテンツに集中したいとき、ナビゲーションバが邪魔になることがあります。
より没入感のある体験を提供するためにバーを一時的に非表示にしましょう。iOSの写真アプリは、全画面写真を表示するときナビゲーションバーとその他のインターフェイス要素を非表示にしています。

このタイプの動作を実装する場合、タップなどの簡単なジェスチャーでナビゲーションバーを再表示できるようにしましょう。

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

ナビゲーションバーには現在のビューのタイトルを表示することを検討しましょう
ほとんどの場合、タイトルは人々が何を見ているのか理解するのに役立ちます。

もしナビゲーションバーにタイトルを付けることが冗長に思える場合は、タイトルを空にすることができます。例えば、メモアプリはコンテンツの最初の行が必要なすべてのコンテキストを提供するため、タイトルを付けていません。

さらに強調したい場合は、ラージタイトルを使用しましょう

ラージタイトルがコンテンツと競合するべきではありませんが、一部のアプリでは、大きく太字のラージタイトルが閲覧や検索の際に人々を方向付けるのに役立つことがあります。

たとえば、タブ付きレイアウトはラージタイトルがアクティブなタブを明確にし、ユーザーが一番上にスクロールしたことを示すのに役立ちます。

電話アプリはこのアプローチを利用する一方で、ミュージックアプリはアルバム、アーティスト、プレイリスト、ラジオなどのコンテンツを区別するためにラージタイトルを使用しています。

iOS13以降では、ラージタイトルナビゲーションバーにはデフォルトで背景や影は使われていません。

また、ユーザーがコンテンツのスクロールを開始すると、ラージタイトルが標準タイトルに変化します。

ラージタイトルのナビゲーションバーの境界線を非表示にすることを検討しましょう


iOS13以降では、バーのシャドウを削除してナビゲーションバーの下部の境界線を非表示にすることができます。（ユーザーがコンテンツエリアをスクロールすると、境界線は自動的に再表示されます）

境界線のないタイトルはラージタイトルのナビゲーションバーでうまく機能します。なぜならばコンテンツとタイトルの関係性を高めるからです。

しかし反対に、標準タイトルのナビゲーションバーでは、バーのタイトルとボタンを区別するのが難しいため、境界線のないスタイルはうまく機能しない可能性があります。

ナビゲーションバーコントロール（Navigation Bar Controls）

コントロールを多用する複雑なナビゲーションバーは避けましょう


一般的に、ナビゲーションバーにはビューの現在のタイトル、戻るボタン、ビューのコンテンツを管理する1つのコントロールのみ表示するべきです。

ナビゲーションバーでセグメンテッドコントロールを使用する場合、バーにはタイトルまたはセグメンテッドコントロール以外は表示しないでください。

標準の戻るボタンを使用しましょう

標準の戻るボタンをタップすると前に戻ることを人々は知っています。

もしあなたがカスタムの戻るボタンを実装する場合は、標準の戻るボタンのような見た目、直感的な動作、他のインターフェイスとのマッチ、アプリ全体で一貫性が保たれるよう注意してください。

システムが提供する戻るボタンをカスタムイメージに置き換える場合、カスタムマスクイメージも準備してください。iOSはこのマスクを使用して、移行中にアニメーション化するためです。

複数のパンくずリストを含めないようにしましょう

戻るボタンは常に一つのアクションを実行します。それは一つまでの画面に戻ることです。

もし現在の画面への案内がないとユーザーが迷子になる可能性があると思う場合はアプリの階層をフラットにすることを検討してください。

テキストタイトルのボタンに十分なスペースを持たせましょう

ナビゲーションバーに複数のテキストボタンを表示する場合、それらのボタンのテキストが一緒に実行されているように見える可能性があり、ボタンを区別できない可能性があります。

ボタンの間に余白を設定し、間隔をあけましょう。

ナビゲーションバーでセグメンテッドコントロールを使用し、アプリの情報階層をフラットすることを検討しましょう

ナビゲーションバーでセグメンテッドコントロールを使用する場合は、階層の最上位でのみ使用し下位レベルでは正確な戻るボタンのタイトルを選択してください。

次回はSearch Barsについてまとめます。

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

https://note.com/ours_design/n/nfc1d5f4c748f