官網(wǎng)地址:https://material.io/guidelines/material-design/environment.html
Material design is a three-dimensional environment containing light, material, and cast shadows.
Material design是一個(gè)包含了光破停,材質(zhì)杂瘸,以及投影的三維環(huán)境。
All material objects have x, y, and z dimensions.
所有的material對象都有x,y,和z值始赎。
All material objects have a single z-axis position.
所有的material對象都有一個(gè)唯一的z軸位置蓄髓。
Key lights create directional shadows, and ambient light creates soft shadows.
主光線生成了定向陰影贡未,背景光則生成了軟陰影汹族。
Material thickness
Material的密度
1dp
Shadows
陰影
Shadows are created by the elevation difference between overlapping material.
兩個(gè)不同材料之間的高度生成了陰影。
Contents
目錄
3D world
Light and shadow
- 3D world
The material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness, equivalent toone pixel of thicknesson screens with a pixel density of 160.
material環(huán)境是一個(gè)3D空間托享,這意味著所有的對象都有x,y和z值骚烧。z軸垂直于顯示的屏幕,正z軸的方向朝向用戶闰围。每片材料沿z軸占據(jù)一個(gè)1dp厚度標(biāo)準(zhǔn)的單獨(dú)位置赃绊,相當(dāng)于像素密度為160的厚度屏幕的像素。
On the web, the z-axis is used for layering and not for perspective. The 3D world is emulated by manipulating the y-axis.
在網(wǎng)頁上羡榴,z軸用于分層碧查,而不用于透視。通過操縱y軸來模擬3D世界炕矮。
3D space with x, y, and z axes
3D空間擁有x,y和z
- Light and shadow
Within the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles.
在material環(huán)境中,虛擬光線照亮了屏幕者冤。主光線生成了方向陰影肤视,而周圍的光則從各個(gè)角度生成了軟陰影。
Shadows in the material environment are cast by these two light sources. In Android development, shadows occur when light sources are blocked by sheets of material at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows the card with a height of 6dp.
material環(huán)境中的陰影有這兩種光源產(chǎn)生涉枫。在Android的發(fā)展中邢滑,當(dāng)沿著z軸的各個(gè)位置的光源受到材料片的阻擋時(shí),就會(huì)產(chǎn)生陰影愿汰。在網(wǎng)絡(luò)上困后,僅通過操縱y軸來描繪陰影。下面的例子展示了6 dp高度時(shí)的卡片衬廷。
Shadow cast by key light
主光源生成的陰影
Shadow cast by ambient light
周圍光源生成的陰影
Combined shadow from key and ambient lights
聯(lián)合主光源和周圍光線生成的陰影