albatrosary's blog

UI/UXとエンタープライズシステム

Material Design Advent Calendar 3日目:What Is Material - Material properties

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

Material Design Advent Calendar 2014 - Adventar

Material properties

Materialには、特定の決まった特性や固有の動作があります。この性質を理解することはMaterialを利用しているときに、Material Designの考えと異なる方法で使おうとした場合に役立ちます。

Physical properties

Materialには x と y (dpsで計測した) に加えて均一の厚み(1dp)を有しています。Materialには必ず厚みがありゼロであることはありません。

良い例

  • Materialの高さと幅は変えることができます

f:id:albatrosary:20141202160504p:plain

悪い例

  • 材料は常に厚さが 1dp である必要があります
  • 厚みを増やしたりゼロにしたりすることはできません

f:id:albatrosary:20141202160514p:plain

Materialに対する影の描画

良い例

影はマテリアル要素間の相対的な標高(z位置)から自然に生じます。

サンプル

悪い例

Materialに対して同じような影が描画されます。

サンプル

コンテンツ上に描画されるMaterialには様々な形や色があります。 しかしコンテンツはMaterialに厚みを持たせません。

サンプル

コンテンツとMaterialの性質は切り離して考える事が出来ます。 しかしMaterialの範囲内でのみコンテンツを表示することができます。

サンプル

マテリアルは確実な物です。

入力イベントはMaterialを越える事はできません。

良い例

f:id:albatrosary:20141202162055p:plain

悪い例

f:id:albatrosary:20141202162111p:plain

複数あるMaterialの要素は同じ空間を所有することはありません。

良い例

f:id:albatrosary:20141202162227p:plain

悪い例

f:id:albatrosary:20141202162237p:plain

Materialは他のMaterialをすり抜ける事はできません。

例えば、単純に高さを入れ替える場合に 一枚のMaterialシートが別のMaterialシートを通り抜けるような事はできません。

f:id:albatrosary:20141202162355p:plain

Transforming material

Materialは形状を変化させることができます。

サンプル

Materialは平面方向に対してだけ形を変えます。

サンプル

Materialは決して折れたり曲がったりしません。

悪い例

複数のMaterialシートは単一のMaterialシートに結合する事が出来ます。

サンプル

Materialは、複数に分けた後また結合する事が出来ます。

もし、Materialシートから別のMaterialとして切り出したとき、その切り出したMaterialシートは元のMaterialシートに再結合し、再度一つのMaterialシートとして扱うことができます。

サンプル

Movement of material

Materialはどのような場所にでも自然と現れ消えることが可能です。

サンプル

Materialは任意の軸に沿って移動することができます。

サンプル

一般的にz軸の動きはMaterialの特性とユーザー操作の組み合わせの結果です。

サンプル

簡単に説明すると

Material は通常の少し硬い「もの」のように考えてください。曲がったり折れたりしない厚さ 1dp のものです。ただ、大きさを変えたり現れたり消えたりくっつけたり離れたりすることができます(なんとも都合の良い)。

私感

物理的にそこにある「もの」としてMaterialを考えることで「表現」をつくろうとしているのではないかと思います。若干都合のいいものもありそうですがそれなりに理由があってのことだと思います。