恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Material Design-Layout-Metrics and Keylines
0.0°
2014-07-09 自译外文 规范/资料 原作者: google 举报 14385 209 52 10

                                                  标尺与参考线

基线网格

所有组件对齐到 8dp 方形基线网格。表单对齐到 4dp 基线网格。图标在工具栏调整到一个 4dp 的基线网格。这适用于手机,平板电脑和台式机。

查看组件的详细信息

参见排版的详细信息

参考线和间距

手机

移动布局模板要适合各种各样的屏幕,关于信息如何处理屏幕边缘的间距横跨屏幕边缘和排版页面元素。附件中有些例子可以参考。

这张截图显示了如何图标,头像,和一个2行列表之间排列方式,左边 56dp 浮动和 右边的文字对齐。

垂直参考线在屏幕的左侧和右侧边缘各留16dp 。带图标或头像相关的内容居左留 72dp的间距,16 dp 手机横向边距。

垂直间距

1. 24dp

2. 56dp

3. 48dp

4. 72dp


这张截图显示了如何图标,头像,一个2行列表,副标题的排列方式,和一个40dp 浮动行动对齐左侧,图标排列在右边。

垂直参考线在图标的左边和右边各留 16dp。带图标或头像相关的内容向左对齐 72dp。 

16dp 手机横向边距。

垂直间距

1. 24dp

2. 56dp

3. 72dp

4. 48dp

5. 8dp


这张截图显示了图标左对齐,和一个 56dp 浮动行动对齐在右侧。

垂直参考线在图标的左边和右边各留 16dp。带图标或头像相关的内容向左对齐 72dp。添加了另一条的32dp 参考线,留给圆形 56 dp 浮动动作,这样使得下面的元素对齐。

16dp 手机横向边距。

垂直间距

1. 24dp

2. 56dp

3. 8dp

4. 72dp


这张截图显示了如何图标,头像,和文本对齐在左侧,以及如何在右侧浮动图标和文字对齐的动作。

垂直参考线在图标的左边和右边各留 16dp。带图标或头像相关的内容向左对齐 72dp。 

16dp 手机横向边距。

垂直间距

1. 24dp

2. 56dp

3. 48dp

4. 8dp


这张截图显示一个侧面导航菜单,和左边图标,头像,和文本对齐和右侧的注释图标。

垂直参考线在侧导航图标的左边和右边各留 16dp。带图标或头像相关内容对齐 72dp 从侧面导航的左边缘。侧面导航的宽度等于屏幕的宽度减去操作栏,或在这种情况下,从屏幕右边缘56dp 的高度。

16dp 手机横向边距。

垂直间距

1. 48dp

2. 8dp

3. 56dp


平板

平板电脑布局模板包括14个不同的屏幕,参考线和间距如何跨屏幕边缘和元素的布局。下面是两个包含在下载的14的屏幕的示例。

1. 24dp

2. 64dp

3. 8dp

4. 72dp


1. 24dp

2. 64dp

3. 8dp

4. 48dp

5. 80dp


桌面

桌面布局模板包括4个不同的屏幕各有4个不同的窗口大小,参考线和间距如何在窗口和元素布局。下面是一个截图是在下载可用的例子。根据窗口大小,拼版和间隔块状化继承来自平板电脑和移动网格规则。



参考线比例

适用于手机屏幕的宽度和UI元素的宽度手机,平板电脑和台式机上。

宽度比例

例子

宽度比例

例子

递增参考线

递增关键线定义的增量,如在操作栏的高度,并使用该增量的整数倍,以确定在应用程序中其它元素的大小和位置。 

适用于大部分台式机,常用的平板电脑,部分手机设备。根据窗口大小递增值会有所不同。

触摸目标大小

最小触摸目标大小为48dp。图标间距(24dp),头像(40dp).

在布局时,请记住这一点。触摸区域不应该重叠。

更新:2014-07-09

下载
收藏

209人已收藏

larens

Live the life you've imagined.

  • 37

    作品

  • 1511

    粉丝

  • 40

    关注

  • 防控疫情,如何远程团队协作
  • 姗姗未来的WeUI「深色模式」
  • 浅谈设计版本的那些事
  • iOS人机界面指南-3D Touch
相关标签
Android设计规范

    猜你喜欢

      2014-07-09 自译外文 规范/资料 原作者: google 举报 14385 209 52 10

      Material Design-Layout-Metrics and Keylines

      0.0°

      你确定要举报Material Design-Layout-Metrics and Keylines

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年07月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      52
      209
      10

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录