恭喜你成为UI中国推荐设计师 (详情)

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Material Design-Layout-Metrics and Keylines
0.0°
自译外文 / 规范/资料 / / 原作者: Google / 举报
71456 517 148 37

2014-07-01

                Material Design-Layout-Metrics and Keylines

目录

  • 基本的栅格线
  • 排版和间距
  • 排版比例
  • 排版增量
  • 触摸目标大小

基本的栅格线

所有的组件对齐到8dp见方的基本栅格中,类型对齐到4dp的基本栅格中。工具栏中的ICON对齐到4dp见方的基本栅格中。这些适用于手机、平板电脑和台式机。

baseline-01

Baseline Grids

Baseline Grids

baseline grids

查看组件的详细信息。(注:详细信息均指附件,在下载中)

Baseline grids

查看排版的详细信息。

排版和间距

移动端

移动端的布局模板包括各种各样的屏幕和各种信息的排版和空间布局元素。下面是一个包含屏幕例子的下载。

2.4 MB (.ai)

Keylines and Spacing on Mobile

背景

此屏幕显示了图标,头像和两条线怎么样对齐排列在左边,和一个如何56dp的悬浮按钮怎样和文字对其在右侧

Keylines and Spacing on Mobile

垂直排版和水平边距

垂直关键线距左侧和右侧边缘各16dp。与内容相关的icon或者文字对齐在距左侧边缘72dp.16dp的水平带图标或化身相关的内容从对齐左侧边缘72的DP。元素水平相距为16 dp.

Keylines and Spacing on Mobile

垂直间距

1. 24dp

2. 56dp

3. 48dp

4. 72dp

Keylines and Spacing on Mobile

背景

此屏幕显示了图标,头像,一个2行列表和标题,怎样和一个40dp悬浮操作左侧对齐的。图标排列在右边。

Keylines and Spacing on Mobile

垂直排版和水平边距

垂直关键线,从icon到左边距离16dp.与icon或者标题相关的内容,距离左侧72dp.水平间距为16dp。

Keylines and Spacing on Mobile

垂直间距

1. 24dp

2. 56dp

3. 72dp

4. 48dp

5. 8dp

Keylines and Spacing on Mobile

背景

该屏幕显示图标如何对齐左侧,以及图标如何与右测一个56dp的悬浮操作对齐。

Keylines and Spacing on Mobile

垂直排版和水平边距

垂直关键线为图标距左侧边缘16dp。与icon或者标题相关的内容对齐且距离左侧72dp。一个额外的关键线距离圆形浮动操作32个dp。这使得浮动操作图标下面的操作对齐。

水平间距为16dp。

Keylines and Spacing on Mobile

垂直间距

1. 24dp

2. 56dp

3. 8dp

4. 72dp

Keylines and Spacing on Mobile

背景

此屏幕显示了图标、头像如何和文本对齐左侧,以及右侧浮动按钮怎样和图标、文字对齐。

Keylines and Spacing on Mobile

垂直排版和水平边距

垂直关键线为图标距左侧边缘16dp。与icon或者标题相关的内容对齐且距离左侧72dp。

侧边导航栏的宽度等于屏幕看度减去操作栏,在这种情况下,右侧距离屏幕56dp. 水平间距为16dp。

Keylines and Spacing on Mobile

垂直间距

1. 24dp

2. 56dp

3. 48dp

4. 8dp

Keylines and Spacing on Mobile

背景

此屏幕显示了图标、头像如何和文本对齐左侧,以及右侧浮动按钮怎样和图标、文字对齐。

Keylines and Spacing on Mobile

背景

此屏幕显示了图标、头像如何和文本对齐左侧,以及右侧浮动按钮怎样和图标、文字对齐。

垂直排版和水平边距

垂直关键线为图标距左侧边缘16dp。与icon或者标题相关的内容对齐且距离左侧72dp。侧边导航栏的宽度等于屏幕看度减去操作栏,在这种情况下,右侧距离屏幕56dp. 水平间距为16dp。

Keylines and Spacing on Mobile

垂直间距

1. 48dp

2. 8dp

3. 56dp

平板电脑

平板电脑布局模板包括14个不同的屏幕下的显示排版和间距,和他们如何跨不同的屏幕和元素。下面是两个包含14的屏幕的可下载示例。


3.19 MB (.ai)

Keylines and Spacing Tablet

Keylines and Spacing Tablet

Keylines and spacing Tablet

1. 24dp

2. 64dp

3. 8dp

4. 72dp

Keylines and spacing Tablet

Keylines and spacing Tablet

Keylines and Spacing Tablet

1. 24dp

2. 64dp

3. 8dp

4. 48dp

5. 80dp

台式电脑


桌面布局模板包括4个不同的屏幕,各有4个不同的窗口大小,显示元素在空间中如何排版。下面是可下载的屏幕例子。根据窗口大小,拼版和间隔块将继承来自平板电脑和移动网格规则。

h

100 MB (.ai)

Keylines and spacing Desktop

排版比例

排版比例

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

Screen width

Screen width

Example


Element width


Example


增量排版

Incremental Keylines

增量关键线的界定了增量,就像操作栏的高度一样,并在确定应用中其他元素大小和位置时使用增量的整数倍。

这些适用于大部分台式机,部分的平板电脑,但很少适用于手机。根据窗口的大小,这个增量数也不同。

incremental keylines

incremental keylines

incremental keylines

incremental keylines

触摸目标大小

最小触摸目标大小为48dp。在布局时,请记住图标(24 dp)头像(40 dp)。触摸目标不应该重叠。

touch target

touch target

 

Android设计规范

创建于:2014-07-01
下载
收藏

517人已收藏

王帆

站在巨人肩膀的前一步,是找到巨人

  • 13

    作品

  • 1187

    粉丝

  • 17

    关注

  • 亚马逊Alexa语音交互规范(五)
  • 亚马逊Alexa语音交互规范(四)
  • 亚马逊Alexa语音交互规范(三)
  • 亚马逊Alexa语音交互规范(二)

猜你喜欢

    王帆

    王帆

    站在巨人肩膀的前一步,是找到巨人

    小有名气首页达人小有见解一鸣惊人
    • 1187

      粉丝

    • 1.3

      人气

    • 1584

      颜值

    作品

      王帆

      点赞:148

      收藏:517

      评论:37

      Material Design-Layout-Metrics and Keylines

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

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

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

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

      登录

      账号或密码错误

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

      登录

      可云端编辑的专业级UI设计工具

      立即体验