Googleが先日IOで発表したMaterial Designについていまさら思った事など
アニメーション、スタイルのページについてメモ。
レイアウトのページ以降はまたどこかで。
※以前社内ブログに書いたものを調整して転載です
Introduction
メタファーは紙？
薄く重ねた表現ということで紙と言っているんではないかと思う。
どちらかといえば薄いプラスチック?
もし紙だったらテクスチャの質感や表示時に傾く、ゆれる演出が入るんじゃないかと。
四角形がゆがむことはないので紙の見え方とはなんか違う。紙のやわらかさがない これのMaterial responseとか
タップ時の広がり方にしても紙だとあのようにはならないです。
色のガイドラインの透明感にしてもプラスチックと考えた方がいいんじゃないでしょうか。
Bold, graphic, intentional
この意図は携帯、タブレット、PCで統一するためかと。
今後の端末高解像度化、画像素材のベクターデータ化を見据えてと思われる。
ポイントとしては、外枠に線いれるのは今後なくなっていきそう。背景色で枠を見せる。
アニメーション
基本
動きの基本は２つ
イーズイン＋イーズアウト (Mass and Weight)
加速して減速。ふわふわっと。
重力 (Special Cases: Entering and Exiting Frame)
一定の下方向加速
タップ反応
マテリアルデザインで一番わかりやすいタップ位置から広がる演出。
Material Response
要は視線の動きにそった動きを作る事。
基本はタップした位置から始まる。タップした時にはタップした場所をみているものなので。
トランジションに意味をつける
前後の画面で選択、詳細など関連性が強いとき、画面をひきつぐように見せる。
なにがどこにいったか迷わせないため。
Hierarchical Timing
複数の同列の要素がある場合の表示方法。
視線の流れに沿う。
Consistent Choreography
並列要素に異なる動きをつけない。
動きで目立たせようとしないこと。動きはコンテンツの中心にしない。
スタイル
カラー
ポイントは基準となる色(500)があり、段階的にしている。段階は薄くなる方向と濃くなる方向がある。
細かい差を使わない事。
UI Color Application
主要な色は３色まで。
このへんはデザインの基本的なことの話になってる。
グレーの文字には透明度87%を使う。%まで指定は珍しいけど基本通り。
ステータスバーの色は700（濃いめ）を。
文字
フォントはRoboto。
指定は拡大可能に。(アクセシビリティ)
サイズは段階的に。
行間の取り方にかなり余裕がある。
改行は文にこだわりすぎない。基本的に流す。
文字間、大きなサイズになると狭く。
アイコン
余白の取り方は形による。見た目の大きさ優先。
線の太さは一定。(チェックマークなど払いをいれない)
角の丸さにはルールあり。2dp
斜めの線は45度。統一感をだす