ボトムナビゲーションバーを追加することによってトップ層のページの行き来がしやすくなりました。ボトムナビゲーションバーは、主にモバイル対応なので、スクリーンの大きいタブレットやデスクトップなどでは、サイドナビゲーションなどで対応します。
使用条件
- 3~5つのメインとなるページが存在する時
- どこのページにいても直接アクセスが必要となる時
もしトップ層のページが６つ以上ある場合はボトムナビゲーションに全てをいれるのではなく、ナビゲーションドロワーなどにいれます。
ボトムナビゲーション&タブ
ページ内にボトムナビゲーションバーとタブが混在する場合は、組み合わせによって異なるページに遷移してしまいユーザーを迷わせてしまうので要注意です。
スタイル
アイコン&テキスト
ボトムナビゲーションバーでは、アイコンを使ってそのページを表示するので、それぞれのページに適したアイコンを使用する必要があります。しかし、アイコンだけでは限界があるので、選択されているアクションにはテキストも表示します。３アクションしかない場合は常にアイコンとテキストを表示させ、４つ以上の場合は選択されているアクションだけにテキストを表示します。
色
アイコンひとつひとつに色はつけず、見ているページのアイコンだけにプライマリーカラーを使用することでユーザーを上手く誘導できます。もし、ボトムナビゲーションバーに色がついている場合は、白か黒をアイコンに使用します。
テキストラベル
テキストは短くてわかりやすい単語を選び、改行や縮小などは避けます。
動き
アイコンをタップした時は、関連したページに直接遷移されます。現在そのページにいる時は、そのページがリフレッシュされページのトップに移動します。また違うページから戻ってくる場合は、過去の履歴は削除されそのページのトップに戻ります。ナビゲーションバーの動き方は、スクロールダウンすると隠れて、スクロールアップするとバーが規定の位置に戻ってきます。画面の切り替わり方ですが、コンテンツ部分をスワイプしてのトップ階層移動は不可で、アイコンがタップされた時だけ移動します。アニメーションは、スライド移動のアニメーションではなく、クロスフェードアニメーションを使用します。
違うページへの遷移の動画はこちらから
ボトムナビゲーションバーの動画はこちらから
クロスフェードアクションの動画はこちらから
仕様
固定のボトムナビゲーションバー（アクションが３つの時）
ボタンの横幅サイズは、デバイスの横幅サイズ÷アクションボタンの数で、横幅は最大値をとります。
◼︎高さ
56dp
◼︎アイコンサイズ
24x24dp
◼︎コンテンツのアラインメント
テキストとアイコンはセンター揃え
◼︎パディング
アクティブ時のアイコン上：6dp
インアクティブ時のアイコン上：8dp
テキスト下：10dp
テキストサイド：12dp
◼︎テキストサイズ
アクティブ時：Roboto Regular 14sp
インアクティブ時：Roboto Regular 12sp
シフティングボトムナビゲーションバー（アクションが４−５つの時）
◼︎テキストサイズ
アクティブ時：Roboto Regular 14sp
インアクティブ時：Roboto Regular 12sp
◼︎アクティブ時の横幅サイズ
最大値：168dp
最小値：96dp
◼︎インアクティブ時の横幅サイズ
最大値：96dp
最小値：64dp
◼︎高さ
56dp
◼︎アイコンサイズ
24x24dp
◼︎コンテンツのアラインメント
テキストとアイコンはセンター揃え
◼︎パディング
アクティブ時のアイコン上：6dp
インアクティブ時のアイコン上下：16dp
テキスト下：10dp
◼︎テキストサイズ
アクティブ時：Roboto Regular 14sp
階層高度
スナックバーの高度(6dp)は低い為、ボトムナビゲーションバー(8dp)の後ろの層になります。ボトムシート、ナビゲーションドロワー、キーボードはボトムナビゲーションバーより上の層になるので、一時的にボトムナビゲーションバーを隠すかたちになります。
0コメント