🌟
[ui/ux] Material Design
マテリアルデザインとは
Google社が2014年に考案したデザインに対する考え方とガイドライン
具体的には
コンポーネントやレイヤーなどUIで表現することができるものの特徴を定めたドキュメント
「マテリアル」とは
- 幅、高さ、奥行きを持った形を変えられる「物質」
- マテリアルデザインではUIの「ヘッダー」、「フッター」、「ボタン」などの個々のコンポーネント、は全てマテリアルからできているとされている
マテリアルの環境
物理法則
マテリアルデザインの根本の考え方
物理法則を取り込む
例えば:
- ボタンやヘッダーにも厚みや高さがある
- ボタンやヘッダーが他のマテリアル（レイヤー）よりも高い位置にある場合、下に影ができる
- マテリアルは他のマテリアルをすり抜けることができない
マテリアル特有の動き
基本的には物理の法則に従った環境のマテリアルデザインですが、その法則と違った部分もあります
- マテリアルは形を変えられる
普通の物理原則状の物体ならありえないですが、マテリアルは形を変えることができる - マテリアルは透明度を変えられる
同じく、普通の世界であれば紙がいきなり透けるということはありませんが、マテリアル空間だと可能です - 複数のマテリアルを融合することができる
- マテリアルは浮くことができる
デザインTips
全ての要素の高さは決まっている
影は２種類存在する
- キーライト (画面の上部から降り注ぐ強めのライト)
- アンビエントライト (画面の全方向から淡く降るライト)
レイアウト
8dpグリッドを使用する
レイアウトグリッド
フラットデザインとマテリアルデザインの違い メリデメも
フラットデザインが重たく過剰なリアリズムへの反発である一方、マテリアルデザインは過度なフラット化に対する答え
参照
wiki
操作するデバイスが変わっても操作感に統一性を期待できることで、ユーザーはストレスを感じずに様々なデバイスを操作することができる
設計体系は、デザインを簡略化するフラットデザインに、他の物質の質感に近づけるために装飾を施すスキューモーフィズムを取り入れた「フラット2.0」の一例として取り上げられることがある
Discussion