2017 Material design 第一章第二節《環境》

D27發表於2018-10-09

二、環境(Environment)

Material design是基於三維空間的設計語言。在三維空間內包含有光照(light)、material、陰影(shadows)

所有material物件都存在於含有x、y、z軸座標的三維空間中。
在三維空間下,所有material物件都有唯一,不與其他物件衝突的z軸位置。
物體受兩種光源影響,主光源影響物體的投影方向,環境光照射物體產生柔和的投影。

Material的厚度
1dp

投影
投影還會受到z軸上相互重疊的material物件之間距離大小的影響


三維空間(3D world)

含有x、y、z軸座標的三維空間
含有x、y、z軸座標的三維空間

Material存在於三維空間內,因此所有的material物件都帶有x、y、z軸座標資訊。z軸指示的方向垂直於螢幕並指向使用者眼球。在z軸座標方向上,每一material物件都有著唯一,不與其他物件衝突的座標位置並且都只有1dp厚度,1dp和螢幕密度為160px的一個px相等

在web端上,z軸座標主要用於區別物件的層級關係,而三維空間的營造主要通過y軸上的操作。


光照和投影(Light and shadow)

在material環境下,虛擬的燈光照亮整個場景。主光源影響物體的投影方向,環境光通過照射物體產生柔和的投影。

在material環境下,投影受這兩個光源影響。在Android開發中,由於在z軸上各material物件位置的不同導致了不一樣的投影效果產生。但在web上,投影只受y軸座標變化的影響。下面的例子展示了一張卡片在6dp高度上光源對其的影響效果。

主光源的投射效果
主光源的投射效果

環境光的投射效果
環境光的投射效果

主光源和環境光共同投射下的效果
主光源和環境光共同投射下的效果

相關文章