1、Bottom Sheets
底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。
可以是列表式的

列表式规格

也可以是网格式的

2、Buttons
按钮有三种,分别是
· 悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的圆形按钮。

· 浮动按钮(Raised button), 常见的方形纸片按钮,点击后会产生墨水扩散效果。

· 扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。

三种按钮的层级重要性如下,依次往下递减:

使用按钮注意:
* 对话框中使用扁平按钮。
* 如果需要一个对用户持续可见的功能按钮,应该首先考虑使用悬浮响应按钮。
* 建议只用一个悬浮按钮(FAB)
* 不是每个屏幕都需要浮动操作按钮。一个悬浮按钮能够代表这个 App 中的主要操作。
* 使用圆形图标(FAB);
* 浮动按钮可以点击以其为基准弹出其它选项,但选项最多不超过6个
* 悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘
* 悬浮按钮不能被其他元素盖住,也不能挡住其他按钮,列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项
* 悬浮按钮有两种尺寸:56x56dp/40x40dp
用浮动操作按钮进行积极的操作,如创建、收藏、分享、浏览和探索。

避免用浮动操作按钮进行下面这些轻微破坏性操作:存档或删除、非特异性操作、警报或错误、限制性任务如剪切文本、控制应放在一个工具栏中,如音量控制或改变字体颜色等。

3、Cards
卡片是包含一组特定数据集的纸片,数据集含有各种相关信息,例如,关于单一主题的照片,文本,和链接。卡片通常是通往更详细复杂信息的入口。

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

未完……
网友评论