albatrosary's blog

Azure と Angular と Wercker CI とか

Material Design Advent Calendar 2日目:What Is Material - Environment

Material Design ガイドにある「What Is Material - Environment」を紹介します。このエントリーは「Material Design Advent Calendar 2014」12月2日の記事です。

Material Design Advent Calendar 2014 - Adventar

Environment

3D world

マテリアルに存在するすべてのオブジェクトは、3軸(x-y-z)を有する三次元空間に表現されます。z軸はディスプレイの面に対して垂直で、操作しているユーザに対する方向を+z軸としています。マテリアルの各シートはz軸に対し、ある位置(高さ)に存在し、そのシートは常に 1dp の厚みがあります。

f:id:albatrosary:20141202100113p:plain

dp とは「Density-independent Pixels」の略で、密度に依存しないピクセル(画面の物理的な密度に基づいている抽象ユニット)です。このユニットは 1dp が 1px にほぼ等しいされている160 dpi(1インチあたりのドット数)画面を基準にしています。より高い密度の画面では、1dp を描画するために使用される画素の数はてスケールアップされ、低い密度の画面では 1dp に使用される画素数はスケールダウンされます。これにより異なるデバイスでも同じ印象を与えることができます。つまり dp は「ディスプレイサイズに依存しないピクセル表現」を意味しています。 Androidアプリケーションを開発されている方は馴染みのある単位ですが、具体的には下記サイトにその意味の記載があります:

More Resource Types | Android Developers

Light and shadow

Material環境では、二つの仮想的な仮想光があり描画されるオブジェクトに影を作ります。 1つは、周辺光(ambient light)により様々な方向に伸びるソフトウェア的な影を描画する光源です。 2つは、起点となる光(key light) により指向性の影を作り出す光源です。 Material環境では、すべての影がこれら2つの光源によって生成されます。z軸に沿い様々な位置にあるMaterialシートに対して光を照射します。これら空間の光源による結果として影を生じますが、光そのものは描画されません。

起点となる光(key light)による影

f:id:albatrosary:20141202103158p:plain

周辺光(ambient light)による影

f:id:albatrosary:20141202103227p:plain

起点となる光(key light)と周辺光(ambient light)による影

f:id:albatrosary:20141202103255p:plain

簡単に説明すると

マテリアル環境は 3D であり基準となるマテリアル素材の厚さは 1dp で定義します。そして光というものが2つ定義されていてそれに生じて影が作られます:

  • 周辺光(ambient light)
  • 起点となる光(key light)

この影により高さの概念を作り出すことができます。

私感

dp という単位を用いることで相対的にものの大きさを定義することができます。影についても雰囲気としての影ではなく物理的配置を意識した意味のある影を定義しています。これらにより幾何学的な配置を様々なデバイスで同じような印象を与えることができます。こうした概念は今までのデザインカンプ等には無かったのもではないかと思います。
Material Design が流行っているようですが、今は単純にライブラリを使うというのではなく本質的な意味を噛みしめるのが良いかと考えています。