web-dev-qa-db-ja.com

Android UX-ボトムナビゲーションを使用する場合とタブを使用する場合

Material Navigation pattern on material.google.com を見ると、Androidが正式に Bottom navigation Android UI

2016年3月より前Android真剣にページ切り替えを上部のタブまたは引き出しに配置しますが、現在のガイドラインではUIデザイナーが必要なものを選択できるようになっています。

enter image description here

UXデザイナーがタブと下部ナビゲーションのどちらを選択するための基準は何ですか?iOSのマテリアルデザインでは理にかなっていますが、写真アプリでもAndroidの下部タブを使用しています

enter image description here

したがって、アプリに3〜4のメインビューが含まれている場合、何を使用すればよいですか?タブまたは下部ナビゲーション?

ありがとう

24
Bank

ナビゲーションをグループ化したままにします。

ナビゲーション要素をまとめて保持し、アプリケーション全体で一貫性を確立します。したがって、上部のタブ以外にナビゲーション要素がある場合は、タブをサブヘッダーにします。タブが唯一のナビゲーション要素である場合は、アプリケーションのコンテキストを考慮して最も意味のあるものを選択し、それらが配置されている場所に関してアプリケーション全体で一貫していることを確認してください。

「アプリケーションのコンテキストで最も意味のあるものを選択する」という点では、リンクしたマテリアルドキュメントの タブとボトムナビゲーションバー セクションをよく見てください。

タブ:

タブを使用すると、同等に重要な少数のビュー間をすばやく移動できます。

これらの階層に適切:

  • 子ビューが埋め込まれた親
  • 兄弟ビューのグループ

推奨:

  • ビュー間の頻繁な切り替え
  • トップレベルのビューが少ないアプリ
  • 代替的な見解の認識を促進する

下部ナビゲーションバー:

下部のナビゲーションバーを使用すると、少数のトップレベルビュー間をすばやく移動できます。

これらの階層に適切:

  • 子ビューが埋め込まれた親
  • 親ビューのグループ

推奨:

  • ビュー間の頻繁な切り替え
  • トップレベルのビューが少ないアプリ
  • 代替的な見解の認識を促進する
  • 下部のナビゲーションはより人間工学に基づいた場所にあるため、モバイルデバイス

したがって、この状況でのコンテキストは、さまざまなタブを選択したときに表示されるコンテンツは何ですか?したがって、表示される異なるページが類似している場合、それらは類似のコンテンツを表示しますが、ビューは異なります。サブヘッダータブは、他のタブとの関連で各タブの重要性が同じであるため機能します。異なるページに非常に異なるコンテンツが含まれている場合(たとえば、設定用のタブとお気に入り用の別のタブ)、2つは親要素であるため、下部のナビゲーションバーを使用します。したがって、コンテキストとは、各タブのコンテンツの相互関係です。

12
Tory

タブを使用する:

宛先が3つ未満の場合は、代わりにタブの使用を検討してください。

ナビゲーションドロワーを使用する:

トップレベルナビゲーションに6つ以上の目的地がある場合は、ナビゲーションドロワーなどの別の場所を介して、下部ナビゲーションでカバーされていない目的地へのアクセスを提供します。

ボトムバーとタブを組み合わせないでください:

下部のナビゲーションとタブを組み合わせるときは注意してください。組み合わせた場合、アプリをナビゲートするときに混乱が生じる可能性があります。

モバイルでのみボトムバーを使用:

下部のナビゲーションは主にモバイルで使用するためのものです。デスクトップで同様の効果を得るには、サイドナビゲーションを使用します。

そう:

0-2:タブを使用

3-5:ボトムバーまたはタブを使用

5+:ナビゲーションドロワーまたはタブを使用する

現在、疑いはモバイルの3〜5にあります。 ここでは正解がないと思います。タブとボトムバーの両方を使用しているGoogleマテリアルアプリがはっきりと(明らかに)見えるため、それは本当かもしれません。

私が気づいた違いは、場合によってはこれが理にかなっているかもしれません:

タブを使用すると、さまざまなビューを簡単に探索して切り替えることができます。

vs.

下部のナビゲーションバーにより、1回のタップでトップレベルのビューを簡単に探索して切り替えることができます。

(エンファシス鉱山)。


参照:

素材デザイン-ボトムバー

素材デザイン-タブ

6
Alvaro

適切なタブではナビゲーションとして水平スワイプも可能になるので、「人間工学に基づいた位置」という議論はその裏で平たくなっています。そのため、下部のタブの適切な使用法はわかりません。また、Androidの既存のナビゲーションボタンと競合します。それは私の本の完全な失敗です...

1
slott