5.0材料设计阅读笔记，更美安卓设计的标准

在材料中看到的几张设计标准图，感觉挺有用。mark一下

所有单位都是dp,大概给我的感觉就是对齐，统一，大多以16为基准

底部动作条

底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。

使用

底部动作条(Bottom Sheets)特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代。

底部动作条(Bottom Sheets)可以是列表样式的也可以是宫格样式的。宫格布局可以增加视觉的清晰度。

你可以使用底部动作条(Bottom Sheets)展示和其 app 相关的操作，比如做为进入其他 app 的入口(通过 app 的 icon 进入)。

规格

下面的字体、颜色和区域规格都是提供给手机app使用的。

抽屉式导航

抽屉式导航是Google应用程序中一种常见的模式。抽屉导航从左侧滑出，它遵循列表的关键设计线和标准。

排版样式
字体，字号，颜色：

1. Roboto Medium, 14sp, #FFFFFF

2. Roboto Regular, 14sp, #FFFFFF

3. 列表项: Roboto Medium, 14sp, 87% #000000

4. 副标题: Roboto Medium, 14sp, 54% #000000。对其到16dp关键设计线。

垂直关键设计线和水平间距

图标的垂直关键设计线是距侧边导航左右边缘均为16dp的设计线，并且图标颜色为不透明度为54%的黑色（#000000）。

与图标或头像对应的文本内容距导航左侧边缘72dp。

侧边导航的宽度等于屏幕的宽度减去actionbar的高度，或者是距屏幕右侧边缘56dp。侧边导航的最大宽度是5倍于标准增量（手机上是56dp，平板上是64dp）。

在手机上使用16dp的水平距离，在平板则上使用24dp。

垂直间距

1. 24dp

2. 56dp

3. 8dp

4. 48dp

卡片布局

准则

字体设计

正文：14 sp 或 16 sp

标题：24 sp 或更大

扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距

移动设备上的卡片间距

屏幕边界与卡片间留白：8 dp

卡片间留白：8 dp

内容留白

16 dp

纸片

Chips (我们暂时叫他纸片视图)是一种小块的用来呈现复杂实体的块，比如说日历的事件或联系人。它可以包含一张图片，一个短字符串(必要时可能被截取的字符串)，或者是其它的一些与实体对象有关的简洁的信息。Chips 可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图，或者是弹出与 Chip 实体相关的操作菜单。

联系人纸片

联系人的纸片视图用于呈现联系人的信息。当用户在输入框(收件人一栏)中输入一个联系人的名字时，联系人纸片视图就会被触发，用于展示联系人的地址以供用户进行选择。而且联系人的纸片可以被直接添加到收件人一栏中去。

联系人的纸片视图主要用于帮助用户高效的选择正确的收件人。

分割线的使用

等屏宽分隔线（Full-bleed dividers）

等屏宽分隔线或以用于分隔列表中的每个数据项或者是页面布局中的不同类型的内容。

内凹分隔线（Inset dividers）

在有锚点元素（头像或者是图标）并且有关键字的标题列中，我们可以使用内凹分隔线。

子标题和分隔线

在使用分隔的子标题时，可以将分隔线置于子标题之上，可以加强子标题与内容关联度。

仅有图片的网格列表

网格内边距： 4dp

网格列表中的瓦片可以跨多列。

仔细考虑网格列表中的次要文本是否需要使用多列瓦片，因为大的瓦片可能会造成很大的空间浪费。

单行网格列表

仅有文本

高: 48dp

文本内边距： 16dp

默认字体大小： 16sp

网格内边距： 4dp

两行网格列表

仅有文本

高： 68dp

文本内边距： 16dp

每行的默认字体大小： 16sp/12sp或14sp/14sp

网格内边距： 4dp

手机端 Snackbar

· 单行 Snackbar 高度：48 dp

· 多行 Snackbar 高度：80 dp

· 文本：Roboto Regular 14 sp

· 操作按钮：Roboto Medium 14 sp, 大写文本

· 默认背景填充色：#323232 100%

平板/桌面端 Snackbar

· 单行 snackbar 高度：48 dp 以上

· 最小宽度：288 dp

· 最大宽度：568 dp

· 2 dp 圆角

· 文本：Roboto Regular 14 sp

· 操作按钮：Roboto Medium 14 sp, 大写文本

· 默认背景填充色：#323232 100%

列表副标题

区块高度是 48dp。

副标题字体为 Roboto Medium 14sp。

副标题应该跟列表中头像或是图标左对齐，除非那个地方有进阶操作（promoted action）。

网格副标题

区块高度是 48dp。

副标题字体为 Roboto Medium 14sp。

副标题跟左边缘距离为 16dp。

Tab 特性

Tabs 应该显示在一行内。

Tabs 不应该被嵌套。也就是说，一个 tab 里的内容不应包含另一组 tabs。

一组 tabs 至少包含 2 个 tab 并且不多于 6 个 tab。

Tabs 控制的显示内容的定位要一致。

Tab 中当前可见内容要高亮显示。

Tabs 应该归类并且每组 tabs 中内容顺序相连。

保持 tabs 和他们的内容相邻，可以明确两者间的关系，距离太远会让人误解。

Tab 的内容

即使是两个 tabs 之间，tab 中呈现的内容可以有很大的差别。比如，不同年份的 tab 组合或者是不同类型的设置。

一组 tabs 中的所有内容应该互相关联并且在同一个主题下（例如：设置、指南），但是每个 tab 又是相互独立的。

Tab 标签应该逻辑的组织相关内容，并提供有意义的区分。

Tab 标签可能是图标或者文字并且不能省略。

避免进行跨 tab 的内容比较。如果一个跨 tab 的内容比较是有必要的，那么也许应该换一种内容的组织和呈现方式。

规格

固定并且全屏宽度

· Tab 宽度：屏幕的 1/3

· 激活的Tab的指示器高度：2 dp

· 文本：14 sp Roboto Medium

· 文本在 tab 中居中

· 激活的文字颜色：#fff 或颜色选择中的次要颜色（详情可见Color）

· 不可用的文字颜色：#fff 60%

可滚动的

· Tab 宽度：12 dp + 文本宽度 + 12 dp

· 激活的Tab的指示器高度：2 dp

· 文本：14 sp Roboto Medium

· 激活的文字颜色：#fff 或颜色选择中的次要颜色（详情可见Color）

· 不可用的文字颜色：#fff 60%

EditText

浅色主题

· 提示和输入字体：Roboto Regular 16 sp

· 输入框高度：48 dp

· 文本顶部和底部填充：16 dp

· 文本字段分隔填充：8 dp

错误提示

浅色主题

错误提示字体使用 Roboto Regular 12sp 预置词 (Hint) 和提示字色使用 带有 38% 透明度的 #000000

深色主题

错误提示字体使用 Roboto Regular 12sp 预置词和提示字色使用 带有 30% 透明度的 #FFFFFF