Enviroment

官網(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是一個包含了光,材質(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對象都有一個唯一的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.
兩個不同材料之間的高度生成了陰影。

what_is_material_environment.png

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)境是一個3D空間,這意味著所有的對象都有x,y和z值。z軸垂直于顯示的屏幕,正z軸的方向朝向用戶。每片材料沿z軸占據(jù)一個1dp厚度標準的單獨位置,相當于像素密度為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
whatismaterial_environment_3d.png
  • 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)境中,虛擬光線照亮了屏幕。主光線生成了方向陰影,而周圍的光則從各個角度生成了軟陰影。
    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ā)展中,當沿著z軸的各個位置的光源受到材料片的阻擋時,就會產(chǎn)生陰影。在網(wǎng)絡上,僅通過操縱y軸來描繪陰影。下面的例子展示了6 dp高度時的卡片。
whatismaterial_environment_shadow1.png

Shadow cast by key light
主光源生成的陰影

whatismaterial_environment_shadow2.png

Shadow cast by ambient light
周圍光源生成的陰影

whatismaterial_environment_shadow3.png

Combined shadow from key and ambient lights
聯(lián)合主光源和周圍光線生成的陰影

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.Introduction - 介紹 We challenged ourselves to create a v...
    兩個朋友指甲閱讀 1,652評論 0 5
  • MD,視覺語言,它所設計的世界,來源于真實的物理現(xiàn)實(降低用戶的學習成本,使其快速上手),但又高于現(xiàn)實(大膽而理想...
    Rangethan閱讀 2,131評論 0 2
  • 天下之事,分合交替,分久必合,合久必分。 夏一統(tǒng),商周繼之,春秋戰(zhàn)國亂之;秦一統(tǒng),兩漢繼之,三國魏晉南北朝亂之;隋...
    百家和鳴閱讀 450評論 0 0
  • 魯迅說: 男人兩大愛好:拉良家婦女下水;勸風塵女子從良。 女人兩大愛好:和窮人總是在談錢;和富人談的全是感情! 而...
  • 攔截器是指通過統(tǒng)一攔截從瀏覽器發(fā)往服務器的請求來完成功能的增強 應用場景:解決一些共性問題,比如權(quán)限驗證、亂碼等 ...
    fangzy0723閱讀 895評論 1 1

友情鏈接更多精彩內(nèi)容