前言： 上一篇讲了准则，这一篇就来讲讲度量与边框，我们做设计不仅要美观，而且还要有一定的规范，特别是对于各种移
上一篇讲了准则，这一篇就来讲讲度量与边框，我们做设计不仅要美观，而且还要有一定的规范，特别是对于各种移动设备、平板设备以及桌面应用等程序，那是相当需要严谨的~~这节是超级实用的~~赶快来收走~~
所有组件都与间隔为8dp的基准网格对齐。排版/文字（Type）与间隔为4dp的基准网格对齐。在工具条中的图标同样与间隔为4dp的基准网格对齐。这些规则适用于移动设备、平板设备以及桌面应用程序。
有关详细信息请参见组件一节。
有关详细信息请参见字体排版一节。
移动设备布局模板包含了多种多样的屏幕和信息，这些信息描述了边框与间距如何应用于屏幕边界和元素。下面是一个有关屏幕的实例，这个实例可以通过如下的链接获得。
移动设备布局模板 – 2.4 MB(.ai)
内容
该屏幕演示图标、头像和一个2行文本的列表如何左对齐，以及一个56dp的浮动动作按钮和文本如何右对齐。
垂直边框和水平外边距
左右各有16dp的垂直边框。带有图标或者头像的内容有72dp的左边距。
在移动设备上有16dp的水平外边距。
垂直边距
内容
该屏幕演示图标、头像、2行文本列表、子标题和40dp的浮动动作按钮如何左对齐。小图标右对齐。
垂直边框和水平边距
图标（大小图标）有16dp的左右垂直边框。带有图标或者头像的内容有72dp的左边距。
在移动设备上有16dp的水平外边距。
垂直边距
内容
该屏幕演示图标如何左对齐，以及图标和一个56dp的浮动动作按钮如何右对齐。
垂直边框和水平边距
图标有16dp的左垂直边框。带有图标或头像的内容有72dp的左边距，32dp的右边距（考虑到56dp的圆形浮动动作按钮）。这样圆形浮动动作按钮下的图标也对齐了。
在移动设备上有16dp的水平外边距。
垂直边距
内容
该屏幕演示图标、头像和文本如何左对齐，浮动动作按钮、图标和文本如何右对齐。
垂直边框和水平边距
图标有16dp的左右垂直边框。带有图标或头像的内容区域左对齐，距左边界72dp。
在移动设备上有16dp的水平边距。
垂直边距
内容
该屏幕演示了侧边导航菜单的宽度，以及图标、头像和文本如何左对齐，小图标如何右对齐。 
垂直边框和水平边距
图标距侧边导航菜单的左右边界分别有16dp的垂直边框。带有图标或者头像的内容距侧边导航菜单的左边界72dp。侧边导航菜单的宽度等于屏幕的宽度减去动作条的高度，即在本例中距屏幕右侧56dp的宽。
在移动设备上有16dp的水平外边距。
垂直边距
平板设备布局模板包含了14种不同的屏幕，显示了边框和边距如何应用于屏幕的边界和元素。下面的实例是14种模板的两个，可以通过下面的链接获取。
平板设备布局模板
桌面应用程序布局模板包含了4个不同的屏幕，每一个屏幕又包括了4个不同的窗口尺寸，显示了边框和边距如何应用于窗口和元素。下面是一个屏幕的实例，可以通过下面所示的链接下载。基于不同的窗口尺寸，边框和边距块会沿袭平板设备和移动设备的网格规则。
桌面应用程序布局模板
应用于移动设备屏幕的宽度和移动设备、平板设备以及桌面应用程序中UI元素的宽度。
屏幕的宽度
示例
元素的宽度
示例
增量边框定义了一个增量，比如动作条的高度，然后使用几倍于这个增量的数字来决定应用中其它元素的尺寸和位置。
大多数应用于桌面应用程序，有些也适用于平板设备，很少应用在移动设备中。增量的数量会根据窗口的尺寸来改变。
最小的触摸目标尺寸是48dp。在布局中，当为图标（24dp）或者头像（40dp）设置边距时，要时刻记得。触摸目标不能重叠。
非常感谢这些辛苦翻译的小伙伴！！
原文：Metrics and Keylines 翻译：CodeDiving 校对：cxytomo
文章转自：http://design.1sters.com/
=========================关于起航学习网=========================
qh.itpxw.cn 起航学习网发布高质量ui设计教程和设计分享经验，希望打造一个最好的ui学习教程平台！
APP截图站：qh.itpxw.cn 海量APP截图，让你灵感爆发！
转载请注明：起航学习网 » Android设计规范 Material Design-Layout（2 度量与边框）
文章出自：http://qh.itpxw.cn/peixun/ui/201613772.html
文章标题：Android设计规范 Material Design-Layout（2 度量与边框）
免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉
