Material Design コンポーネントまとめてみた Navigation bar編

Navigation barを使用すると、デバイス上の UI ビューを切り替えることができます

iOS

---

Menus探してみた！

使用方法

□ 公式に書かれていること

⚡ 同じ重要度の遷移先を 3 ～ 5 つ含めることができます
⚡目的地は変わりません。これらはアプリ画面間で一貫している必要があります。
⚡以前はボトム ナビゲーションという名前でした

□ よくある使い方と特徴

• ナビゲーション バーは、アクセスしやすいように画面の下部に配置されています。各宛先はアイコンとオプションのテキスト ラベルで表されます。

• ナビゲーション バーのアイコンがタップまたはフォーカスされると、ユーザーはそのアイコンに関連付けられたナビゲーションの目的地に移動します

□ 利点：ユーザーが必要なページすばやく、容易にアクセスできる

• Navigation barはアプリやウェブサイトの主要なセクション間での移動を効率的かつ直感的に行うためのクイックアクセスポイントをユーザーに提供します。

使い方NG例

5 つ以上の項目を使用しないでください。要素が互いに近くに配置されている場合、翻訳されたテキストの長さと要素の衝突によって問題が発生する可能性があります。宛先が 5 つを超える場合は、タブまたはナビゲーション ドロワーの使用を検討してください。

ラベルのないアイコンの使用を避ける。ただTwitterとかインスタはラベルがないこれはユーザーがそのアイコンの意味や機能に慣れ親しんでいるため、ラベルなしのアイコンの使用が許容されるってことかな？？

目的地が 3 つ未満の場合はナビゲーション バーを使用しないでください。代わりにタブを使用してください。

アクティブ インジケーターを一度に複数の目的地に対して使用しないでください

ラベルがわかりにくくなる可能性があるため、テキストを折り返したり切り詰めたりしないでください。

長いテキストを 1 行に収まるように縮小しないでください

✨スタイル

1. Container

2. Icon

3. Label text

4. Active indicator

5. Small badge

6. Large badge

7. Large badge label

以上！次回はNavigation drowerについてまとめていきます！

参考
引用元 Google - Material Design
URL：https://material.io/