Understanding layout

Understanding layout 

レイアウトの理解

 

Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.

マテリアルデザインのレイアウトは、均一な要素と間隔を使用して、プラットフォーム、環境、および画面サイズの一貫性を促進します。

Usage 

使用法

Principles

原則

UIs should use intuitive and predictable layouts, with consistent UI regions and spatial organization. Layouts should use a consistent grid, keylines, and padding. Layouts are...

READ MORE

Predictable

予測しやすい

UIs should use intuitive and predictable layouts, with consistent UI regions and spatial organization.

UIは、一貫性のあるUIリージョンと空間構成を使用して、直観的かつ予測可能なレイアウトを使用する必要があります。

Consistent

一貫性のある

Layouts should use a consistent grid, keylines, and padding.

レイアウトでは、一貫したグリッド、キーライン、およびパディングを使用する必要があります。

Responsive

レスポンシブである

Layouts are adaptive and react to input from the user, device, and screen elements.

レイアウトはレスポンシブであり、ユーザー、デバイス、および画面要素からの入力に反応します。

Structure

構造

Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout. Smaller components, such...

READ MORE

Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout.

マテリアルデザインのレイアウトは視覚的にバランスが取れています。 ほとんどの測定値は8dpグリッドに合わせて配置され、間隔と全体のレイアウトの両方を調整します。

Smaller components, such as iconography and typography, can align to a 4dp grid.

図形やタイポグラフィなどの小さなコンポーネントは、4dpのグリッドに揃えることができます。

8dp and 4dp units

Pixel density 

画素密度

Screen pixel density and resolution vary depending on the platform. Device-independent pixels and scalable pixels are units that provide a flexible way to accommodate a design across platforms.

画面のピクセル密度と解像度は、プラットフォームによって異なります。 非デバイス依存ピクセルとスケーラブルピクセルは、プラットフォーム間の設計に柔軟に対応できるようにする単位です。

Calculating pixel density

ピクセル密度の計算

The number of pixels that fit into an inch is referred to as pixel density. High-density screens have more pixels per inch than low-density ones....

READ MORE

The number of pixels that fit into an inch is referred to as pixel density. High-density screens have more pixels per inch than low-density ones. As a result, UI elements of the same pixel dimensions appear larger on low-density screens, and smaller on high-density screens.

1インチに収まるピクセルの数は、ピクセル密度と呼ばれます。 高密度スクリーンは、低密度スクリーンよりも1インチあたりのピクセル数が多いです。 その結果、同じピクセル寸法のUI要素は、低密度画面では大きく、高密度画面では小さく表示されます。

To calculate screen density, you can use this equation:

画面密度を計算するには、次の式を使用します。

Screen density = Screen width (or height) in pixels / Screen width (or height) in inches

画面の密度=画面の幅（または高さ）/画面の幅（または高さ）をインチ

High-density display

Lower density display

Density independence

密度非依存

Density independence refers to the uniform display of UI elements on screens with different densities. Density-independent pixels, written as dp (pronounced “dips”), are flexible units...

READ MORE

Density independence refers to the uniform display of UI elements on screens with different densities.

密度非依存とは、密度の異なる画面上でのUI要素の均一な表示を指します。

Density-independent pixels, written as dp (pronounced “dips”), are flexible units that scale to have uniform dimensions on any screen. Material UIs use density-independent pixels to display elements consistently on screens with different densities.

密度に依存しないピクセルは、dp（「ディップ」と発音されます）と呼ばれ、任意の画面上で均一な寸法になるように拡大縮小する柔軟な単位です。 マテリアルUIは、濃度に依存しないピクセルを使用して、異なる濃度のスクリーン上で一貫して要素を表示します。

1. Low-density screen displayed with density independence
2. High-density screen displayed with density independence

Pixel density on Android

Androidのピクセル密度

When developing an Android app, use dp to display elements uniformly on screens with different densities. A dp is equal to one physical pixel on...

READ MORE

When developing an Android app, use dp to display elements uniformly on screens with different densities. A dp is equal to one physical pixel on a screen with a density of 160.

Androidアプリを開発するときは、密度の異なる画面上であっても同じく見えるように表示するにはdpを使用します。 dpは、密度が160の画面上の1つの物理ピクセルに等しい。

To calculate dp:

dp = (width in pixels * 160) / screen density

Screen physical width	Screen density	Screen width in pixels	Screen width in dps
1.5 in	120	180 px	240 dp
1.5 in	160	240 px
1.5 in	240	360 px

Scalable pixels (sp)

スケーラブルピクセル（sp）

Scalable pixels (sp) serve the same function as density-independent pixels (dp), but for fonts. The default value of an sp is the same as the default value for a dp.

スケーラブルピクセル（sp）は、密度非依存ピクセル（dp）と同じ機能を果たしますが、フォントに対しては異なります。spのデフォルト値は、dpのデフォルト値と同じです。

The primary difference between an sp and a dp is that sp’s preserve a user's font settings. Users who have larger text settings for accessibility will see font sizes match their text size preferences.

spとdpの主な違いは、spはユーザーのフォント設定を保持していることです。 アクセシビリティのためのテキスト設定がより大きいユーザーは、フォントサイズがテキストサイズのプリファレンスと一致することがわかります。

Pixel density on iOS

iOSのピクセル密度

iOS determines density using logical resolution, which measures its units in points. Points are scaled using a Native Scale factor, which map to a device's...

READ MORE

Logical resolution

論理解像度

iOS determines density using logical resolution, which measures its units in points. Points are scaled using a Native Scale factor, which map to a device's native resolution (in pixels).

iOSは、単位をポイント単位で測定する論理解像度を使用して密度を決定します。 ポイントは、デバイスのネイティブ解像度（ピクセル単位）にマッピングされるネイティブスケールファクタを使用してスケーリングされます。

For example, when designing for the iPhone X, you would design for a logical resolution of 375 x 812 points. When rendered, elements are processed by the graphics hardware to fill the iPhone X's 1125 x 2436 pixel screen.

たとえば、iPhone Xを設計するときは、375 x 812ポイントの論理解像度を設計します。 レンダリングされると、要素はグラフィックスハードウェアによって処理され、iPhone Xの1125 x 2436ピクセルの画面に表示されます。

 

Displays

Apple iOS' Documentation.

Related Linkarrow_downward

 

Paintcode

Guide to iPhone Resolutions.

Related Linkarrow_downward

Units for iOS

When designing for iOS,
use points (pts).

iOS用に設計するときは、ポイント（pts）を使用します。

Learn more:

• Apple iOS' Documentation on Displays
• PaintCode's Guide to iPhone Resolutions

Pixel density on the web

Use the device's logical resolution, which scales to the device's screen resolution. When designing for the web, replace dp with px (for pixel).

READ MORE

Logical resolution

Use the device's logical resolution, which scales to the device's screen resolution.

デバイスの画面解像度に合わせて、デバイスの論理解像度を使用します。

Units for the web

When designing for the web, replace dp with px (for pixel).

ウェブを設計するときは、dpをpx（ピクセルの場合）に置き換えます。