Android设计尺寸规范

关注:1500 发表时间:2018-07-08 18:31:02

字体 Typography

中文字体:Source Han Sans / Noto

英文字体:Roboto

元素字重字号行距字间距
App barMedium20sp--
ButtonsMedium15sp-10
HeadlineRegular24sp34dp0
TitleMedium21sp-5
SubheadingRegular17sp30dp10
Body 1Regular15sp23dp10
Body 2Bold15sp26dp10
CaptionRegular13sp-20

图标 icons

图标用途mdpi (160dpi)hdpi (240dpi)xhdpi (320dpi)xxhdpi (480dpi)xxxhdpi (640dpi)
应用图标48 x 48 px72 x 72 px96 x 96 px144 x 144 px192 x 192 px
系统图标24 x 24 px36 x 36 px48 x 48 px72 x 72 px196 x 196 px

应用图标 Product icons

  • 方形
    高度:152dp 宽度:152dp
  • 圆形
    直径:176dp
  • 垂直长方形
    高度:176dp 宽度:128dp
  • 水平长方形
    高度:128dp 宽度:176dp

系统图标 System icons

  • 方形
    高度:18dp 宽度:18dp
  • 圆形
    直径:20dp
  • 垂直长方形
    高度:20dp 宽度:16dp
  • 水平长方形
    高度:16dp 宽度:20dp

快捷图标 Shortcut icon

  • 实际面积
    高度:44dp 宽度:44dp
  • 总面积
    高度:48dp 宽度:48dp
  • 系统图标尺寸
    高度:24dp 宽度:24dp
  • 实际面积位置
    剩余高度:24dp 
    剩余宽度:24dp

单位和度量 Units and measurements

dpi =屏幕宽度(或高度)像素 / 屏幕宽度(或高度)英寸

dp =(宽度像素 x 160)/ dpi

名称分辨率 pxdpi像素比示例 dp对应像素
xxxhdpi2160 x 38406404.048dp192px
xxhdpi1080 x 19204803.048dp144px
xhdpi720 x 12803202.048dp96px
hdpi480 x 8002401.548dp72px
mdpi320 x 4801601.048dp48px

UI组件布局 Element Layout

列表 List

  • 垂直边框和水平外边距
    边框左右外边距各16dp
    带有图标或者头像的内容有 72dp 的左边距。
  • 垂直边距
    1. 状态栏:24dp
    2. 工具栏:56dp
    3. 子标题:48dp
    4. 列表项:72dp
  • 垂直边框和水平外边距
    边框左右外边距各16dp
    带有图标或者头像的内容有 72dp 的左边距。
  • 垂直边距
    1. 状态栏:24dp
    2. 工具栏:56dp
    3. 标题和列表项:48dp
    4. 子标题:48dp
    5. 内容区域间的距离:8dp

详情视图 Detail view

  • 垂直边框和水平外边距
    边框左右外边距各16dp
    带有图标或者头像的内容有 72dp 的左边距。
    右边图标的右边距为32dp
  • 垂直边距
    1. 状态栏:24dp
    2. 工具栏:56dp
    3. 内容区域间的距离:8dp
    4. 列表项:72dp
  • 垂直边框和水平外边距
    边框左右外边距各16dp
    带有图标或者头像的内容有 72dp 的左边距。
    弹出菜单与右边框的距离为56dp
  • 垂直边距
    1. 列表项:48dp
    2. 内容区域间的距离:8dp
    3. 导航右边距:56dp

触控区域尺寸 Touch target size

  • 头像:40dp
    图标:24dp
    触控区:48dp
  • 实例
  • 触控区域高度:48dp
    按钮高度:36dp
  • 实例

应用栏 App bar

  • 应用栏高度:56dp
    应用栏左右内边距:16dp 
    应用栏图标上、下、左内边距:16dp 
    应用栏标题左内边距:72dp 
    应用栏标题下内边距:20dp
  • 应用栏高度:128dp
  • 操作栏高度:56dp
    标题栏高度:80dp 
    标题栏底部内边距:8dp 
    描述区域高度:72dp 
    描述区底部内边距:16dp

  • 了解更多消息,长按二维码识别获取

7X24小时服务热线:0592-3278915

福建省厦门市集美区海凤路105号顶斌大厦1706室

 ©2016-2019 厦门米铺网络科技有限公司 版权所有

ICP备案号: 闽ICP备16016818号-1 

闽公网安备 35020602001269号

注册华为云  尊享折扣优惠

热线电话
0592-3278915
上班时间
周一到周六
二维码