谷歌官方設(shè)計(jì)規(guī)范:https://material.io/guidelines/material-design/
谷歌中文設(shè)計(jì)規(guī)范:http://design.1sters.com/
設(shè)計(jì)尺寸
名稱 | 分辨率 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 |
字體
中文字體:Source Han Sans / Noto
英文字體:Roboto
常用字號(hào)排版(長(zhǎng)篇幅正文,每行建議60字符(英文)左右。短文本,建議每行30字符(英文)左右。)
1. 12sp 小字提示
2. 14sp(桌面端13sp) 正文/按鈕文字
3. 16sp(桌面端15sp) 小標(biāo)題
4. 20sp Appbar文字
5. 24sp 大標(biāo)題
6. 34sp/45sp/56sp/112sp 超大號(hào)文字
元素 | 字重 | 字號(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
系統(tǒng)圖標(biāo) System icons
快捷圖標(biāo) Shortcut icon
單位和度量 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 |
布局
所有可操作元素最小點(diǎn)擊區(qū)域尺寸:48dp X 48dp。
柵格系統(tǒng)的最小單位是8dp,一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。以下是一些常見(jiàn)的尺寸與距離:
另外注意56dp這個(gè)數(shù)字,許多尺寸可變的控件,比如對(duì)話框、菜單等,寬度都可以按56的整數(shù)倍來(lái)設(shè)計(jì)。
還有非常多規(guī)范,不詳細(xì)列舉,遵循8dp柵格很容易找到適合的尺寸與距離。平板與PC上留白更多,距離與尺寸要相應(yīng)增大。