0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

AppleのHuman Interface Guidelinesを読む 〜Tab Bar編〜

Posted at

やること

下記のガイドラインのTabBarの部分を和訳&要約して理解する。
Human Interface Guidelines - Design - Apple Developer

要約

  • Tab Barはナビゲーションのために使う。→ 作成・削除などの操作ボタンを表示したい場合はTool Barを使う
  • Tab Barの項目数は適切な数にする。 → iPhoneでは大体3〜5個
  • Tab Barを非表示にしない。 → モーダルビューは例外的にOK。
  • Tab Barの項目を消したり、無効化(タップできないように)しない。 → 利用できないTabでは、利用できない理由や利用するための方法を説明する

Tab Bars

  • アプリ画面の下部に表示されるTab Barによって、アプリの様々なセクションをすばやく切り替えることができる。
  • Tab Barは半透明で、背景の色合いを残しつつ、すべての画面で同じ高さを維持する。
  • キーボードが表示されると非表示になる。
  • 水平方向のスペースが限られていて一部のタブを表示できない場合は、最後のタブは「その他」タブになる。

Tip

  • Tab BarとTool Barの違いを理解することは重要。
  • どちらのBarも画面の下部に表示されるが、以下のような違いがある。
  • Tab Barは、例えば時計アプリの「アラーム」、「ストップウォッチ」、「タイマー」など、様々なセクションを切り替えるためのものである。
  • Tool Barは、「アイテムの作成」、「削除」、「コメントの追加」、「写真の撮影」など、現在のコンテキストに関連するアクションを実行するためのボタンを配置するためのものである。
  • Tab BarとTool Barが同じ画面に同時に表示されることはない。

Tab Barを使用してアプリレベルで情報を整理する

  • Tab Barは情報階層をフラット化し、複数の同等な情報カテゴリ・モードへのアクセスを提供する優れた方法である。

Tab Barはナビゲーションのために使用する

  • アクションを実行するためにTab Barを使用してはならない
  • 現在のViewの要素に作用するコントロールを提供する必要がある場合は、代わりにTool Barを使用する。

適切な数のTab数にする

  • Tabの数が多すぎると、各Tabのタップ可能な領域が現象し、アプリの複雑さが増し、情報を探すことが難しくなる。
  • Tabの数が少なすぎると、インターフェースがつながっていないように見えてしまう。
  • 「More」Tabは追加のタブを表示できるが、追加のタップが必要となるためスペースの無駄遣いとなる可能性がある。
  • Tabは必須なTabだけにして、必要最小限の数にするべし。
  • **一般的には、iPhoneでは3〜5のTabが望ましい。**iPadではもう少し多くてもOK。

ユーザーがアプリの様々な領域を移動する際にTab Barを非表示にしない

  • Tab Barはアプリのグローバルなナビゲーションを可能にするため、どこにいても表示されたままにしておく必要がある。
  • ただし、モーダルビューは例外である。
  • モーダルビューは別の体験を提供するため、アプリのグローバルなナビゲーションの一部ではない。

Tabを削除したり、無効にしたりしない

  • Tabが使える場合とそうでない場合があると、インターフェースが不安定になり、予測できなくなる。
  • すべてのTabが有効になっているかを確認し、Tabのコンテンツが利用できない理由を説明する。
  • 例えば、「ミュージック」アプリでiOSデバイスに曲がない場合、「今すぐ聴く」Tabで曲をダウンロードする方法を説明する。

Tab Barに直接つながっているViewにみ影響を与えるようにする

ここはちょっと何言っているかわからなかった。

  • 分割Viewの左側でTabを選択した場合、右側が突然変更されることはありえない。

バッジを使って目立たないように通知する

  • 白いテキストと数字または「!」を含む赤い楕円形のバッジをTabに表示して、新しい情報がそのViewまたはモードに関連づけられていることを示すことができる。

Tab Barのグリフ(アイコン?)が一貫していてバランスが取れていることを確認する

  • iOS13以降では、SFシンボルを使用してTab Barの項目を表現できる。

SF Symbols - Human Interface Guidelines - Apple Developer

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?