
#01 マテリアルデザインの『NG』と『OK』デザイン | Surfaces編
はじめに
この記事はマテリアルデザインガイドラインの『サーフェス』についてのNGデザインとOKデザインをまとめたものです。
なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、難しいなと思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。
正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design
URL:https://material.io/
※動画・画像データ等はこちらから引用させていただいております。
Surfaces(サーフェス)とは?
マテリアルデザインにおけるSurfacesとは、『UIを構成するための概念』です。
Surfaceはx、y、z 軸を持つ 3D 空間であり、つまり『現実世界のモノ』と同様に、オブジェクトは縦、横、厚み(高さ)で構成されています。
そして、ここで言う『現実世界のモノ』とは、マテリアルデザインでは『紙』を指し、
紙の厚さは常に1dpとなっています。

影

特性



不透明度

まとめ
今回は、サーフェスのNGデザインとOKデザインをまとめてみました。
UIデザインの勉強の参考になればうれしいです。
※ガイドラインでは、動画等を使用してさらに詳しく解説がありますので、是非ご覧ください。
次回は『Elevation』のNG/OKデザインについてまとめていきます。