Light and shadows
Material surfaces cast shadows when they obstruct light sources.
マテリアルサーフィスは、光源を遮ると影を投げかけます。
Light
Light and shadows
光と影
In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles...
In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles to create diffused, soft shadows, called ambient shadows.
マテリアルデザイン環境では、バーチャルライトがUIを照らします。 キーライトは、キーシャドウと呼ばれるシャープな、方向をもったシャドウを作成します。 アンビエントライトは、アンビエントシャドウと呼ばれる拡散した柔らかいシャドウを作成するために、すべての角度から表示されます。
Shadow cast by a key light
キーライトで陰影をキャスト
Shadow cast by ambient light
環境光による影のキャスト
Combined shadow from key and ambient lights
キーとアンビエントライトの組み合わせ
Elements use shadows on dark surfaces, even if they are less visible.
要素は、暗い面に対しても影を落とします。目立たなかったとしても。
Light sources
光源
Shadows in the Material environment are cast by a key light and ambient light. In Android and iOS development, shadows occur when light sources are...
Shadows in the Material environment are cast by a key light and ambient light. In Android and iOS development, shadows occur when light sources are blocked by Material surfaces at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows a card with an elevation of 6dp.
マテリアル環境の影は、キーライトとアンビエントライトによってキャストされます。 AndroidおよびiOS開発では、光源がz軸に沿ったさまざまな位置でマテリアルサーフェスによってブロックされると影が発生します。 ウェブ上では、影はy軸だけを操作することによって描かれています。 次の例は、標高が6dpのカードを示しています。
Don’t.
Shadow cast by key light
Don’t.
Shadow cast by ambient light
Do.
Combined shadow from key and ambient lights
Shadows
影
Usage
使用法
Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.
Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.
シャドウはサーフェス間の高さの程度を表すため、製品全体で一貫して使用する必要があります。
Elevation is depicted by consistent use of shadow.
標高は、一貫した影の使用によって表されます。
Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.
影の大きさは標高を反映します。 より高い隆起部の表面はより大きな影を有し、より低い隆起部の表面はより小さい影を有する。
Caution.
If your product doesn’t use shadows, convey elevation in other ways, such as through parallax motion.
プロダクトが影を使用しない場合は、視差の動きなど、他の方法で標高を伝えます。
Do.
The appearance of a shadow indicates the list item has been picked up and can move in front of its peers during this reorder interaction.
シャドウの外観は、リスト項目が選択されたことを示し、この並べ替えの相互作用中にピアの前に移動することができます。
Shadows & Motion
影と動き
Shadows provide useful cues about an surface’s direction of movement and whether the distance between surfaces is increasing or decreasing.
