2017 Material Design完整中文版：第四章节《布局》 第一部分

第四章《布局》  

一、原则 （Principles）  

Material design基于印刷的设计元素（如排版、网格、空间、颜色和图像等）去创建层次结构、情景含义和视觉焦点，这一切都是为了加强用户体验。Material design 采用印刷设计的基本工具（如通用于所有页面的基础网格和结构模板），通过重复的视觉元素、结构网格和跨平台跨屏幕的能力来促进在不同环境中的一致性。这些布局可以适配任何屏幕大小进行缩放，这大大简化了我们创建可扩展性应用的过程。

 

- 工作原理  

Material design是把纸的物理性质转换到屏幕上，应用的背景类似于一张扁平且不透明的纸。应用的操作行为是模拟纸的物理行为，例如能够改变大小，拖拽和约束在多个sheets中。

 

构成应用的面的对象在Material design中我们称之为 material或sheets of material。

应用之外的元素（如系统栏）是独立于应用之外的对象，这里不视其为 material 。

关于Material的详细信息,请参阅 Material属性 。

接缝

两张material sheets间共享的一条公共边隙，我们称之为接缝。有接缝的sheets通常会一起移动。

两张material sheets间的接缝

Steps

两个在不同Z轴位置的独立且重叠的sheets会形成一个step。

两个重叠的sheets会形成一个step

- 浮动按钮  

浮动按钮

浮动按钮是一个与工具栏分离的圆形sheet。

当浮动按钮与step的内容相关时，它可以跨立在这个step上。

浮动按钮跨立于steps上。

 

当浮动按钮与接缝的内容相关时，它可以跨立在这条接缝上。

永远不要只是为了给浮动按钮提供一个支撑点而引入一条装饰性的接缝。

浮动按钮跨立于接缝上。

浮动按钮的详细信息,请参阅 浮动按钮 。

二、单位和尺寸（Units and measurements）  

有些单位在不同的语境中有着不同的含义。这章讨论的是设备独立像素（dp）、可缩放像素（sp）以及其他像素密度概念。

- 像素密度  

每英寸拥有的像素被称为“像素密度”。高密度屏幕比低密度屏幕每英寸拥有的像素高。因此UI元素（如按钮）在低密度屏幕上显示得更大而在高密度屏幕上显示得更小。

屏幕分辨率是指存在于显示器中的总的像素数量。

像素密度=√（X的平方+Y的平方）/ Z（X：屏幕长度像素；Y：屏幕宽度像素；Z：屏幕尺寸）

相关链接

支持多种屏幕，为了适应不同的屏幕密度进行优化设计

更多资源类型，支持安卓系统的测量单位

高密度屏幕

 

  低密度屏幕

-设备独立像素（dp）  

设备独立像素（也叫做”dips“），它一个是灵活的单位。在开发Android应用时，使用dp能够统一不同像素密度的手机/平板中的UI元素。

1dp等于160dpi中的1px：

计算dp的方式：dp =(像素（单位px）* 160)/像素密度（单位dpi）  

例如：界面上有一张120px的的图片，那么它在240dpi的手机上，它的dp值就是（120*160）/240=80  

如果设计稿是使用px，那么在写CSS时需要换算成dp或sp来进行开发。

像素密度	像素	设备独立像素
120	180px
160	240 px	240dp
240	360 px

如果你有三个不同像素密度的屏幕（如上表数据），屏幕大小都是1.5英寸，那他们的设备独立像素依旧是240dp。

-可缩放像素（sp）  

在开发Android时，sp的功能与dp相似，但sp只用于字体。默认sp与dp的值是一样的。可以理解为文字的大小一律用sp单位，非文字的大小一律使用dp单位。

sp和dp之间的主要区别在于sp会保留用户的字体设置。需要辅助功能调节字体大小需求的用户可以按自己偏好设置字体大小。

以dp为单位进行设计  

计算dp的方式：dp=(像素（单位px）* 160)/像素密度（单位dpi）

举个例子：一个 32 x 32 px的icon在一个像素密度为320的屏幕上显示效果为 16 x 16 dp。

图像缩放

通过换算，图像可以缩放到不同分辨率的屏幕上并且看起来效果都一样：

屏幕分辨率	dpi	像素比例	图像尺寸(像素px)
xxxhdpi（超超超高）	640	4.0	400 x 400
xxhdpi（超超高）	480	3.0	300 x 300
xhdpi（超高）	320	2.0	200 x 200
hdpi（高）	240	1.5	150 x 150
mdpi（中）	160	1.0	100 x 100

 

三、度量和参考线（Metrics & keylines）  

- 基线网格（Baseline grids）  

无论是移动端、平板端还是桌面端上，所有的应用组件都对齐至8dp单位的方形基线网格上。但工具栏中的图则对齐至4dp单位的方形基线网格上。

基线网格的例子

基线网格的例子

文字于4dp单位的方形基线网格对齐。详细信息请参见           排版 

在一个基线网格进行文字排版

 

- 参考线和间距（Keylines and spacing）  

以下模板包含参考线和间距指南。还有在移动端、平板端和桌面端上UI元素的布局效果。

模板：

移动端上的布局模板

2.23MB（.ai）

平板端上的布局模板

1.39MB（.ai）

桌面端上的布局模板

89.40MB（.ai）

移动端

列表

下图演示了头像、列表以及一个56dp的浮动按钮在页面中的对齐关系。

参考线和外边距

页面左右边缘预留外边距：16dp

内容左侧有icon或头像时预留外边距：72dp

移动端上水平方向上的外边距：16dp

垂直间距

• 状态栏：24dp

• 工具栏：56dp

• 副标题： 48dp

• 列表项：72dp

参考线和外边距

页面左右边缘预留外边距：16dp

内容左侧有icon或头像时预留外边距：72dp

垂直间距

• 状态栏：24dp

• 工具栏：56dp

• 标题和列表项： 72dp

• 副标题： 48dp

• 内容区域间距：8dp

详情页  

带56dp大小浮动按钮的卡片详情页。

参考线和外边距

页面左右边缘预留外边距：16dp

内容左侧有icon或头像时预留外边距：72dp

在有浮动按钮的页面上，右对齐的icons距离右边缘的距离是32dp

垂直间距

• 状态栏：24dp

• 工具栏：56dp

• 列表项： 72dp

• 内容区域间距：8dp

抽屉式导航

在抽屉式导航zho中，icons、头像和文本左对齐，其他icons右对齐。

参考线和外边距

页面左右边缘预留外边距：16dp

内容左侧有icon或头像时预留外边距：72dp

侧边栏宽：从屏幕右边缘到侧边栏的最右边的距离是：56dp

垂直间距

• 用户菜单和列表项：48dp

• 内容区域间距：8dp

• 从侧边栏最右边到屏幕右边缘的距离是：56dp

平板端

列表和详情页

列表左对齐，浮动按钮右对齐。

参考线和外边距

页面左右边缘预留外边距：24dp

内容左侧有icon或头像时预留外边距：80dp

卡片左右两侧内边距：24dp

卡片内容左内边距：104dp

垂直间距

• 状态栏以及列表上方间距：24dp

• 列表项： 64dp

• 内容区域间距：8dp

• 列表项：72dp

列表和详情页

列表、浮动按钮左对齐。

参考线和外边距

页面左右边缘预留外边距：24dp 

Icons垂直对齐并距离屏幕边缘：52dp

导航列表项距离屏幕左边缘内边距：104dp

内容距屏幕边缘的左外边距：80dp

卡片左右两侧内边距：32dp

卡片导航列表项的左内边距：96dp

垂直间距

• 状态栏：24dp

• 工具栏和列表项： 64dp

• 内容区域间距：8dp

• 副标题、列表项以及滑块：48dp

• 标题：80dp

桌面端

桌面端的参考线以及间距延续了移动端和平板端的设计，但实际会根据窗口大小来进行细调。

全屏桌面

缩放窗口

水平窗口

垂直窗口

- 参考线比率（Ratio keylines）

宽高比可用于UI元素和屏幕尺寸。这是我们直接写为宽：高。

以下是我们建议的宽高比：

• 16:9

• 3:2

• 4:3

• 1:1

• 3:4

• 2:3

举个例子：

• 1:1比例表示着元素有着相同高和宽。

• 宽360dp的图像宽高比是2:3时，它的高就是540dp。

以下是有关宽高比的计算方式。宽高比以分数形式表示。例如3:2表示为3/2。

宽=宽高比*高

高=宽/宽高比

不同的宽高比

移动端上页面宽高比的例子

元素宽高比

移动端上元素宽高比的例子

- 运用增量来调整尺寸（Sizing by increments）  

增量是度量单位。它决定了应用中其它元素的大小和位置。

举个例子，你可以将一个增量定义为某个标准元素的高（如操作栏）。这里我们假设操作栏高56dp，那么一个增量就等于56 x 56dp。以此通过这个我们定义的标准元素的大小来确定其他元素的大小。

再举个例子：在一个增量单位是56dp的情况下，有个元素的宽是8个增量单位大小，那么这个元素的宽就是8*56=448dp。

运用增量的参考线一般用于桌面端（用得最多）和平板端，在移动端上很少使用。因为增量数会根据窗口的大小变化而改变。

案例：卡片的宽是水平方向上8倍增量

案例：展开的应用栏的高度是2倍增量，右侧面板的宽是5倍增量

在material design UI中，增量可以不同元素间使用。

- 触发区域大小（Touch target size）  

为了确保平衡信息密度和可用性，触发区域大小至少是 48 x 48 dp。在大多数情况下，触发区域之间应该还有8dp或更大的间距。

元素尺寸的宽和高至少是48dp，以此确保在任何屏幕大小下元素的物理尺寸能够达到9mm。触摸屏设备的触发区域大小建议在7-10mm。

头像：40dp

Icon：24dp

触发区域尺寸： 48dp

触发区域高：48dp

按钮高：36dp

触发区域案例

触发区域和按钮

 

四、结构（Structure）  

- UI区域（UI regions）  

关于通过在z轴上排列元素以实现正确的行为和投影的指南，请参见 环境 和 高度和阴影 部分。

结构：移动端

这个结构包含一个固定的应用栏和一个浮动按钮。还有一个可选择的底部栏（bottom bar），它可以添加附加功能和溢出操作。最后是侧边导航菜单，它能盖过所有其他结构元素（相对其他元素Z轴最高）。

移动端结构

从左到右分别是：侧边导航菜单、应用栏/主工具栏、内容区域（在应用栏/主工具栏下方）以及底部导航栏和在其底部的右导航菜单

结构：平板端

这个结构包含一个固定的应用栏和一个浮动按钮。平板端也拥有和移动端一样的底部栏和侧边导航菜单。右导航菜单可以临时显示，也可以固定在页面中永久显示。

平板端结构

从左到右分别是：侧边导航菜单、应用栏/主工具栏、内容区域（在应用栏/主工具栏下方）以及底部导航栏和在其底部的右导航菜单

结构：桌面端

这个结构包含一个固定的应用栏和一个浮动按钮。应用栏也拥有和移动端、平板端一样的底部栏。在可能的情况下，窗口控件都收入进应用栏中。

侧边导航菜单可以占用整个屏幕高度 （盖过应用栏），并可临时显示或固定在页面中永久显示。侧边导航菜单以及内容区域可以有自己的次级工具栏（tabs、调色板或次级操作）。

桌面结构

左上方到右上方：应用栏/主工具栏

第二行从左到右：工具栏、次级工具栏和工具栏

第三回从左到右：侧边导航菜单、内容区域和右导航菜单

底部：浮动按钮

UI区域

定义一个基础的水平或垂直分隔。

水平分隔

垂直分隔

不要把界面分割成太多的区域，产生类似L形状。 相反，利用留白来勾勒出次级空间。

使用留白

避免创建太多区域。

用卡片和浮动按钮来打破边缘。

用卡片打破边缘

用浮动按钮打破边缘

某些特定行为需要用到卡片（cards）对内容进行组织。此外，如果某些情况信息分组能够比留白或分隔的方式提供更多的分隔作用，那推荐使用卡片。

卡片

卡片

 

- 工具栏（toobars）  

工具栏有着多种功能，它可以用不同的方式来表现。

屏宽，默认的应用栏高度

屏宽，展开的应用栏高度

             

部分屏宽的工具栏：具有层级关系

            

响应式工具栏和卡片工具栏

           

浮动工具栏

               

分离式工具栏面板

              

底部工具栏（附着在键盘或其他组件的顶部）

              底部工具栏shelf

- 应用栏（App bar）  

应用栏原先在Android系统中被称为操作栏（action bar），它是一种特殊的工具栏，一般用于品牌、导航、搜索和操作。

应用栏的左侧导航图标可以表示：

• 打开侧边导航的控件

• 返回（应用层级导航）

• 如果页面不需要导航则可以省略

应用栏中的标题反映的是当前页面。它可以是该应用的名称、页面标题或页面筛选等。

应用栏右侧的icon与应用相关操作关联。比如菜单icon是用来打开溢出菜单，其中可能包含有次级操作以及菜单选项（如帮助、设置或反馈）。

应用栏结构

左边：导航icon、标题、筛选icon

右边：操作和菜单icon

         

浅色

             

深色

 

 

有色

             

透明

标题颜色  

在一个应用栏中，所有的icons应是同一种颜色的。

  如果需要增加视觉层次，标题可以使用与icons不一样的颜色。标题的颜色最好用白色和黑色，因为这样能够区分和背景的关系。

单色（默认）

 

区分标题颜色              
 

度量标准（Metrics）

默认的高：

移动端横屏: 48dp

移动端竖屏: 56dp

平板/桌面端: 64dp

对于展开的应用栏，其高度为默认高度加上内容的增量高度。

应用栏高: 56dp

应用栏左、右内边距: 16dp

应用栏icon上、下、左内边距: 16dp

应用栏标题左内边距: 72dp

应用栏标题下内边距: 20dp

             

增加高度突出应用栏

应用栏高: 128dp

 

操作区高: 56dp

标题区高: 80dp

标题区下内边距: 8dp

输入区高: 72dp

输入区下内边距：16dp

应用栏高度决定了增量参考线的增量

应用栏内容的左、右内边距：24dp

应用栏icon的上、下内边距：20dp

展开的应用栏高: 128dp

应用栏左、右icon内边距：24dp

应用栏内容的左内边距：20dp

密度（Density）

当鼠标和键盘为主要的输入方式时，元素尺寸可以被压缩以适应密集的页面布局。

密集布局下的桌面端应用栏

应用栏高: 48dp

应用栏内容左、右内边距: 24dp

应用栏内容的左内边距（有icon或头像情况下）: 80dp

Icon高（包含点击区域）： 40dp

密集布局下展开的应用栏

应用栏高度: 96dp

应用栏内容左、右内边距: 24dp

应用栏内容的左内边距（有icon或头像情况下）: 80dp

菜单（Menus）

菜单是一张暂时显示的sheet。菜单与应用栏重叠，而不是作为应用栏的一个扩展。

案例：应用栏

               

案例：应用栏中的菜单

- 系统栏（System bars）                                                                        

状态栏/窗口栏（Status bar/window bar）

在Android里，状态栏包含通知和系统icon。在Chrome里，顶部栏包含有窗口控件（最小化，全屏和关闭）。在Chrome app中，顶部栏可以消失，窗口控件可以被纳入应用栏里。

Android的状态栏

             

Chrome的窗口栏

尺寸

Android的状态栏高: 24dp

Chrome的窗口高: 32dp

Android 状态栏在应用栏的顶部

Chrome的窗口栏在应用栏的顶部

Chrome的窗口控件收纳到应用栏里

全屏

有些内容在全屏模式下体验会更好，如视频、游戏、书籍和幻灯片。全屏模式可以让用户沉浸在内容中，并能够有效减少注意力分散和用户跳出。

全屏模式有几种类型：

• Lean back

• 沉浸式（Immersive）

• 熄灯模式（Lights Out）

Lean back

这种模式最适合在观看内容的同时与有限的屏幕进行交互，如视频。

交互：轻触屏幕任何地方显示系统栏。

 

沉浸式  

这种模式非常适合用户需要与屏幕进行大量交互时，如玩游戏或查阅图片。此外，当有需要时，可以显示和隐藏应用的系统栏。

交互：从屏幕的任何位置滑动，系统栏会出现。第一次使用全屏时，要有手势提示。

 

边缘滑动例外：应用了边缘滑动手势执行操作的应用也应该在使用该手势时显示系统栏。

滑动屏幕任何边缘位置，显示出隐藏的应用栏。

熄灯模式（Lights Out）

在熄灯模式下，如果几秒钟不进行操作，那操作栏和状态栏会逐渐淡化，并变为不可用状态。导航栏显示为暗灰色，但它仍然可用并会响应触摸。

深色的状态栏

默认情况下，状态栏或窗口栏的颜色深于应用栏的颜色。它也可以使用页面中其他元素中的颜色或使用半透明。

颜色从底图中提取

             

半透明状态栏，20%黑 #000000

深色状态栏

             

深于应用栏的颜色

浅色的状态栏

浅色状态栏配合深色icon，可以作为代替深色状态栏的一种方法。

颜色从底图中提取

 

半透明状态栏，70%白 #FFFFFF

             

浅色的状态栏，背景默认颜色为#E0E0E0

             

深色调背景上使用浅色状态栏

Android的导航栏（Android navigation bar）

Android导航栏中的设备导航控件：后退（Back）键、Home键以及Overview键。

高: 48dp

深色

             

浅色

颜色变体

导航栏可以是不透明的、半透明的或完全透明的。

半透明的

 

半透明案例

完全透明的

               

完全透明案例

Chrome OS shelf

用于启动应用，显示应用icon和系统设置。

 

高：56dp

 

案例

 

- 侧边导航栏（Side nav)  

根据需要，侧边导航栏可以在页面中固定一直显示，也可以暂时出现在页面中。侧边导航栏可以放置在左侧也可以放置在右侧。

理想情况下，左侧导航栏的内容应该是导航或一些基础特性，而右侧导航栏的内容则是页面中主要内容的次要信息。

参见 导航栏

手机屏幕

             

侧边导航栏

 

结构

侧边导航栏可以在页面中固定一直显示，也可以暂时出现在页面中。暂时显示的侧边导航栏覆盖内容区域，而永久固定的导航面板则出现在内容区域的旁边或下方。

屏幕大小可以决定使用永久固定还是暂时显示的导航栏。有足够的空间的话可以使用永久固定的导航栏并对内容进行响应式调整。如果空间不足，导航栏必须是暂时出现然后自动消失的。

尺寸

移动端：  

宽度=屏幕宽度 − 56dp

最大宽度：320dp

最大宽度仅适用于使用左侧的导航栏。使用右侧导航时，面板可以覆盖整个屏幕。

桌面端：

左侧导航栏最大宽度是400dp。右侧导航栏可以根据内容的不同而变化。

移动端的左侧导航

 

 

移动端的右侧导航

桌面端的左侧导航

 

桌面端的右侧导航

 

- 线框图（Whiteframes）  

线框图提供了各种布局结构下使用一致的面、层和阴影方法。

关于线框图的下载和其他信息，请参见 资源 

展开和折叠的卡片内容

 

移动端：遮盖底部内容细节来突显应用栏

 

移动端：左侧导航栏和one-up stream

 

资源列表

嵌入式搜索字段和搜索结果以及全屏背景

 

 

展开的底部sheet