Elevation
Elevation
高度
Elevation is the relative distance between two surfaces along the z-axis.
Elevationは、z軸に沿った2つの面の相対的な距離です。
Component elevation values
- Nav drawer: 16dp
- App bar: 4dp
- Card: 1dp to 8dp
- FAB: 6dp
- Button: 2dp to 8dp
- Dialog: 24dp
Elevation in Material Design
マテリアルデザインの高度
Measuring elevation
高度の測定
Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of...
Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows
マテリアルデザインの高度は、マテリアルサーフェス間の距離として測定されます。 1つのマテリアルサーフェスの前面から別のマテリアルサーフェスの前面までの距離は、密度に依存しないピクセル（dps）ではz軸に沿って測定され、シャドウを使用して（デフォルトでは）示されます
Surfaces at the same elevation can appear differently when other surfaces are behind them.
同じ高さのサーフェスは、他のサーフェスがその背後にあるときに、異なる表示をすることができます。
- Both surfaces A and B are at the same 8dp elevation. They cast different shadows because Surface B is in front of another surface (C) that already has elevation.
面AとBは同じ8dpの高さにあります。 表面Bは既に仰角を持っている別の表面（C）の前にあるので、それらは異なる影を投じる。 - Elevation differences between surfaces (A), (B), and (C), as viewed from the side.
側面から見た面（A）、（B）、（C）の高低差。
The elevation system
高度系
All Material Design surfaces, and components, have elevation values. Surfaces at different elevations do the following: Elevation can be depicted using shadows or other visual...
All Material Design surfaces, and components, have elevation values.
すべてのマテリアルデザインサーフェスとコンポーネントには高度値があります。
Surfaces at different elevations do the following:
異なる高度のサーフェスでは、次のことが行われます。
- Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars
アプリケーションバーの背後にあるコンテンツのスクロールなど、サーフェスを他のサーフェスの前後に移動させる - Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection
フローティングアクションボタンの影が、そのボタンがカードコレクションとは別の階層にあることを示すなど、空間関係を反映 - Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces
他のサーフェスの前に一時的に表示されるダイアログなど、最高の位置にあるオブジェクトに注意を集中させる
Elevation can be depicted using shadows or other visual cues, such as surface fills or opacities.
表面の塗りつぶしや不透明度などの影や他の視覚的な手がかりを使用して標高を描くことができます。
Material Design displays elevation using shadows.
マテリアルデザインは、影を使用して標高を表示します。
Caution.
Different surface fills can be used to express elevation instead of shadows.
異なる表面塗りつぶしを使用して、影の代わりに高度を表現することができます。
Caution.
Opacity can be used to express elevation instead of shadows.
不透明度は、影の代わりに高度を表現するために使用できます。
Resting elevation
静止時高度
Resting elevations are starting elevation values given to components by default. Components move from resting elevations in response to the user or a system event....
Resting elevations are starting elevation values given to components by default. Components move from resting elevations in response to the user or a system event. All Material components have resting elevations that are the same for each type of component. For example, all cards have the same resting elevations as each other, and a dialog has the same resting elevation as other dialogs.
静止時高度は、デフォルトでコンポーネントに与えられた初期高度値です。 コンポーネントは、ユーザーまたはシステムイベントに応答して静止時高度から移動します。 すべてのマテリアルコンポーネントは、各コンポーネントタイプごとに同じ静止時高度を持ちます。 例えば、すべてのカードは同じ静止時高度を持ち、ダイアログは他のダイアログと同じ高度を持ちます。
Resting elevation and environment
静止時高度と環境
Resting elevations vary based on the environment, platform, or app. The resting elevations on mobile are designed to provide visual cues, like shadows, to indicate when components are interactive. In contrast, resting elevations on desktop are shallower because other cues, like hover states, communicate when a component is interactive. For example, cards at 0dp elevation on desktop are outlined with a stroke.
静止時高度は、環境、プラットフォーム、またはアプリによって異なります。 モバイル上の静止時高度は、コンポーネントがインタラクティブであることを示すために影などの視覚的手がかりを提供するように設計されています。 対照的に、ホバー状態のような他の手がかりは、コンポーネントがインタラクティブであることを示すので、デスクトップ上の静止時高度は浅くなります。 たとえば、デスクトップの0dpの高さにあるカードは、ストロークで輪郭が描かれます。
- Resting elevations on mobile for an app bar (A), cards (B), and a floating action button (C), as viewed from the front
正面から見たアプリケーションバー（A）、カード（B）、フローティングアクションボタン（C）のモバイルでの標高の上昇 - The same components, as viewed from the side
側面から見た同じコンポーネント
- Resting elevations on desktop for an app bar (A), floating action button (B), and cards (C), as viewed from the front
アプリバー（A）、フローティングアクションボタン（B）、およびカード（C）のデスクトップ上の正面から見た仰角の静止 - The same components, as viewed from the side
側面から見た同じコンポーネント
Changing elevation
高度の入れ替え
Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the...
Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the default elevations components move to when not resting.
コンポーネントは、ユーザ入力またはシステムイベントに応じて標高を変更することができます。 この場合、コンポーネントは、既定の高度のコンポーネントが動いている時に使用される、あらかじめ設定された動的な高度のオフセット（余白？）に移動します。
Dynamic elevation offsets are the same across each type of component. For example, all cards use the same offset as other cards, and all floating action buttons use the same offset as other floating action buttons.
動的な高度オフセットは、各タイプのコンポーネントで共通です。 たとえば、すべてのカードは他のカードと同じオフセットを使用し、すべての浮動アクションボタンは他の浮動アクションボタンと同じオフセットを使用します。
Once the user input (or system event) is completed or cancelled, the component swiftly returns to its resting elevation.
ユーザ入力（またはシステムイベント）が完了またはキャンセルされると、コンポーネントは安静時の高度に迅速に戻ります。
Some components respond to user input with increases in elevation.
一部のコンポーネントは、ユーザ入力に応答して仰角の増加に対応します。
- Upon user input, this button increases its elevation from 2dp to 8dp
ユーザの入力時に、このボタンは2dpから8dpに上昇します - The same component, as viewed from the side
側面から見た同じコンポーネント
Elevation interference
高度の干渉
When a component moves between its resting elevation and dynamic elevation offset, it shouldn’t collide with other components. To avoid these kinds of collisions, components...
When a component moves between its resting elevation and dynamic elevation offset, it shouldn’t collide with other components.
コンポーネントが静止高度と動的高度オフセットの間を移動するとき、コンポーネントは他のコンポーネントと衝突してはなりません。
To avoid these kinds of collisions, components can move out of the way. For example, if increasing a card’s elevation positions it to pass through a floating action button, that button can disappear or move off-screen before the collision occurs.
これらの種類の衝突を避けるために、コンポーネントは途中で移動できます。 たとえば、カードの高さを上げて浮動アクションボタンを通過すると、そのボタンは、衝突が発生する前に消えたり画面外に移動したりできます。
You can also design your app’s layout to avoid collisions, such as placing a floating action button beside cards, instead of directly above them.
アプリのレイアウトを設計して、カードのすぐ上ではなく、カードの横に浮動アクションボタンを配置するなど、衝突を避けることもできます。
Temporarily reposition or remove components which might collide with transitioning components. Front (1) and side (2) views of a card stream on a mobile device, demonstrating how a floating action button (B) disappears when a card (A) is picked up.
移行中のコンポーネントと衝突する可能性のあるコンポーネントを一時的に再配置または削除します。 カード（A）がピックアップされたときにフローティングアクションボタン（B）が消える様子を示す、モバイルデバイス上のカードストリームの前面（1）と側面（2）
Design your app to minimize opportunities for elevation-based interference.
エレベーションベースの干渉の可能性を最小限に抑えるようにアプリケーションを設計します。
Depicting elevation
高度の表現
To successfully depict elevation, a surface must show:
高度を正しく描写するために、サーフェスは以下を表示する：
- Surface edges, contrasting the surface from its surroundings
表面と周囲とのコントラスト - Overlap with other surfaces, either at rest or in motion
他の表面との重なり、（静止時、動作中問わず） - Distance from other surfaces
他の面からの距離
Edges help to express the tactile quality of Material surfaces. They show where one surface ends and another begins by separating different parts of a...
Edges help to express the tactile quality of Material surfaces. They show where one surface ends and another begins by separating different parts of a UI into identifiable components. For example, the edges of an app bar show that it is separate from a grid list, communicating to the user that the grid list scrolls independently of the app bar.
エッジは、マテリアルサーフェスの触覚品質を表現するのに役立ちます。 UIの異なる部分を識別可能なコンポーネントに分割することで、一方のサーフェスがどこで終わり、もう一方のサーフェスがどこから始まるかを示します。 たとえば、アプリバーの端にグリッドリストとは別のものが表示され、グリッドリストがアプリバーとは独立してスクロールすることをユーザーに伝えます。
By default, Material surfaces use shadows to indicate edges. Other methods can be used to indicate edges, such as:
デフォルトでは、マテリアルサーフェスはエッジを示すためにシャドウを使用します。 他の方法を使用して、エッジを示すことができます。
- Giving surfaces different colors
サーフェスの色を変える - Giving surfaces different opacities
表面に異なる不透明度を与える
Edges must create sufficient contrast between surfaces (by meeting or exceeding accessible contrast ratios) for them to be seen as separate from one another.
エッジは、互いに分離して見えるように、（アクセス可能なコントラスト比を満たすか、またはそれ以上の）十分なコントラストを作成する必要があります。
Without showing edges, it’s unclear if this image contains one or more surfaces.
エッジを表示せずに、この画像に1つ以上のサーフェスが含まれているかどうかは不明です。
When a surface overlaps another surface, either partially or completely, it indicates that the two surfaces occupy different elevations (but not the degree, or amount,...
When a surface overlaps another surface, either partially or completely, it indicates that the two surfaces occupy different elevations (but not the degree, or amount, of difference between them). Surfaces at higher elevations appear in front of those at lower elevations, meaning they are positioned at different elevations along the z-axis. Surfaces may overlap one another by default, or become overlapped as a result of motion that changes their position in the UI.
サーフェスが部分的にまたは完全に別のサーフェスと重なっている場合、2つのサーフェスは異なる高度に存在することをを意味します（サーフェス間の高度差異の量を示すものではありません）。 より高い標高の表面は、標高の低い標高の前面に現れます。つまり、Z軸に沿って異なる標高に位置しています。 サーフェスは、デフォルトで互いに重なり合ったり、UIの位置を変更するモーションの結果として重なったりすることがあります。
When surfaces have different opacities or insufficient contrast from one another, it can make it difficult to tell which surface is in front of another. Avoid ambiguous overlap by ensuring surface edges are clearly defined.
サーフェスが異なる不透明度を持つ、または互いにコントラストが不十分な場合は、どちらのサーフェスが別のサーフェスの前にあるかを知ることが難しくなります。 サーフェスの淵を明確にすることで、あいまいなオーバーラップは避けてください。
- Shadows show surface edges, surface overlap, and the degree of elevation.
影は、サーフェスエッジ、サーフェスオーバーラップ、および高度の度合いを示します。 - Different surface colors show surface edges and overlap, but not the degree of elevation.
異なる表面色は表面のエッジと重なりを示しますが、高さの程度は示されません。 - Opacity shows surface edges and overlap, but not the degree of elevation.
不透明度はサーフェスエッジとオーバーラップを示しますが、高さの度合いは示していません。
Do.
The top app bar overlaps the cards, indicating it is in front of the cards. This overlap doesn’t express the degree of elevation between the surfaces.
一番上のアプリバーがカードの上に重なり、カードの前にあることを示します。 このオーバーラップは、表面間の高さの程度を表していません。
Distance
距離
The degree of elevation difference between surfaces can be expressed using scrimmed backgrounds, or using shadows.
The degree of elevation difference between surfaces can be expressed using scrimmed backgrounds, or using shadows.
サーフェス間の高低差の度合いは、スクリメージをかけた背景やシャドウを使用して表現できます。
Scrimmed backgrounds
スクライドされた背景
When the background is scrimmed in a UI, it expresses that the content above it is at a higher elevation. Scrimmed backgrounds express large, but unspecified, amounts of elevation.
背景がUIでスクライミングされると、その上のコンテンツがより高い高度にあることが表現されます。 スクライドされた背景が描かれた背景は、不特定ながら大きく高度が異なることを表現します。
Do.
A scrimmed background can indicate surface overlap, but not the degree of elevation.
Don’t.
The lack of shadows or scrimmed background makes it difficult to distinguish the dialog box from the background.
影がないかスクリムをしていないと、ダイアログボックスを背景と区別することが難しくなります。
Shadows
影
Shadows can express the degree of elevation between surfaces in ways that other techniques cannot.
影は他のテクニックではできない方法で表面間の高度を表現することができます。
Both a shadow’s size and amount of softness or diffusion express the degree of distance between two surfaces. For example, a surface with a shadow that is small and sharp indicates a surface’s close proximity to the surface behind it. Larger, softer shadows express more distance.
影の大きさと柔らかさまたは拡散量の両方は、2つの面の間の距離の程度を表します。 たとえば、シャドウが小さくシャープであるサーフェスは、サーフェスがサーフェスの後ろのサーフェスに近接していることを示します。 より大きく、より柔らかい影は、より多くの距離を表現します。
Subtle differences in shadow size and diffusion communicate:
影の大きさと拡散の微妙な違いが伝える：
- A detailed degree of distance between two surfaces
2つのサーフェス間の詳細な距離 - Elevation differences between non-overlapping surfaces
オーバーラップしていないサーフェス間の標高差
Shadows show the edges of a surface and its degree of elevation against the background. They also make differences in surface elevations perceptible between non-overlapping surfaces.
影は、サーフェスのエッジと、そのサーフェスの高度を背景に対して表示します。 それらはまた、重なり合わないサーフィスの間で知覚可能なサーフィスの高低差を生じさせます。
Do.
Shadows make differences in surface elevation perceptible. The smaller, sharper shadow of the app bar (1) indicates it is at a lower elevation than the menu (2), which has a larger, softer shadow.
陰影は表面の高さを知覚可能にする。 アプリケーションバー（1）の小さくシャープな影は、より大きくて柔らかい影を持つメニュー（2）よりも低い高度にあることを示します。
Don’t.
The lack of shadows or other visual cues to indicate edges and surface overlap creates insufficient contrast between surfaces. As a result, it’s difficult to understand which pieces of this UI are grouped together.
エッジやサーフェスの重なりを示すシャドーや他の視覚的な手がかりがないと、サーフェス間のコントラストが不十分になります。 その結果、このUIのどの部分がグループ化されているのかを理解することは困難です。
Don’t.
Don’t use shadows for style only.
単なる装飾として影を使用しないでください。
Motion and elevation
動きと高度
Motion can emphasize elevation using the following methods: Changes in shadow size and softness emphasize changes in elevation. A surface may overlap another upon animation,...
Motion can emphasize elevation using the following methods:
動きは、以下の方法を使用して標高を強調できます。
- Changes in shadows
影の変化 - Displaying overlap
オーバーラップを表示する - Pushing
押し出す - Scaling
拡大縮小 - Parallax
パララックス
Changes in shadows
影の変化
Changes in shadow size and softness emphasize changes in elevation.
影の大きさや柔らかさの変化は標高の変化を強調します。
The shadow grows to emphasize the card is rising.
カードが上がっていることを強調するために影が広がります。
Displaying overlap
オーバーラップを表示する
A surface may overlap another upon animation, either partially or completely, showing which surface is in front of the other.
サーフェスは、部分的にまたは完全に、アニメーションの際に別のサーフェスが重なり、どちらのサーフェスが他のサーフェスの前にあるかを示します。
As it expands, a surface may show elevation by overlapping nearby surfaces.
拡大すると、サーフェスは近くのサーフェスをオーバーラップさせて仰角を表示することがあります。
Parallax
パララックス
Multiple surfaces at different elevations that move at different speeds can create a sense of depth and place focus on foreground content.
異なる標高で複数のサーフェスが異なる速度で移動すると、深さの感覚が形成され、フォアグラウンドのコンテンツにフォーカスが置かれます。
The foreground surface moves faster than the background image, creating a sense of depth.
前景の表面は背景のイメージよりも速く動いて、深みの感覚を作り出します。
Combining motion techniques
モーション技術の組み合わせ
Elevation can be emphasized through a combination of motion techniques.
高度は、モーション技術の組み合わせによって強調することができます。
Parallax motion and scaling emphasize which surfaces are in front of others.
視差の動きとスケーリングは、どのサーフェスが他のサーフェスの前にあるかを強調します。
Elevation hierarchy
高度階層
Content relates to other content depending on whether they are at similar or different elevations.
コンテンツは、類似しているか異なる高度にあるかに応じて、他のコンテンツに関連します。
Content at different elevations
異なる高度のコンテンツ
Surfaces in front of other surfaces typically:
Surfaces in front of other surfaces typically:
- Contain more important content
より重要なコンテンツを含む - Focus attention, such as a dialog
ダイアログなどの注目を集める - Control the surfaces behind it, such as actions in an app bar
アプリケーションバーのアクションなど、その背後にあるサーフェスを制御する
Front (1) and side (2) views of a desktop interface demonstrate how more important content that is of primary focus (B) appears in front of content that is of secondary focus, like footnotes (A).
デスクトップインターフェイスのフロント（1）とサイド（2）ビューは、プライマリフォーカス（B）の重要なコンテンツが、脚注（A）のようにセカンダリフォーカスのコンテンツの前に表示される方法を示します。
Content on coplanar surfaces
同一平面上のコンテンツ
Positioning surfaces at the same elevation makes them coplanar, and may indicate they contain content of equal importance as one another. For example, all cards...
Positioning surfaces at the same elevation makes them coplanar, and may indicate they contain content of equal importance as one another. For example, all cards in a collection have equal importance.
同じ高さにサーフェスを配置すると、サーフェスが同一平面になり、互いに同等の重要性をもった内容が含まれていることを示せます。 たとえば、コレクション内のすべてのカードの重要度は同じです。
- Cards (A, B), as viewed from the front, have the same elevation and move together, reinforcing that their content has similar hierarchy
正面から見たカード（A、B）は同じ仰角を持ち、一緒に動いて内容が類似していることを補強します - The same components, as viewed from the side
側面から見た同じコンポーネント
Surfaces that don’t express elevation can appear coplanar. For surfaces that don’t express elevation, you can communicate hierarchy differences through their content and by adjusting their horizontal and vertical layout position to suggest their relative hierarchy levels.
高度を持たないサーフェスは同一平面上に表示されます。 高度を持たないサーフェスの場合は、コンテンツの階層的な違いを伝えるために、相対的な階層レベルを示唆するように水平と垂直のレイアウト位置を調整することができます。
For example, on a dashboard with coplanar surfaces, detail content is placed next to parent content, based on the direction a language’s text is displayed.
- A desktop UI, as viewed from the front, demonstrates how the left-to-right positioning of surfaces at the same elevation (A, B, C) communicates hierarchy based on English language content.
正面から見たデスクトップUIは、同じ高度（A、B、C）での左から右へのサーフェスの配置が英語のコンテンツに基づいて階層をどのように伝達するかを示しています。（左上から右下へと読み進めることを「English language content」と言っている？） - The same components, as viewed from the side
側面から見た同じコンポーネント
Default elevations
デフォルトの高さ
All elements have default values for resting elevation and dynamic elevation offsets. Certain components are positioned at higher elevations than others, establishing a consistent elevation order across all components. For example, dialogs always appear in front of all other components.
すべての要素には、静止高度と動的高度のオフセットのデフォルト値があります。 特定のコンポーネントは、他のコンポーネントよりも高い高度に配置され、すべてのコンポーネントにわたって一貫した昇順を確立します。 たとえば、ダイアログは常に他のすべてのコンポーネントの前に表示されます。
The following table lists default values for resting elevation and dynamic elevation offsets.
次の表に、静止高度と動的仰角オフセットのデフォルト値を示します。
Table of default elevation values
Component Default elevation values (dp) Dialog 24 Modal bottom sheet Modal side sheet 16 Navigation drawer 16 Floating action button (FAB - pressed) 12 Standard...
|
Component |
Default elevation values (dp) |
|
Dialog |
24 |
|
Modal bottom sheet Modal side sheet |
16 |
|
Navigation drawer |
16 |
|
Floating action button (FAB - pressed) |
12 |
|
Standard bottom sheet Standard side sheet |
8 |
|
Bottom navigation bar |
8 |
|
Bottom app bar |
8 |
|
Menus and sub menus |
8 |
|
Card (when picked up) |
8 |
|
Contained button (pressed state) |
8 |
|
Floating action button (FAB - resting elevation) |
6 |
|
Top app bar (scrolled state) |
4 |
|
Top app bar (resting elevation) |
0 or 4 |
|
Refresh indicator |
3 |
|
Contained button (resting elevation) |
2 |
|
Search bar (resting elevation) |
1 |
|
Card (resting elevation) |
1 |
|
Switch |
1 |
|
Text button |
0 |
|
Standard side sheet |
0 |
Diagram of default elevation values
デフォルトの高度値の図
Cross-section diagram showing the resting elevation and dynamic elevation offsets for multiple components.
複数のコンポーネントの静止高度と動的高度のオフセットを示す断面図。
