Android P(9.0)のUIとマテリアルデザインについて

05/22 追記: Google I/O 2018にてMaterial Themingが発表され、より多様性に富んだデザインが可能になりました。

最近、iPhoneも欲しくて仕方ないしゅーぞーです。

一ヶ月ほど前にAndroid P(9.0)のデベロッパープレビュー版が公開されました。
今更感ありますが、大きく変化した新しいUIについて書きます。

記事概要
・P(9.0 preview)と8.1(Oreo)のUIの比較

対象読者
・AndroidのUIとかマテリアルデザインに興味がある人

今では多くの人が日常的に目にしているであろうマテリアルデザインが最初発表されたのは2014年のGoogle IOでした。夜中一人で興奮していたのを今でも覚えています。
しばらくして降ってきたAndroid L(5.0 preview)を焼いてみる*1と今までのKK(4.4)とは全く別次元のGUI― ポップで、リッチで、カラフルなよく整理されたUIに未来を感じました。

マテリアルデザインが広く受け入れられ、浸透した理由は
・デバイスの画面サイズを問わないこと
・一貫性のあるデザイン（アフォーダンス）
が最も大きな理由だと考えています。

AppleのiOSデバイスと違い、AndroidはOSとして提供されるものなので各メーカーによって画面サイズはまちまちになり、画面サイズの断片化が発生してしまいます。
そこでマテリアルデザインは画面の中の物理法則（のようなもの）に基づいてアニメーションやパーツの変形を行うので画面サイズの違い（1.5inchの丸い時計から100inchのディスプレイまで）を同一の概念でデザインすることが出来ます。また、これによってユーザーはOSやプラットフォーム、デバイスの種類すら異なっていても、どのような動きをするのかを直感的に理解することが出来るので異なるアプリケーション間のUIの差を吸収し、優れたUXを提供することができます。

発表から4年経ってマテリアルデザインは日常的な物になりました。
しかし、それにともなって普遍的に感じるようになってデザインとして記憶に残らない*2、少し古いものになって来たように感じます。

前置きが長くなりましたが本題です。

Android P（9.0 Preview）焼きましたか？

え、焼いていない？早く焼きましょう*3。
Android PはGUIが大きく変化し、既存のマテリアルデザインとは明らかに異なるものになっています。

GUIはこんな感じです。比較用にOreo（8.1）も置いておきます。

・透過の使用

マテリアルデザインは透過は使用せずベタ塗りが基本だったのですが、Android Pでは透過が使用されています。 iOSのようにぼかし有りの透過を全面に採用するわけではなく、マテリアルデザインの世界観を継承しつつ透過がうまく共存させてあります。

・角丸（マテリアルデザイン以上に）

今までの控えめな角丸と打って変わって大胆な角丸となっています。これはOSだけに限った話ではなくGoogleのサービスやドロワーのドックにすら適用されています。

f:id:shuzo_create:20180419035409p:plain カード等のcorner radiusはマテリアルデザインのガイドラインでは2dp(px)ですが、Pでは8pxも丸めてあります。この角丸がどこまで適応されるかは正式版のリリースや新しいガイドラインの発表を待たなければ分かりませんが、今のところは独立したカード要素すべてに適応されているので今後、多くのアプリケーションがこの角丸を採用していくことが予想されます。

・新しいPixelランチャー

Googleの検索バーは下にあります。一時期Chrome Betaも下にURL(検索バー)が表示されていたので、Googleはこの位置がお気に入りなんでしょうか。おそらく片手で（親指で）操作する場合、あの位置にあったほうがタップしやすく、ドロワーを展開する動作と同じレベルで検索という行為を日常的に行って欲しい、ということだと思います。
新しいPixelランチャーでは検索バーをタップした時点で画面全体に展開（フェードイン）され、その後はIntentによるActivityの切り替えと言うよりFragmentを差し替えているような推移になります。実際、これによって検索へのハードルも下がったように感じます。

・クイック設定パネル

ONの状態とOFFの状態の差がより認識しやすく、直感的にわかるようになっています。 Oreoで導入された中途半端な透過は廃止され、P Preview版では白い角丸なカードデザインになりました。基本的にベタ塗りであるマテリアルデザインに透過が使用されているのは違和感を感じていたので変更されて良かったです。
また、右にスワイプして2ページ目に行く動作も廃止されています。溢れたメニューは縦スクロールして表示する方式になり、アクセシビリティが向上しています。
しかし、これにより設定パネルを上に戻すときにタップした位置（特に片手で操作しているとき）によってはスクロール回数が増えてしまう、という問題も発生します。

・設定画面

カラフルなアイコンが並んでいてポップな印象になっています。電池の残量表示がバグってるのはご愛嬌。重い印象の設定画面よりポップで親しみやすいほうがユーザーの心理的障壁も低くなるので良いと思います。ちなみに、Oreoまではバッテリーセーバーを起動した場合ナビゲーションバー、ステータスバーがオレンジ色になっていましたが廃止された模様。

・音量のステータス

実際に音量ボタンのある位置に表示されるようになり、より自然なUIになりました。しかし、問題点としてアラームの音量設定をここから行えず設定に飛ばなくてはならないのでユーザビリティが低いように感じます。正式版リリースのときは改善していてほしいです。

マテリアルデザインの行く末

FuchsiaのArmadilloの続きなのか、進化したマテリアルデザイン2なのか。
正直、今のOreo（8.x）のUIデザインは中途半端にマテリアルデザインに沿っていないのが嫌です。（…Nougat（7.x）のUIの方がよっぽど良かったです。）
対してP（9.0 preview）のUIは方向性が明確になっていてpreview版ながら非常にしっかりとしているので、L（5.0 preview）と同じように大きな転換点となるだろうと思います。

*1:システムイメージを端末に書き込むこと。ここではPixel2に書き込んでテストしています。

*2:普遍的なデザインを避けたい場合、マテリアルデザインに完全に忠実である必要はない。実際MaterialDesignAWARDを見てみると独自実装も目立つ。

*3:エミュレータでも実行できますが、UIに関しては実機でなければわからないと思うので実機を強く推奨します。