佈局 Layout
Avatar: 40dp Icon: 24dp Touch target on both: 48dp
圖標大小均爲48dp 頭像padding 8dp 圖標padding 24dp
Touch target height: 48dp
Button height: 36dp
Examples of touch targets
懸浮按鈕 Floating Action Button
大小 56dp 裏面圖標 24dp
Floating action button
Interior icon: 24 x 24dp
Floating action button circle: 56 x 56dp
Mini floating action button
Interior icon: 24 x 24dp
Floating action button circle: 40 x 40dp
抽屜佈局 Navigation drawer
Typography
- Name: Roboto Medium, 14sp, #FFFFFF
- Email address: Roboto Regular, 14sp, #FFFFFF
- List item: Roboto Medium, 14sp, 87% #000000
- Subheader: Roboto Medium, 14sp, 54% #000000. It aligns to the 16dp keyline.
Keylines and margins
Icons align at screen left and right margins: 16dp
Icon values: 54% #000000
Content associated with an icon or avatar left margin: 72dp
Side nav width: Equal to the screen width minus the height of the action bar. In the example shown above, the nav drawer is 56dp from the right edge of the screen.
Maximum width: The maximum width of the nav drawer is 280dp on mobile and 320dp on tablet. This is calculated by multiplying the standard increment by five (the standard increment is 56dp on mobile and 64dp on tablet).
Use 16dp horizontal margins on mobile and 24dp on tablet
Vertical spacing
- Status bar: 24dp
- Subtitle: 56dp
- Space between content areas: 8dp
- Subtitles and list items: 48dp
Add 8dp padding at the top and bottom of every list grouping. One exception is at the top of a list with a subheader, because subheaders contain their own padding.