Material design - 尺寸參考 部分（筆記）

Overview

App bar height: 56dp
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp

The app bar with significantly increased height for prominence

App bar height = 128dp

Action area height: 56dp

Title area height: 80dp

Title area bottom padding: 8dp

Description area height: 72dp

Description area bottom padding: 16dp

List

A two-column, left-aligned list with a 56dp floating action button.

Keylines and margins

Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp.

Vertical spacing

1. Status bar: 24dp

2. Toolbar: 56dp

3. Subtitle: 48dp

4. List item: 72dp

Keylines and margins

Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp

Vertical spacing

1. Status bar: 24dp

2. Toolbar: 56dp

3. Title and list items: 72dp

4. Subtitle: 48dp

5. Space between content areas: 8dp

Detail view

A detail card with a 56dp floating action button.

Keylines and margins
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.

Vertical spacing

1. Status bar: 24dp

2. Toolbar: 56dp

3. Space between content areas: 8dp

4. List item: 72dp

Navigation drawer

A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.

Keylines and margins
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.

Vertical spacing

1. Account menu and list items: 48dp

2. Space between content areas: 8dp

3. Navigation right margin: 56dp