底部动作条是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。
通常以列表形式出现,支持上下滚动。
也可以是网格式的。
按钮由文字和/或图标组成,文字及图标必须能让人轻易地和点击后展示的内容联系起来。
主要的按钮有三种:
-
悬浮响应按钮(Floating action button), 点击后会产生墨水扩散效果的圆形按钮。
-
浮动按钮(Raised button), 常见的方形纸片按钮,点击后会产生墨水扩散效果。
-
扁平按钮(Flat button), 点击后产生墨水扩散效果,和浮动按钮的区别是没有浮起的效果。
悬浮响应按钮
浮动按钮
扁平按钮
最重要且随处用到的操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以有效突出重要操作,但注意纸片不要叠太多层。扁平按钮适合用在简单的界面,例如对话框中。
使用悬浮按钮要遵循以下规则:
-
建议只用一个悬浮按钮
-
悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘
-
悬浮按钮不能被其他元素盖住,也不能挡住其他按钮
-
列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项
-
悬浮按钮的位置不能随意摆放,可以贴着左右两边的对齐基线
悬浮按钮有两种尺寸:56x56dp/40x40dp
卡片是包含一组特定数据集的纸片,数据集含有各种相关信息,例如,关于单一主题的照片,文本,和链接。卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容,但如果需要它可以临时扩展(例如,显示评论栏)。卡片不会翻转以展示其背后的信息。
**卡片集**是**卡片**的一个平面布局
即使在同一个列表中,卡片的内容和布局方式也可以不一样。
卡片统一带有2dp的圆角。
在以下情况考虑使用卡片:
-
同时展现多种不同内容
-
卡片内容之间不需要进行比较
-
包含了长度不确定的内容,比如评论
-
包含丰富的内容与操作项,比如赞、滚动条、评论
-
本该是列表,但文字超过3行
-
本该是网格,但需要展现更多文字
卡片最多有两块操作区域。辅助操作区至多包含两个操作项,更多操作需要使用下拉菜单。其余部分都是主操作区。
** 卡片布局准则 **
字体设计
正文:14 sp 或 16 sp
标题:24 sp 或更大
扁平按钮:Roboto Medium, 14 sp, 10 sp 字间距
移动设备上的卡片间距
屏幕边界与卡片间留白:8 dp
卡片间留白:8 dp
内容留白
16 dp
纸片是一种小块的用来呈现复杂实体的块,比如说日历的事件或联系人。它可以包含一张图片,一个短字符串(必要时可能被截取的字符串),或者是其它的一些与实体对象有关的简洁的信息。Chips 可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图,或者是弹出与 Chip 实体相关的操作菜单。
狭小空间内表现复杂信息的一个组件,比如日期、联系人选择器。
Dialogs 用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。 Dialog 可以是用一种 取消/确定 的简单应答模式,也可以是自定义布局的复杂模式,比如说一些文本设置或者是文本输入 。
一些复杂的操作,尤其是每个决策都需要相关解释说明的情况下是不适合使用 Dialog 形式的。