UI设计课EDC研究所1期 Part 14/15 - 安卓规范

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有默认。
原理是:距离背景近的,阴影深。距离背景浅的,阴影浅。
在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/lemon_SIR/article/details/84671840