前置き
マテリアルデザインを急速に勉強中・・・・
http://www.google.com/design/spec/material-design/introduction.html
ここでは、深度について学んだ事をメモしたいと思います。
ベクトルの方向
右上を(0,0)としている。
お気づきのように、Z-indexが存在します。
Z-index
これが深度の影の付け方にとても関係します。
オブジェクトの種類によって深さが変わるのです。
- キーライト：影の方向性を決める
- アンビエントライト：深度を決める
- キー＋アンビエントライト：２つの組合わせ
物質的なプロパティ
ルール、箇条書きします。
- オブジェクトには1dpの厚みがあります。
- アンビエントによるshadowは深度に関連します。
- オブジェクトに配置されるコンテンツには厚みがありません。
- オブジェクトに配置されるコンテンツは配置されたオブジェクトよりも大きくなる事はありません。
- 多くのコンテンツをまたいで、アクションをおこすトリガーを設定しない。(結構あたりまえかも？)
- 意味の違うオブジェクトが同じ階層に存在する事はほぼ無い
- 深度の違うオブジェクトが交差する事はない。（情報の構造はしっかりすれば大丈夫。）
- オブジェクトの大きさによって矩形が変わります。円 ＜ 角丸四角 ＜ 四字熟語
- 同じオブジェクトであれば、切り離しても、元の通りにつなげる事が出来る
深度と影について
種類により深度が変わります。
もちろん、3Dなので、影のdpの深さも変わります。
| Elevation (dp) | Component |
| 24 | DialogPicker |
| 23 | |
| 22 | |
| 21 | |
| 20 | |
| 19 | |
| 18 | |
| 17 | |
| 16 | Nav drawerRight drawerBottom Sheet |
| 15 | |
| 14 | |
| 13 | |
| 12 | Floating action button (FAB – pressed) |
| 11 | |
| 10 | |
| 9 | Sub menu (+1dp for each sub menu) |
| 8 | MenuCard (picked up state)Raised button (pressed state) |
| 7 | |
| 6 | Floating action button (FAB – resting elevation)Snackbar |
| 5 | |
| 4 | App Bar |
| 3 | Refresh indicatorQuick entry / Search bar (scrolled state) |
| 2 | Card (resting elevation)Raised button (resting elevation)Quick entry / Search bar (resting elevation) |
| 1 | Switch |
補足：２つのオブジェクトの深度の差には6dpあります。
仮想の深度が2dp上の深度が8dp。
横から見るとこんな感じ。
ちなみに、影の大きさは深度のdpに関連します。
そして、オブジェクトに深度を付ける事により、他の階層のオブジェクトから特別とされ、特に機能が単独であれば他に関与されない独立された動きを実現するようになります。（gmailのメール作成の丸いボタンのように。）
http://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-
マテリアルデザインの深度はアプリの構造もユーザーに伝えようとしたデザインと言う事になります。