LoginSignup
17
18

More than 5 years have passed since last update.

googleアプリから見るナビゲーションドロワーのマテリアルデザイン

Last updated at Posted at 2014-12-17

背景

ナビゲーションドロワーのデザインが最新のサポートライブラリv7から変わりました。ActionBarを利用するとデフォルトではハンバーガーがなくなり、矢印がくるりとアクションします。Actionbarの上にドロワーは乗らないのは以前と同様です。
こういうアクションのあるデザインはマテリアルデザインの一つと言えます。
一方で、マテリアルデザインガイドラインではナビゲーションドロワーはバーの上に乗っかります。

一体Googleはどっちのデザインを使わせたいの?と思って、Google製のアプリがどうなっているか調べてみました。
(追記:ご指摘をいただき再度確認したところ、Googleアプリはほとんどがナビゲーションドロワーはバーの上に乗っかるデザインでした。
サポートライブラリでの矢印が回転するデザインは過渡期のものだったのかもです。
タイトルとは内容が違ってしまいますが、情報は残しておきます。)

調査

Android 4.2が入ったGalaxy S3で調べました。

Gmail

上に乗らないデザイン
上に乗るデザイン
Screenshot_2014-12-17-14-03-57.png

Google Map

上に乗るデザイン
Screenshot_2014-12-17-12-05-32.png

Google+

ドロワーがない
Screenshot_2014-12-17-12-06-06.png

Play Store

上に乗らないデザイン 最新では上に乗るデザインです。コメント参照
Screenshot_2014-12-17-12-07-45.png

Play Books

上に乗るデザイン

Screenshot_2014-12-17-12-07-56.png

Play Movie & TV

上に乗るデザイン
Screenshot_2014-12-17-12-08-09.png

Play News Stand

上に乗るデザイン

Screenshot_2014-12-17-12-07-33.png

Play Game

上に乗るデザイン

Screenshot_2014-12-17-12-06-35.png

Youtube

上に乗るデザイン

Screenshot_2014-12-17-12-08-37.png

Google I/O

リリース版
上に乗らないデザイン
Screenshot_2014-12-17-12-45-18.png

オープンソース版
上に乗るデザイン

device-2014-12-17-124839.png

結論

アプリ ドロワーがバーの上?
Gmail
Google map
Google+ バーがない
Play store ◯(上に乗るデザインですが自分の実機では確認できませんでした)
Play books
Play Movie
Play News Stand
Play game
Youtube
Google IO オープンソースは◯

ドロワーがActionBarの上に乗るデザインがほぼ採用されていますが、例外もありました。
最新のサポートライブラリでは矢印がアクションするデザインが導入されましたが、ドロワーがActionbarの上に来るのがやはり正統派なのではないでしょうか。
けど最近マテリアルデザインを標榜しているアプリの多くが下に来るデザインを採用しているので、流れは変わるかもですね。
個人的には上に乗るデザインの方がファーストビューでのドロワーのコンテンツ量が増えるし見た目もシンプルなので、そちらが良いと思っています。

蛇足

ドロワーがActionBarの上に乗るデザインですが、ゆっくり動かすとドロワーの後ろで矢印がこっそり回転しています。なんでやねん。

17
18
4

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
17
18