Posted at

GoogleのエンジニアとUIデザイナがMaterialデザインについて語る"Android Double Header (Material Design & Dev)" 聞いたメモ

More than 3 years have passed since last update.

GoogleのエンジニアであるChet HaaseとUIデザイナであるRich FulcherがMaterialデザインについて語るというイベントに参加したのでそのときのメモを公開します。

当日のスライド(英語)が上のリンクから入手できます。視覚的な部分が多いので、むしろ上のスライドだけ見てもいいかもしれません。

当日は、マテリアルデザインのいくつかのトピックについて、UIデザイナのRichがデザイン的側面について、エンジニアのChetが実装について語るという構成で行われました。

以下、メモです。


Color

Rich

今まで強調してこなかったけど、色はとても大事

まずアプリのPrimary colorを決めて、輝度や彩度をずらした何色かでアプリを構成するとよい

Primary colorは、ユーザがこのアプリを使ってるんだ、と認識する色

また「最近のアプリ」一覧画面でもぱっと見でこのアプリだとわかる色が良い

Chet

デザインの試行錯誤のために色を何通りも試すのが大事

グレイスケールのassetを用意してプライマリカラーをそれに適用、ということが出来る


  1. *materialみたいな名前のThemeを継承したThemeを作り

  2. ColorPrimaryみたいなプロパティをoverrideすれば良い

Paletteを使うことで画像からコンテキストに応じた色を実行時に抽出することが出来る


Layout

Rich


  • Baseline

  • Keyline

  • Increment

の3点を意識すると良い


Baseline

8dipごとのgridを意識する、gridに沿って要素を配置する

ただしTextはもうちょっと細かく調整したいので4dip刻みで良い


Keyline

gridの上でも特に、ある線に要素を揃えるといい感じになる

目安としてmobileでは16dip, 72dipのライン、tabletでは24dip, 80dipあたりを考えると良い


Increment

要素の大きさを変えるときは標準のやつの2倍、とか倍数を意識するといいらしい


Dimensionality

Rich

Materialデザインの大きな点として、Z軸の概念がある

2つの要素を並べるにしても、単に同じ平面に並べるのか、一方を他方より上に配置するのかという自由度が生まれた

また、必要に応じて要素のZを大きくすることで、ユーザの注目を得ることが出来る

Chet

Zを変えるとええ感じの影がリアルタイムに付与される。これはAndroid LがやってくれるのでプログラマはZを変化させることだけ考えれば良い。

ZはelevationZとtranslationに分解できる

elevationZは要素が元々持っているZの値、translationZは動的に増減されるZの値

それぞれに対応する setElevationZ, setTranslationZ, setZなどのAPIがある

要素を浮き上がらせるようなアニメーションをするときは、既存のAnimator APIが使える

Zを変えても要素の大きさは変わらない これは実世界ではありえないことだけど、Androidチームはこちらのほうが一貫した体験を提供できると考えた。要素の大きさも伴って変えたければscaleX, scaleYなどの既存のメソッドが使える


Toolbars

Rich

ToolbarはActionbarの代替的存在

Actionbarは


  • カスタマイズが難しく

  • 他のViewから独立した階層を持つため他のViewを上に重ねにくい

という問題があった

Toolbarは標準のActionbarより大きくても小さくてもいいし、サイズや色をユーザの操作に応じてなめらかに変えることをGoogleのアプリでもいろいろやっている

Chet

Toolbarは普通のViewとして振る舞う

Toolbarを使うときは*.NoActionbarのようなActionbarがないThemeを利用して、layout xmlのほうでToolbarを宣言する

また、ユーザのスクロールに連動できるようなAPIが提供されている


Buttons

Rich

Material designではボタンは3種類


  • Flat button: 枠や背景を持たないような文字だけのボタン

  • Raised button: 枠を持っていて、ちょっとまわりから盛り上がって見えるような、いわゆるボタン

  • Floating Action Button (FAB): 円形で、まわりから浮き上がっている、なにか主要なアクションのためのボタン

Flat -> Raised -> FAB の順で強調度合いが上がる

特にFABはその画面で最も大切なアクションにのみ使うべき (音楽アプリの再生とか)

ところでMaterial designにおけるボタン押下時のアニメーションもよくあるボタンが凹むものではなくなっている。水面にしずくが落ちた時のように波紋が広がっていくようなイメージ。

Chet

FABはMaterial designで多用してるけど、対応するAPIがあるわけではない

(流行りのデザインでずっと続くトレンドかわからないからAPIには入れない的なことをQ&Aで言っていた)

周りのViewから浮き上がらせるにはみんな大好きFrame layoutを使えばいい

ボタンを丸くしてそこに影をつけるにはView.setOutlineメソッドやらView.setClipToOutlineメソッドが使える


Motion

Rich

リッチなユーザ体験のためにはアニメーションは大事

単にアニメーションを付けるだけじゃなくて、ユーザが素早く、なめらかに動いてると感じられるものが良い

アニメーションの軌跡は直線を描かないほうが良いことが多い。ちょっとカーブしてるほうが生きてる感じになる

Chet

これまでのAndroidではActivity間のアニメーションをサポートしていた。例えば新しいActivityが下からにゅいっと出てくるみたいなのはこれまでも出来たけど、お互いのActivityの中身はブラックボックス

Android Lでは、2つのAcitivity間で共通する要素をつなげるようなアニメーションが実現出来る。例えばリストやグリッドからある要素を選んで、それの詳細画面に遷移するみたいなパターンはよくある。

また、アニメーションについてもAPIが強化されて、ベジエ曲線を描くアニメーションみたいのが簡単にできるようになったらしい


感想

要素のZを変化させても要素の大きさは変わらない、アニメーション時の軌跡はこうあるべき、など、あたりまえですがデザイナがいろいろ考えて作っているのだなあと思いました。APIが積極的にリッチなアニメーションなどをサポートするようになっており、Android L以降向けに作られたアプリのUI/UXはレベルが高いものとなりそうです。

一方で、下方互換性についてはどの程度サポートされるのか不透明な部分もありました。例えばリアルタイムシャドウなんかは計算的に大変なのと、Android coreがViewを描画する部分と密接に関わってるので、support libraryでサポートするのは難しく、Android LではOSの機能を使って、それ以前のバージョンをサポートする場合は影付きのアセットを作るしか無いねーとか言ってました。Android Lより前のバージョンを見捨てられるのは現実的にはかなり先のことだと思うので、結構大変なことになりそうです。