字體 Typography
中文字體：Source Han Sans / Noto
英文字體：Roboto
| 元素 | 字重 | 字號(hào) | 行距 | 字間距 |
|---|---|---|---|---|
| App bar | Medium | 20sp | - | - |
| Buttons | Medium | 15sp | - | 10 |
| Headline | Regular | 24sp | 34dp | 0 |
| Title | Medium | 21sp | - | 5 |
| Subheading | Regular | 17sp | 30dp | 10 |
| Body 1 | Regular | 15sp | 23dp | 10 |
| Body 2 | Bold | 15sp | 26dp | 10 |
| Caption | Regular | 13sp | - | 20 |
圖標(biāo) icons
| 圖標(biāo)用途 | mdpi (160dpi) | hdpi (240dpi) | xhdpi (320dpi) | xxhdpi (480dpi) | xxxhdpi (640dpi) |
|---|---|---|---|---|---|
| 應(yīng)用圖標(biāo) | 48 x 48 px | 72 x 72 px | 96 x 96 px | 144 x 144 px | 192 x 192 px |
| 系統(tǒng)圖標(biāo) | 24 x 24 px | 36 x 36 px | 48 x 48 px | 72 x 72 px | 196 x 196 px |
應(yīng)用圖標(biāo) Product icons
-
方形
高度：152dp 寬度：152dp
-
圓形
直徑：176dp
-
垂直長(zhǎng)方形
高度：176dp 寬度：128dp
-
水平長(zhǎng)方形
高度：128dp 寬度：176dp
系統(tǒng)圖標(biāo) System icons
-
方形
高度：18dp 寬度：18dp
-
圓形
直徑：20dp
-
垂直長(zhǎng)方形
高度：20dp 寬度：16dp
-
水平長(zhǎng)方形
高度：16dp 寬度：20dp
快捷圖標(biāo) Shortcut icon
-
實(shí)際面積
高度：44dp 寬度：44dp
-
總面積
高度：48dp 寬度：48dp
-
系統(tǒng)圖標(biāo)尺寸
高度：24dp 寬度：24dp
-
實(shí)際面積位置
剩余高度：24dp
剩余寬度：24dp
單位和度量 Units and measurements
dpi =屏幕寬度（或高度）像素 / 屏幕寬度（或高度）英寸
dp =(寬度像素 x 160)/ dpi
| 名稱 | 分辨率 px | dpi | 像素比 | 示例 dp | 對(duì)應(yīng)像素 |
|---|---|---|---|---|---|
| xxxhdpi | 2160 x 3840 | 640 | 4.0 | 48dp | 192px |
| xxhdpi | 1080 x 1920 | 480 | 3.0 | 48dp | 144px |
| xhdpi | 720 x 1280 | 320 | 2.0 | 48dp | 96px |
| hdpi | 480 x 800 | 240 | 1.5 | 48dp | 72px |
| mdpi | 320 x 480 | 160 | 1.0 | 48dp | 48px |
UI組件布局 Element Layout
列表 List
-
垂直邊框和水平外邊距
邊框左右外邊距各16dp
帶有圖標(biāo)或者頭像的內(nèi)容有 72dp 的左邊距。
-
垂直邊距
1. 狀態(tài)欄：24dp
2. 工具欄：56dp
3. 子標(biāo)題：48dp
4. 列表項(xiàng)：72dp -
垂直邊框和水平外邊距
邊框左右外邊距各16dp
帶有圖標(biāo)或者頭像的內(nèi)容有 72dp 的左邊距。
-
垂直邊距
1. 狀態(tài)欄：24dp
2. 工具欄：56dp
3. 標(biāo)題和列表項(xiàng)：48dp
4. 子標(biāo)題：48dp
5. 內(nèi)容區(qū)域間的距離：8dp
詳情視圖 Detail view
-
垂直邊框和水平外邊距
邊框左右外邊距各16dp
帶有圖標(biāo)或者頭像的內(nèi)容有 72dp 的左邊距。
右邊圖標(biāo)的右邊距為32dp
-
垂直邊距
1. 狀態(tài)欄：24dp
2. 工具欄：56dp
3. 內(nèi)容區(qū)域間的距離：8dp
4. 列表項(xiàng)：72dp -
垂直邊框和水平外邊距
邊框左右外邊距各16dp
帶有圖標(biāo)或者頭像的內(nèi)容有 72dp 的左邊距。
彈出菜單與右邊框的距離為56dp
-
垂直邊距
1. 列表項(xiàng)：48dp
2. 內(nèi)容區(qū)域間的距離：8dp
3. 導(dǎo)航右邊距：56dp
觸控區(qū)域尺寸 Touch target size
-
頭像：40dp
圖標(biāo)：24dp
觸控區(qū)：48dp
-
實(shí)例
-
觸控區(qū)域高度：48dp
按鈕高度：36dp
-
實(shí)例
應(yīng)用欄 App bar
-
應(yīng)用欄高度：56dp
應(yīng)用欄左右內(nèi)邊距：16dp
應(yīng)用欄圖標(biāo)上、下、左內(nèi)邊距：16dp
應(yīng)用欄標(biāo)題左內(nèi)邊距：72dp
應(yīng)用欄標(biāo)題下內(nèi)邊距：20dp -
應(yīng)用欄高度：128dp
-
操作欄高度：56dp
標(biāo)題欄高度：80dp
標(biāo)題欄底部?jī)?nèi)邊距：8dp
描述區(qū)域高度：72dp
描述區(qū)底部?jī)?nèi)邊距：16dp