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

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

Material Design-Layout-Metrics and Keylines

自译外文 分类: 规范/资料 版权: 原作者: Google
70690 515 146 37
2014-07-01
0.0
首页推荐

                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

 

推荐人:

UI中国

王帆

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

1182粉丝/17关注

小有名气首页达人小有见解一鸣惊人
亚马逊Alexa语音交互规范(五)亚马逊Alexa语音交互规范(四)
3
dragon__long

看底下好多人问分辨率的问题。请注意这里用的单位是dp,和分辨率无关的。不了解dp请戳这里。http://www.zcool.com.cn/article/ZNjI3NDQ=.html。

精彩!

王帆

王帆

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

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

您确认要推荐?

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

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

王帆

TA已经获得5枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

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

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

登录

账号或密码错误

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

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN