見出し画像

【マテリアルデザイン】アクションをどこに配置するか〜App bar/Tab/Navigation〜

ocha



アプリ内でボタンを置くならどの場所？

「ユーザーにアクションさせよう！」「オブジェクトを表示しよう！」と思った場合、それらはどこに配置すれば良いのか？の基本から確認してみます。
「Components overview」を見る限り、このあたりが該当しそうです。

Navigation Components

今回はオブジェクト指向UIデザインのフローに沿って「ルートナビゲーション」の検討をしたいと考えているため、これらのうち下記の項目におけるマテリアルデザインを確認してみます。
（これらはマテリアルデザイン上、「Navigation Components」というカテゴリでまとめているようです。）

  • App bar

    1. Top

    2. bottom

  • Navigation bar

  • Tab

また、Navigation Componentsには該当しませんが、以下も参考になりそうだったので合わせて確認しています。

  • Floating action buttons
    （マテリアルデザイン上では「Action components」に含まれるものです。）

それぞれの機能を見てみる（App bar, Navigation bar, Tab）

App bar

top

  • ナビゲーション、画面の見出し、アクションなど、現在の画面に関連するコンテンツやアクションを提供することを目的として、Top app barを使用する。

  • アクションに関するボタンは最大3つまで設置可能。もし、3つ以上のボタンを設置したい場合は「︙」から選択する導線にする。

  • Top App barに含まれる主なアイコンは「ハンバーガーメニュー」「前の画面に戻る」の2つのボタン。また、これらは左上に設置する。
    ※右上にハンバーガーメニューが設置されているサービスも多数見かけますが、オブジェクト指向UIにおいても基本原則は「左から右」「上から下」となっているため、Googleのマテリアルデザインも基本原則を「左から右」にスライドさせるために、左上に設置するとしているのだと推測しています。

  • 見た目について

    • シャドウはつけない。かわりに、App barの色を塗りつぶすことによって、App barとコンテンツと分ける

    • Top App barは常に画面の端から端まで伸びるものである。（従って、途中で見切れたり、角丸設定をするのはNG）

    • 見た目の種類は4つある（中央揃え／小／中／大サイズ）

bottom

  • Bottom app barは、重要なアクションに注目させることを目的として使用する。

  • 最大4つのアクションボタンとFloating action button（FAB）の合計5つまで含むことが出来る。

    • 設置場所は左側。4つのカウントの中には、「︙」のアイコンも含む。

    • 反対に、アクションボタンが1つのみ、または全く無い場合には、App bottom barを使用してはならない。

    • 削除ボタンなどをBottom app barに設置する場合は、Undo（取り消し）をSnack barとして表示する必要がある

Snack bar

  • Navigation barは他のページへのアクセスをするために使用するのに対して、Bottom app barは、他ページへのアクセスの他、アクションボタンも含むことが出来る。

  • ただ、すべてのサービスでBottom app barを使うべきとは限らない。たくさんのアイコンや別ページへのアクセスがある場合は、無理にアクションボタンをBottom app barに入れようとするのではなく、レイアウトの再検討や、他のコンポーネントの使用を検討する方が良い。

Floating tab button（Bottom app barに使用する場合）

  • Floating tab buttonは現在、Bottom app barに内包されている。Bottom app barの外にFABを設置するのはNG。

  • Bottom app barに内包させる場合は、シャドウもエレベーションもつけない。（App bar自体がすでに他のコンポーネントと分離しているため）

Top App barとBottom app barを一緒に使用する場合の注意事項

  • Top App BarとBottom app barを同時に使用する場合、Top App Barはナビゲーション、及び追加のアクションを提示するために使用する。TopとBottom は明確に区別する。

  • Bottom app barは、ナビゲーションや検索などのアクションへの一貫したアクションを配置する。

  • Top App Barはコンテキストに応じた、その画面固有のアクションを配置する。ナビゲーションなどもTop App Barに配置する。

Navigation bar

  • アクセス先を提示したものがNavigation bar。3〜5のアクセス先を配置することが可能。アプリ一貫して同じアクセス先を提示する必要がある。

    • 設置するアクセス先は、アプリのどのページからも遷移するような優先順位の高いもの。

    • 一方で、シングルタスク（Eメールの閲覧のみ等）や、設定ボタンなどは設置してはならない。

  • これら3〜5のアクセス先は、アイコンと補助テキストで示す。補助テキストを省略することは非推奨。

    • アイコンをタップするとそのアイコンに関連するページへ遷移する。

Tabs

  • Tabは2種類存在する。

    1. Primary

      • Top App Barの下、そしてコンテンツの上部に配置され、主要なコンテンツが表示される。

    2. Secondary

      • コンテンツエリア内で、関連するコンテンツをさらに分離し、階層を確立するために使用する。

  • Tabは、同じ階層にある関連するコンテンツで構成される。また、下記5つのパーツから成り立っている。

    1. Container

    2. Icon　※任意

    3. ラベル

    4. Active Indicator

    5. Divider

所感、気づきなど

  • App barについて、まず先にbottomに配置するもの（アプリ全体のアクション）を先に検討・配置→Top App Barに配置する内容を検討、が良いかも。

  • Bottom app barとNavigation bar、パッと見だけだとかなり似ているなと思いましたが、役割は全く別物であることをきちんと理解したいな、と思いました。

    • Bottom app barは遷移先もアクションボタンも配置出来る。一方で、Navigation barは遷移先のみを配置する。

参考にしたもの

この記事が気に入ったらサポートをしてみませんか？