1.尺寸
(1)安卓的设计规范名为:Material Design
(2)主流设备:
- 4.5英寸:720 x 1280px (默认尺寸,类似于苹果的@2x),状态栏高:
50px
,导航栏:96px
,标签:96px(通常情况下不会出现)
- 5.0英寸:1080 x 1920px (类似@3x)
2 单位与图标
安卓中图像的单位是dp
,文字是sp
。
对于720的屏幕:1dp = 2 px
对于1080的屏幕 : 1dp = 3 px
以2倍图和3倍图举列:
图标px大小 | 图标dp大小 | 文字px大小 | 文字sp大小 | |
---|---|---|---|---|
@2x | 48 x 48 px | 24 dp | 24 px | 12 sp |
@3x | 72 x 72 px | 24 dp | 36 px | 12 sp |
3. 文字
(1)字体
- 中文:思源黑体
- 英文:roboto
(2)字体大小
- 页面标题:20sp
- 副文案: 12sp
- 主文案: 16sp
(3)用色(用纯黑和纯白加上透明度的变化,常见的数值有100%、87%、54%)
- 页面标题 :#FFFFFF 100%
- 副文案 :#000000 54%
- 主文案 :#000000 100%
(4)文字行间距:一般为字体大小的1.2 - 1.5倍
(常取1.5)
4. 用色
(1)安卓平台的调色板:https://www.materialui.co/colors
(2)用色规范:
- 导航栏/主题色 :选用
500饱和度
- 状态栏:选用
700饱和度
- 强调色:选用
700饱和度
- 调色板也可适用于 运营板块等
5. 图标
安卓图标以面性
为主,ios以线性
为主
(1)图标规范:
- 外部圆角:
2dp
- 内部挖空:挖空处的转角为
90°
(大部分) - 内部图标(内部单独的图层):距离四周有
2dp
- 图标之间(一个图标有2个部分):空
2dp
(2)尺寸
设计尺寸是:24 x 24 dp
设计区域是:20 x 20 dp(可超过)
6. Z轴投影
是为了体现页面的层次感,sketch有默认。
原理是:距离背景近的,阴影深。距离背景浅的,阴影浅。