デザインを重視するにあたって、今年の I/O アプリでは
マテリアル デザインという新しいアプローチ を採用しました。また、
Android L Developer Preview の機能も利用することで、合理的で一貫性があり、わかりやすく美しいものに仕上げました。このアプリをデザインしていく上での様々な判断とその成果について見ていきましょう。
表面と影
マテリアル デザインでは、アプリの構造をユーザーに伝えるにあたって表面と影が重要な役割を担います。マテリアルデザインの仕様をご覧いただくと、いつどこで影が表示されるべきか判断するための
レイアウト指針 が示されています。例として、スケジュール画面をデザインしていく途中段階をご覧に入れます:
第一段階にはいくつか問題がありました。まず、アクション バーの下に影があることで、「紙」が 2 枚あることを印象付けています。片方はアクション バーの紙で、もう一方はタブとコンテンツの紙です。問題は、下になっている方の紙が複雑すぎることです。コンテンツの紙を表現する「インク」はもっとシンプルであるべきです。この段階ではインクがあまりに多くのことをしすぎていて、視覚的な煩雑さが出てしまっています。タブだけをさらに別の紙として分離することもできたのですが、アクション バーとコンテンツの間にもう 1 つ層が重なるというのは、それはそれで煩わしいでしょう。
第二段階と最終段階では、アプリの機能部とコンテンツ部を明確に分離することで、インクがテキスト、アイコン、強調線などの描画に集中できています。
他にも「表面」の概念が重要な役割を果たしている画面があります。詳細画面です。
最初にリリースした時は、トップのバナーがセッションのテーマ カラーから画像に徐々に変わっていくようになっていました。画像は他のコンテンツの半分のスピードで動き、パララックス効果を生み出しています。しかし、このデザインではマテリアル デザインにおける物理法則が曲げられすぎているように感じられました。紙にテキストが書かれているにも関わらず、その透明度がアニメーションに従って変化してしまうのです。
6 月 25 日のアップデートでは新しいアプローチを導入しました。タイトルのテキストを表示する部分を小さな紙として分離しました。この紙の色と透明度は変化しません。スクロールする前は本文の紙とくっついて一体となっています。スクロールするに従い、この紙（とその上に付いた Floating Action Button）が浮かび上がり、本文の紙が下をスクロールしていきます。
これにより、マテリアル デザインの世界での物理法則に準じた挙動が得られました。ユーザーから見て理路整然とした外観、操作、動作に結びついています（こちらのコードを参照してください:
Fragment ,
レイアウト XML ） 。
色
マテリアル デザインの重要な原則は、インターフェイスが「大胆で視覚的で意図的」であり、印刷品質のデザインで作られた基本的な要素によって視覚的な表現を支えることです。そのような要素を 2 つ見ていきましょう。色とマージンです。
マテリアル デザインにおいて UI 要素のカラー パレットは一般に
1 つの主要色と 1 つの強調色 によって成り立ちます。大きな色領域（例えばアクション バー）にはシェード 500 の主要色を使い、小さな色領域（例えばステータス バー）には暗いシェード 700 を使うようにします。
強調色が用いられるのはアプリの中の少しだけです。重要な要素に注目を集めるために用います。控えめな主要色と鮮やかな強調色のコントラストによって、アプリのコンテンツの魅力を活かしたまま、大胆でカラフルな印象を付け加えることができます。
I/O アプリでは状況に応じて 2 つの強調色を使い分けました。ほとんどの場合は
ピンク 500 ですが、セッションのテーマ カラーに隣接する「スケジュールに追加」ボタンのような場合には控えめに ライト ブルー 500 を用いました（コードを参照:
XML 色定義 、
テーマ XML ）。
セッションのテーマ カラーについては、セッションごとの主要トピックによって詳細画面を色分けしました。Floating Action Button やセッション画像と一貫性のある明るさや最適なコントラストを考え、ベースとなるマテリアル デザインのカラー パレットにほんの少し変更を加えただけです。
最終的には以下のようなカラー パレットになりました。
セッションのテーマ カラー。FAB と隣り合わせに並べてコントラストがわかりやすくしてあります
彩度を落としたテーマ カラー。パレット上すべてで明るさに一貫性があることがわかります
マージン
「伝統的な印刷デザイン」に欠かせない要素として他に思いつくものといえば、マージン、厳密に言えば
キーライン です。縦向きの配置としては 4dp のグリッドは既に馴染み深い（ボタンや単純なリスト項目は 48dp、標準のアクション バーは 56dp など）ですが、キーラインに関するガイドラインはマテリアル デザインで新しく導入されました。特に、タイトルなどのテキスト項目をキーライン2（電話では 72dp、タブレットでは 80dp）とすることで、画面に印刷物のような美しいリズムが生まれ、快適に画面上の情報を読み取ることができるようになりました。ゲシュタルト原理の賜物ですね。
グリッド
もう 1 つ、マテリアル デザインの原則として「1 つの適応性のあるデザイン」があります。
1 つの根本的なデザイン システムが操作と空間を統合します。1 つの根本的なデザインがデバイスごとに違った外観で反映されます。外観は各デバイスのサイズや操作方法に最適な形で調整されます。色、アイコン、構造、空間的関係はそのままです。
さて、I/O アプリの画面の多くはセッションの集合です。集合を表示するために、マテリアル デザインはいくつかのコンテナーを提供しています。カード、リスト、グリッドなどです。当初セッション項目を表示するためにはカードを利用することを考えていたのですが、各要素はほとんど同質であるため、この場合にカードを使うのは適切ではないということになりました。カードを使う場合、影や丸角がどうしても視覚的に乱雑になりがちで、コンテンツごとの視覚的なグルーピングとしてもこの場合対して役にたちません。グリッドの方がいい選択でしょう。画面の大きさに従ってカラムの数を変えることもできますし（
コード を 参照 ）、テキストと画像をひとまとめにしてスペースを節約することもできます。
楽しい細部
アプリの中で L Developer Preview に関して特に手間ひまかけて仕上げた部分を 2 つ紹介しましょう。タッチ フィードバックの波紋と、「スケジュールに追加」の Floating Action Button です。
アプリでは波紋のスタイルとして境界線があるものとないもの両方を使いました。必ず波紋の色をカスタマイズして、背景に関わらず見やすい（それでいて控えめ）ようにしました（コードを参照:
明るい波紋 、
暗い波紋 ）。
特に我々開発陣が気に入っているのが、セッションが自分のスケジュールに追加されているかどうかを示す Floating Action Button です。
これを実現するため、L プレビューの様々な API メソッドを（互換性のための実装を含め）利用しました。
1）View.setOutline と setClipToOutline で、円形の境界線と動的な影の描画
2）android:stateListAnimator で、押下時に指に向かって浮かび上がるように（影が濃くなる）
3）RippleDrawable で、押下時のインク タッチ フィードバック
4）ViewAnimationUtils.createCircularReveal で、青と白の背景が切り替わる効果
5）AnimatedStateListDrawable で、アイコンの状態（チェック・非チェック）を切り替えるフレーム アニメーションを定義
これらのおかげで使っていて楽しい UI 要素ができました。我々開発陣も気に入っています。開発者の皆様のインスピレーションとなることを願っています。単にコードをコピーして使っていただくのも歓迎です。
今後の展開
コードを使っていただくといえば、L Develoepr Preview と互換性のためのコード パスを含めて、アプリのソース コードはすべて
公開されています 。以上のようなデザインがどのように実装されているか、ぜひご覧ください。
今回の投稿ではマテリアル デザインを使って、プラットフォームを最大限活用する美しい Android 向けアプリを作る方法をご紹介しました。皆様のお役に立つことを願っています。今後数週間にわたって今年の I/O アプリに関する情報をお伝えしていきます。ユーザーに対して良い体験を提供するための開発手法をさらにご紹介できればと思います。
Posted by 荒木佑一Developer Relations Team
元記事 をご覧ください。 - 荒木」
Google I/O 2014 アプリのソース コード を公開したことをアナウンス しました。カンファレンスの間ご利用いただいた様々な機能やデザインがどのように実現されているかご覧頂くことができます。今回の投稿では、今年のアプリがどのような意図のもとデザインされているかご紹介します。
マテリアル デザインという新しいアプローチ を採用しました。また、Android L Developer Preview の機能も利用することで、合理的で一貫性があり、わかりやすく美しいものに仕上げました。このアプリをデザインしていく上での様々な判断とその成果について見ていきましょう。表面と影 レイアウト指針 が示されています。例として、スケジュール画面をデザインしていく途中段階をご覧に入れます:Fragment , レイアウト XML ） 。色 1 つの主要色と 1 つの強調色 によって成り立ちます。大きな色領域（例えばアクション バー）にはシェード 500 の主要色を使い、小さな色領域（例えばステータス バー）には暗いシェード 700 を使うようにします。ピンク 500 ですが、セッションのテーマ カラーに隣接する「スケジュールに追加」ボタンのような場合には控えめに ライト ブルー 500 を用いました（コードを参照: XML 色定義 、テーマ XML ）。
セッションのテーマ カラー。FAB と隣り合わせに並べてコントラストがわかりやすくしてあります
彩度を落としたテーマ カラー。パレット上すべてで明るさに一貫性があることがわかります
マージン キーライン です。縦向きの配置としては 4dp のグリッドは既に馴染み深い（ボタンや単純なリスト項目は 48dp、標準のアクション バーは 56dp など）ですが、キーラインに関するガイドラインはマテリアル デザインで新しく導入されました。特に、タイトルなどのテキスト項目をキーライン2（電話では 72dp、タブレットでは 80dp）とすることで、画面に印刷物のような美しいリズムが生まれ、快適に画面上の情報を読み取ることができるようになりました。ゲシュタルト原理の賜物ですね。グリッド コード を 参照 ）、テキストと画像をひとまとめにしてスペースを節約することもできます。楽しい細部 明るい波紋 、暗い波紋 ）。今後の展開 公開されています 。以上のようなデザインがどのように実装されているか、ぜひご覧ください。
