Material Design

マテリアルデザイン / 2014– / スタイル / Google UI

紙とインクという物理の比喩を、影と重なりの規則へ落とし込んだ設計体系。要素に高さを与え、影で階層を示し、動きに物理的な因果を持たせる。以後のUI設計が「体系として配布される」ことの雛形になった。

高さで表す階層と影 / 紙のような面の重なり / 因果を示すモーション / 規格化された余白の単位

画像は出典ページで確認

辞書情報

向いている用途
複数プラットフォームで一貫した挙動を配る。階層の深さを視覚的に伝える
文字
一つの書体族で階層を組み、太さと級数で差をつける
構成
8の倍数の格子に要素を載せ、余白を規格化する
素材
面に高さを与え、影の濃さで前後を示す
注意
影を飾りとして足さない。高さの規則が破れた瞬間に階層の情報が嘘になる。
関連研究
2014年の初版仕様 / 高さと影の対応表 / Material Youへの変化

関連項目

一覧内の位置へ戻る