17
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?