接着上一篇的《设计规范一》http://www.ui.cn/detail/332834.html ,这篇接着剩余的部分～

Part4：Layout（布局）

dp等于屏幕上的一个物理像素，其密度为160。计算公式为：
dp=（宽度*像素160）/屏幕密度

适用于屏幕大小和UI元素的推荐长宽比：
16:9；3:2；4:3；1:1；3:4；2:3

触摸区大小：为了确保信息密度和可用性的平衡，目标触摸区域至少为48*48dp，大多数情况下，它们应该有8dp甚至更多的空间。

Part5：Components（组件）

一、Bottom navigation（底部导航栏）

注意点：

3～5个同等重要的最高级访问地，若超过6个则可用其他位置的导航进入;
颜色：用App的基色着色当前的视图操作处;
当视图处于焦点时，显示该视图的图标和文本标签（文本标签应简短，避免出现两行、省略号替代、或缩小字号以适用单行的情况）。

当用户通过底部导航进入降层级界面时，此时底部导航可以持久显示，也可以通过向上滚动时隐藏和向下滚动时显示。但避免在视图集中于单个任务（例如撰写邮件）时显示。不要将滑动手势的操作用于底部导航视图间的切换。

每个底部导航操作的宽度计算：
操作按钮宽度=整个屏幕视图的总宽／操作按钮数
或者，将所有操作按钮设置为最大操作宽度160dp
当视图聚焦某操作时，图标和文本标签整体上移，文本标签距离底部10dp。

尺寸规格：

高：56dp；图标：24*24dp
最大宽度168dp；最小宽度80dp
文本标签：12sp（非焦点视图）；14sp（焦点视图）

非活动视图：上下16dp

下图依次是：

（左上）活跃视图最小宽度96dp；（右上）活跃视图最大宽度168dp

（左下）非活跃视图最小宽度56dp；（右下）非活跃视图最大宽度96dp

二、Bottom sheets（底部表单）

持久性底部表单要么是全宽屏的，要么是插入式的，这取决于包含内容的宽度、总体UI和风格。

当显示一个长表单时，可以滚动里面内容，但最上面不要重叠顶部导航栏。

表单的尺寸规范：

带有图标的网格底部表单尺寸规范：

三、Buttons（按钮）

按钮通常有三种标准类型：

1、浮动动作按钮：一种圆形按钮
2、突起按钮：矩形按钮可以用于内联，被举起并在按下时作出反应，有2dp的高度
3、扁平按钮：仅用于文本按钮，可用于对话框、工具栏或内联级，按压时填充颜色

默认按钮及适应密集空间时的尺寸规范：

四、Floating Action Button（浮动动作按钮）

默认尺寸56*56dp（最小40*40dp）
用于创建、喜爱、分享等积极的动作，不要用于垃圾错误警告等小破坏性行为，在工具栏溢出菜单中溢出操作。

浮动操作按钮可以变换、转换成app界面结构中的一部分，并且这个动画是可逆的。

五、Cards（卡片）

卡片的布局使用：当作为合集显示内容时（不需要直接比较图像或文本）使用卡片布局，支持高度的可变性，但不要在快速浏览列表或网格照片集合中使用卡片。

内容层次：将主要内容放在卡片顶部，或用排版强调主要内容，每张卡片的内容可以不同。

卡片集合的项目顺序从左到右从上到下：

卡片内容的尺寸规范：

六、Chips

标签文本规范：13sp；87%的纯黑
应用案例及尺寸：

七、Dialogs（对话框）

一个对话框包含标题、内容和动作按钮。
注意点：
1、避免含滚动内容（除了全屏对话框和铃声列表等特殊情景）
2、滚动列表选项时，对话框标题仍然固定在顶部
3、警告内容的对话框应保持标题明确简练，避免模棱两可
4、在移动设备上，对话框的宽度基于单位的倍数，这个单位可以是一个增量或距屏幕边缘特定的距离
5、对话框距离屏幕左侧和右侧边缘至少40dp，顶部和底部边缘至少24dp；对话框内容距离对话框边缘至少24dp
6、全屏对话框更适合移动设备，它将一系列任务分组，支持更复杂的布局；提供描述行动的“保存”按钮用来提交或“叉”按钮用来退出，如果用户对内容做了修改那么退出时需要显示确认放弃的操作。
7、全屏对话框中标题应简洁，如遇长标题，把标题文本放至内容区域而不是应用栏
8、拒绝的动作按钮放在肯定的动作按钮左侧

八、Grid Lists（网格列表）

尺寸规范：

列表填充间距（左图4dp；右图1dp）：

九、Lists（列表）

尺寸规范：
单行列表默认状态和密集状态下的列表间距

两行列表默认状态和密集状态下的列表间距

三行列表默认状态和密集状态下的列表间距

十、Menus（菜单）

如果菜单的高度阻碍了菜单中的内容，那么菜单可以在内部滚动。

简单的菜单出现的位置，总是于列表文本开始时保持一致。

简单的菜单，宽度根据内容调节，以56dp为一个单元；经常保持16dp的左右屏幕边缘距离（平板上为24dp）。

尺寸规格（移动设备）：

尺寸规格（桌面级联菜单）：

十一、Progress&activity（进程和活动）

分为手势滑动时加载图标就显示和滑动完成图标再显示：

十二、Selection controls（选择控件）

复选框：
明主题下：选中状态时透明度100%，未选中状态时为透明度54%的纯黑，不可用时都为26%的纯黑。

暗主题下：选中状态时透明度100%，未选中状态时为透明度70%的纯白，不可用时都为30%的纯白。

单选框：（当你觉得用户需要看到所有选项时才全部显示，否则考虑下拉菜单，它比显示所有项节省空间），明亮主题和暗主题下的颜色透明度同复选框。

开关：
明亮主题下：选中状态时圆点透明度100%，轨道50%；未选中状态时圆点为透明度100%的纯黑，轨道38%；不可用时圆点都为100%的#BDBDBD，轨道12%的纯黑。

暗主题下：选中状态时圆点透明度100%，轨道50%；未选中状态时圆点为透明度100%的#BDBDBD，轨道30%的纯白；不可用时圆点都为100%的#424242，轨道10%的纯白。

十三、Snackbars&toasts

注意点：

只包含一个和操作直接相关的文本，不包含图标，不应持久显示或多个堆叠。
尺寸规范：
移动高度：48dp（单行），80dp（多行），内容和按钮文本通常14sp，默认填充背景100%的#323232。

桌面高度：48dp，最小宽度288dp，最大宽度568dp，内容和按钮文本通常为14sp，默认填充背景100%的#323232，对齐方式居中或距屏幕左边缘24dp。

十四、Steppers（步骤）

尺寸规范：

活动圆圈：24dp*24dp；文本字体通常12sp；背景默认填充谷歌蓝500
活动步骤名称：文本字体通常14sp；87%的纯黑
连接线：1dp宽；色值为谷歌灰400
非活动圆圈：24dp*24dp；文本字体通常12sp，颜色100%的纯白；背景默认填充38%的纯黑
非活动步骤名称：文本字体通常14sp；38%的纯黑
可编辑活动圆圈：24dp*24dp；文本字体通常12sp，颜色100%的纯白；背景默认填充54%的纯黑

用户可返回编辑之前步骤的图示：

当前步骤页的显示方式：

尺寸规范：

十五、Subheaders（小标题）

尺寸规范：

十六、Tabs（标签栏）

移动尺寸规范：

未活跃时标题文本70%的纯白；指示线2dp。

桌面尺寸规范：

十七、Text fields（文本域）

尺寸规范：

不同状态下的交互图示：

*这一块内容建议看下原文，里面对每一种交互状态下的规范都有详尽的描述。

十八、Tooltips（提示工具）

注意点：提示不显示丰富的信息，没有方向箭头，从源发出的传达方向运动，显示持续1.5s。
移动尺寸规范：