GoogleのエンジニアであるChet HaaseとUIデザイナであるRich FulcherがMaterialデザインについて語るというイベントに参加したのでそのときのメモを公開します。
当日のスライド(英語)が上のリンクから入手できます。視覚的な部分が多いので、むしろ上のスライドだけ見てもいいかもしれません。
当日は、マテリアルデザインのいくつかのトピックについて、UIデザイナのRichがデザイン的側面について、エンジニアのChetが実装について語るという構成で行われました。
以下、メモです。
Color
Rich
今まで強調してこなかったけど、色はとても大事
まずアプリのPrimary colorを決めて、輝度や彩度をずらした何色かでアプリを構成するとよい
Primary colorは、ユーザがこのアプリを使ってるんだ、と認識する色
また「最近のアプリ」一覧画面でもぱっと見でこのアプリだとわかる色が良い
Chet
デザインの試行錯誤のために色を何通りも試すのが大事
グレイスケールのassetを用意してプライマリカラーをそれに適用、ということが出来る
- *materialみたいな名前のThemeを継承したThemeを作り
- 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軸の概念がある
２つの要素を並べるにしても、単に同じ平面に並べるのか、一方を他方より上に配置するのかという自由度が生まれた
また、必要に応じて要素の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より前のバージョンを見捨てられるのは現実的にはかなり先のことだと思うので、結構大変なことになりそうです。