レイヤー

画面は平面ですが、概念として奥行きを持っています。平面上だけでなく空間上の配置として一貫性を保ち、物理法則にのっとった空間表現により、現実世界で培われたユーザーの概念モデルを利用することで、自然な知覚を助けます。

レイアウト要素の重ね順

ヘッダー、フットブロック、サイドバー、コンテンツといったレイアウト要素がベースのプレーンな白紙の上に載っています。ユーザーはこれらの重なりの最上層からマウスや指で画面に触れることになります。

高度とドロップシャドウ

各コンテンツ要素のなかにおいても、モーダル、通知、ドロップダウンやドロップダウンボタンから展開したドロップダウンメニュー、カレンダー、シートはレイアウト要素が配置されている平面の上層に浮いているバーチャルなレイヤーに配置されているものになります。いちばん下の層であるベース面に対してシャドウを落とすことでそれを表現し、ユーザーが要素の空間的な関係性と連続性を把握できるようにしています。

要素は下記のように順に重なって層をなしています。現実世界での物理的な法則にしたがって、ベースの面から上層に離れている（高度が高い）ものほど、シャドウは大きくボケていきます。