All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid.
Example of baseline grid
Example of baseline grid
Type aligns to a 4dp baseline grid. See detailed information ontypography.
Example of typography in a baseline grid
The following templates and examples contain keylines, spacing guidance, and sample screens for elements on mobile, tablet, and desktop.
List
A two-column, left-aligned list with a 56dp floating action button.
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp.
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Detail view
A detail card with a 56dp floating action button.
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.
Navigation drawer
A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.
List with detail view
Left-aligned list with a right-aligned floating action button
Screen edge left and right margins: 24dp
Content left margin from screen edge: 80dp
Card left and right padding: 24dp
Card content left padding: 104dp
List with detail view
Left-aligned list with a left-aligned floating action button
Screen edge left and right padding: 24dp
Icons’ vertical center distance from screen edge: 52dp
Nav item left padding from screen edge: 104dp
Content left margin from screen edge: 80dp
Card left and right padding: 32dp
Card nav item left padding: 96dp
Keylines and spacing blocks for desktop inherit grid rules from tablet and mobile, depending on window size.
Desktop full screen
Resized windows
The proportion of an element’s width to its height (called the aspect ratio) applies to both UI elements and screen size. It is written as width:height.
These aspect ratios are recommended:
For example:
Determine the width or height of your element for a chosen aspect ratio using the below formulas. The aspect ratio is always expressed as a fraction. For example, 3:2 is treated as 3/2.
Width = Aspect ratio * Height
Height = Width/Aspect ratio
Screen width
Example of screen width on mobile
Element width
Example of element width on mobile
An increment is a measurement used to determine the size and position of other elements in the app.
For example, you can define an increment as the height of a standard element, such as the action bar. If the action bar is 56dp tall, you may define one increment as equal to 56 x 56dp. Determine the size of other elements by how many 56dp increments wide or tall an element should be.
If an element is 8 increments wide, using 56dp as the increment size, the width is equal to 448dp.
Incremental keylines apply mostly to desktop, often to tablet, and infrequently to mobile. The number of increments varies based on window size.
This example card width has a horizontal increment of 8x.
The height of the example extended app bar is 2x the increment, and the width of the right panel is 5x the increment.
Increments can work across many elements in Material UI.
To ensure balanced information density and usability, touch targets should be at least 48 x 48 dp. In most cases, there should be 8dp or more space between them.
Size elements at least 48dp high and wide to ensure a physical size of about 9mm regardless of screen size. The recommended target size for touchscreen objects is 7-10mm.
Avatar: 40dp
Icon: 24dp
Touch target on both: 48dp
Example of touch targets
Touch target height: 48dp
Button height: 36dp
Example of touch targets and buttons
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
超级会员免费看
谷歌设计指南介绍了布局中的度量与关键线，包括基线网格、关键线和间距、比例关键线、按增量调整大小以及触摸目标大小。所有组件都针对手机、平板和桌面设备对齐到8dp的基线网格，图标在工具栏中对齐到4dp的基线网格。内容详细阐述了不同设备上的列表、详细视图、导航抽屉的布局模板和间距指导。
扫一扫
