マテリアルデザインのガイドラインまとめ (その1)

マテリアルデザインのガイドラインを読んでみた。

Androidアプリを作っている中で、そもそもマテリアルデザインって何だっけ？CardやデカいHeaderってどういう風に使うのが正解なんだっけ？を知らないことに気づきました。今まで何となくCardやデカいHeaderを使ってたけど、使い方って合ってるんだっけ？が気になり。ListViewとCardの使いわけ、みなさんはご存知ですか？僕は知りませんでした。ということで、Googleのマテリアルデザインのガイドラインを読んでみました。

Introduction - Material design - Google design guidelines

かなりのボリューム(しかも英語)なので、今回は1回目。Introductionから、What is material?. Animationまでをカバーしています。

• -

Introduction

・マテリアルデザインの目標は、過去のいいデザインとイノベーションや科学の可能性を統合するようなVisual languageを作るため。

”マテリアル”とは？

・"マテリアル"は3Dの世界。なのでx、y、z軸があり、z軸方向にレイヤー状に表示される。
・光と陰を用いる。光には、Key light(一方向への陰)とAmbient light(全方向への陰)がある。

"マテリアル"の要素(Property)

・マテリアルはすべて1dpであり、それ以上の厚さを持ってはならない。
・陰は、自然な方向に向かう(自然環境であり得ないような陰の方向になってはならない)
・インプットのイベントは、マテリアルを貫通してはならない(例えばタッチイベントは、全面のマテリアルにのみ適用され、z軸方向に後ろにあるマテリアルに影響してはならない)
・複数のマテリアルの要素が同じレイヤーにあってはならない（x, y軸方向に重なる場合は、陰をつける）
・Z軸方向の順番が入れ変わる際、マテリアル同士が貫通してはならない。
・マテリアルの形を変形してもよい。
・マテリアルは(折り紙のように)折れ曲がってはならない。
・Z軸方向に同じレイヤーにあるマテリアルは、2つ以上がつながってもよい。
・Z軸方向に同じレイヤーにあるマテリアルの一部の位置を入れ替える場合、入れ替えた後は再び1つのマテリアルに統合されなくてはならない。
・Z軸方向の移動は基本的にユーザのインタラクションによるものである。

階層移動と陰

・階層の大きさ(dp)は、マテリアルの種類によって決まっている。例えばDialogであれば24dp、Cardであれば8dpなど。
　ー詳細: https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-
・陰は、マテリアルごとのZ軸方向の深さ(順番)を示す重要なもの。
・マテリアルは、ユーザのインタラクションにより陰の大きさ(dpの大きさ)が大きくなる。
　つまり、ユーザがボタンなどを押すと、そのマテリアルはZ軸方向に全面に浮き上がってくる（結果、X, y軸方向に移動することができるようになる）

オブジェクト間の関係

・それぞれのオブジェクトは、1つの親を持つ
・それぞれのオブジェクトは、1つ以上の子を持つことができる。
・子のオブジェクトは親の移動に追従する(親の移動の際に子だけがその位置において行かれることはない)
・兄弟は同じレイヤーにあるオブジェクトのことを指す。
・ただし、Side nav drawer, Action bar, Dialogは例外。

アニメーション

・自然な加速と減速をすること
・画面から出て行くアニメーションで減速すると、画面の外にそのオブジェクトがあるように見え、ユーザを混乱させてしまうのでやってはならない。

レスポンシブなインタラクション

・タッチ、声、マウスなどすべてのインプットが重要。
・触ったことが分かるようなビジュアルフィードバックを行うこと。
　ー触った場所からrippleと呼ばれるビジュアルフィードバックを行うこと。
・ユーザのインタラクションに応じて新しいマテリアルを表示する際、ユーザが触った場所からアニメーション付きで表示すること（違う場所から表示してはならない）

意味のあるトランジション

・2つのステートを移行する際のトランジションは明確で、ステートが変更したことが明確に分かること。途中でアニメーションが切れてはならない。
・このトランジションのタイプは下記のものがある
　ーIncoming elements: 次のステートに移行した際に新しく生成されるエレメント
　ーOutgoing elements: 次のステートに移行した際に不要となるエレメント
　ーShared elements: Galleryのように、アイコンをタップして全画面で拡大して表示するようなエレメント
　ーアニメーションの方向や順番は意味を持っているべき。意味のない方向や順番のアニメーションをしてはならない。

• -

次回はStyleから読んでみます！