2017 Material Design完整中文版：第五章节《组件》第一部分

D27_

亚洲/学生/9年前/591浏览

版权

D27_

【站酷首发】10大章79小节重译！半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制，全文将分为N篇文章陆续发布。

第五章节《组件》

一、底部导航（Bottom navigation）

底部导航栏能够方便用户在各顶级视图之间进行快速定位和切换操作。

点击底部导航中的icon能够快速切换到相关视图或刷新当前视图。

底部导航主要用于移动端。要在桌面端实现类似效果可以使用侧边导航。

用法

适用于拥有三到五个顶级入口导航选项的应用

需要各入口选项间能够直接、快速的跳转

颜色

可以使用应用的主色作为选中状态（active）下的icon颜色。如果底部导航栏已经存在颜色，那么icon可选用黑色或白色。

尺寸说明

每一个操作区域的宽度：整个视图的宽度除以操作数（即入口导航选项数），其中最大是168dp和最小80dp。

高：56dp

Icon：24 x 24dp

- 用法

底部导航让用户能够在应用各顶级入口间快速跳转。是专门为移动端设计的导航方式。

如果是更大的屏幕，如桌面端，可以使用侧边导航来达到这种效果。例如，默认状态的侧边导航栏为缩略显示方式（只显示icon）。

移动端：底部导航栏

平板或桌面端：侧边导航栏

什么时候使用底部导航

底部导航适用于：

适用于拥有三到五个相同优先级入口导航选项的应用（替代方案：永久性抽屉式导航）
不受界面层级影响，各顶级入口之间可直接跳转。（替代方案：tabs ）

可行

底部导航栏适用于拥有三到五个顶级入口导航选项的应用。

不可行

少于三个顶级入口导航选项的情况下建议使用tabs。

如果你的应用拥有超过5个顶级入口导航选项的话，建议将多出的入口选项放置在其他位置，如抽屉式导航中。

可行

不可行

底部导航栏中不要出现可滚动操作。

可行

超过5个顶级入口导航选项的话，底部导航只展示优先级别相对高的5个选项，而多出的入口选项将放置在其他位置。

不可行

底部导航中不要超过5个顶级入口选项，因为离太近人类愚蠢的拇指容易误按。

底部导航和tabs

特别注意应用中底部导航和tabs结合使用的情况，两者相结合容易导致用户在使用期间产生困惑。比如，在底部导航和tabs之间来回切换容易导致不同过渡动效相互出现混淆用户操作的情况。

- 样式

Icons和文本

因为底部导航中的入口导航选项是以icon的视觉形式呈现，所以icon应能够清晰向用户传达导航入口的信息。

入口导航选项的样式需要遵循以下规则：

当某视图获取焦点（view is in focus）时，显示该视图的icon和文本标签

如果底部导航只有三个入口导航选项，那就将icon和文本标签都显示出来

如果底部导航有四或五个入口导航选项，那没有选中的选项只显示icon

颜色

当前被选中的入口导航选项（包括icon和文本标签）可使用该应用的主色来表示。

可行

视图获取焦点时，其icon和文本标签都赋予了应用主色，以此来表示现在所处视图。

不可行

避免各选项的icon和文本标签之间使用不同的颜色。

如果底部导航栏本身有颜色的话，那么被选中选项的icon和文本标签使用黑色或白色表示。

可行

如果底部导航栏本身有颜色的话，那么被选中选项的icon和文本标签使用黑色或白色表示。

不可行

避免在有颜色的底部导航栏中出现使用不同颜色的选项。

文本标签

使用简洁明了的文本标签去描述底部导航栏中选项的icon。避免使用长文本标签。

可行

简洁明了的文本标签

不可行

避免使用换行的文本标签

避免使用带省略的文本标签

字体大小必须一致，避免为了能塞下而缩小字体的情况

- 行为

点击底部导航中的icon能够快速切换到相关视图或刷新当前视图。

底部导航栏中的选项必须是导航到某个目标视图，不能是打开某个菜单或弹窗。

在Android中，后退按钮不能在底部导航栏各入口视图间使用。

点击已选中的选项，视图会跳至顶部

来回切换选项可以刷新页面状态

来回滚动屏幕可以显现和隐藏底部导航栏：

向下滚动屏幕可以隐藏底部导航栏

反之显现底部导航栏

来回滚动屏幕可以显现和隐藏底部导航栏，这样做能增加用户阅读内容的沉浸体验。

不管在多深层级视图下阅览，来回切换入口导航选项后还是会刷新重置回入口视图。

切换选项时使用过渡动效。

视图切换避免使用横向位移动效

- 尺寸说明

固定的底部导航栏

每个操作区域的宽度：

整个视图的宽度 / 操作数（即入口导航选项数）

举个例子：如果视图宽度为360dp，底部导航栏存在3个入口导航选项，那么每个操作区域应为120dp宽。

桌面端或者大屏环境

可选择最大操作区域宽度。

移动端中固定的底部导航栏

最小和最大的操作区域宽度（包括内边距（padding））：

最大：168dp

最小：80dp

高：

56dp

Icon：

24 x 24dp

内容对齐：

文本和icon在区域内水平居中。

内边距（padding）：

被选中状态下区域上内边距（icon上面）为6dp，未选中状态下则为8dp

下内边距（文字下面）为10dp

左右内边距为12dp

文本标签：

Roboto Regular 14sp (选中状态)

Roboto Regular 12sp (未选中状态)

80dp宽

左右内边距12dp

56dp高

左右内边距12dp

下内边距10dp

最大宽度168dp

左右内边距12dp

底部导航栏案例

移动端上的固定的底部导航栏

56dp高

24 x 24dp icon

6dp上内边距（选中状态）

8dp上内边距（未选中状态）

10dp下内边距

平板端上的固定的底部导航栏

56dp高

24 x 24dp icon

6dp上内边距（选中状态）

8dp上内边距（未选中状态）

10dp下内边距

移动的底部导航栏

最小和最大的操作区域宽度（包括内边距（padding））：

最大：168dp

最小：96dp

被选中状态

最大：168dp

最小：96dp

未选中状态

最大：96dp

最小：56dp

高：

56dp

icon：

24 x 24dp

内容对齐：

文本和icon在区域内水平居中。

内边距（padding）：

被选中状态下区域上内边距（icon上面）为6dp，未选中状态下上、下内边距都是16dp

下内边距（文字下面）为10dp

文本标签：

Roboto Regular 14sp (选中状态)

移动端上移动的底部导航栏

56dp高

24 x 24dp icon

6dp上内边距（选中状态）

10dp下内边距

icon和文本之间6dp

上、下内边距都是16dp（未选中状态）

移动端上移动的底部导航栏

选中状态：最小宽度为96dp

未选中状态：最小宽度为56dp

在选中状态下文本标签可以使用最大的区域宽度

选中状态：使用最大宽度168dp

未选中状态：使用最大宽度96dp

在选中状态下文本标签可以使用最大的区域宽度

移动端上移动的底部导航栏

56dp高

24 x 24dp icon

6dp上内边距（选中状态）

10dp下内边距

icon和文本之间6dp

上、下内边距都是16dp（未选中状态）

平板端上移动的底部导航栏

56dp高

24 x 24dp icon

6dp上内边距（选中状态）

10dp下内边距

icon和文本之间6dp

上、下内边距都是16dp（未选中状态）

高度（Elevation） （译者注：注意区分两种高：Elevation和height）

snackbar（6dp）在底部导航栏（8dp）后面（Z轴方向）。

底部sheet，抽屉式导航和键盘在Z轴方向上都高于底部导航栏，所以都在其前面并临时覆盖它。

snackbar在底部导航栏后面。

底部sheet，抽屉式导航和键盘在Z轴方向上都高于底部导航栏，所以都在其前面并临时覆盖它。

正交视图下的应用结构。

二、底部sheet（Bottom sheets）

底部sheet从屏幕底部上滑出现。

模态底部sheet（Modal bottom sheets）主要用于移动端。其中有包含其他应用的深度链接。

常驻底部sheet（Persistent bottom sheets）主要集成显示应用内支持的内容。

交互

底部sheet只能由用户发起。

高度（Elevation）

模态底部sheet：高于整个应用。

常驻底部sheet：跟应用高度一致

其他可替代方案：

对话框

菜单

- 用法

存在有两种类型的底部sheet：

模态底部sheet可替代菜单或者简易对话框，对比两者它也能提供其他应用的深度链接选项。模态底部sheet主要用于移动端。

常驻底部sheet主要展示应用内内容。

高度（Elevation）是区分模态底部sheet和常驻底部sheet的关键。模态底部sheet的默认高度高于常驻底部sheet；常驻底部sheet默认高度与应用高度一致。

因为大屏情况下空间受限小，所以可以使用其他组件代替底部sheet，如简易对话框和菜单。这两者会比底部sheet更适合大屏环境。

模态底部sheet从屏幕底部上滑出现并显示相关内容选项。

常驻底部sheet是应用布局中的重要组成部分之一。

- 常驻底部sheet

常驻底部sheet主要展示应用内当前视图内容的补充内容。即使用户不去触发常驻底部sheet，它也会固定并保持在当前视图可见。其默认高度与应用高度一致。

用法

介绍新内容

展示与主要内容同等重要的补充内容

常驻底部sheet和浮动按钮（FAB）同时存在的页面布局中，浮动按钮会因其而在垂直方向上移动。

用户拖移地图的同时，常驻底部sheet会显示相关地点的信息并且保持在当前视图可见。

无论主视图如何变化都不会影响到在常驻底部sheet上的播放控件。

移动端

移动端上常驻底部sheet的宽度与屏幕宽度一致（无论是竖向或是横向布局）。

平板/桌面端

常驻底部sheet的宽度可选择与屏幕宽度一致或者以嵌入的形式出现。具体选择哪种方式，应由包含内容的宽度、整体UI、基本内容和格式的选择决定。

平板端：常驻底部sheet的宽度与屏幕宽度一致

平板端：常驻底部sheet以嵌入形式出现

在桌面端上，常驻底部sheet可能会转变成其它形式出现。

如图，由于桌面端具备更大的内容展示空间，所以常驻底部sheet可能会转变为图中形式并在页面左侧出现。

- 模态底部sheet

模态底部sheet可替代菜单或者简易对话框，并且它也能提供其他应用的深度链接选项。因为模态底部sheet出现时是在其他UI元素之上，所以为了能够返回并跟在其下面的内容交互，模态底部sheet必须是能被取消的。当模态底部sheet从屏幕底部上滑出现时，屏幕其余部分变暗以突出底部sheet。

模态底部sheet：列表式布局

模态底部sheet：宫格式布局

用法

模态底部sheet：

使用列表或宫格式布局选项来替代菜单或简易对话框

当所在页面没有明显的菜单入口时显示相关菜单

包含的选项应经过可见性优先级考虑再进行排序

模态底部sheet能够显示较长的菜单选项名称，菜单选项的副文本以及菜单选项icon。

当显示菜单选项时需要完全展开模态底部sheet，其中模态底部sheet完全展开的极限是距离应用栏（app bar）底部8dp的位置。

底部sheet中菜单选项的icon

菜单选项中的副文本

深度链接

模态底部sheet能够提供其他应用内容或控件的深度链接。这些内容或控件所在的模态底部sheet宽度同样与屏幕宽度保持一致。

用户不用打开字典应用，通过模态底部sheet中的深度链接就能显示查询结果。

图中右边应用展示的底部sheet的内容来自左边的应用。也就是说通过深度链接用户可以直接在当前应用中浏览其他应用的内容。

深度链接应该满足：

允许用户浏览其他应用较深层级的内容

用户能够返回到最初页面

但是，深度链接不允许用户向上层级页面导航：用户只能在最初页面停留、往下（深）层级导航或者返回到最初页面。

另外，用户可以通过深度链接完全跳离底部sheet，跳转到另一视图。

在底部sheet的深度链接中想要实现向上层级页面导航或者进行某些操作，那只能通过溢出菜单点击跳转到对应应用才能实现。

可行

完全展开的模态底部sheet需要在应用栏中提供“X”按钮。

不可行

只有用户已经深入页面进行浏览时才提供返回按钮。

移动端

模态底部sheet主要是移动端的组件，其宽度与屏幕宽度一致（无论是竖向或是横向布局）。

可行

用户滑出模态底部sheet时，模态底部sheet不要与应用栏重叠。并且允许用户通过点击或滑动取消模态底部sheet。

可行

当显示长列表时，用户可以通过滑动屏幕浏览更多选项。

不可行

内容选项应该要和底部sheet的高度相符。强迫症们看着舒服吗？

不可行

用户滑出模态底部sheet时，模态底部sheet不要与应用栏重叠。并且允许用户通过点击或滑动取消模态底部sheet。

平板/桌面端

考虑到大屏环境下用户滑出底部sheet后因显示跨度太大容易导致用户注意力分散的问题，故考虑用其他方式替代底部sheet。

因为桌面端空间受限小，所以它能够支持更多种不同的模态底部sheet替代方案。

底部sheet替代方案	优势
菜单	能够保持选项在用户交互点附近
简易对话框	强势打断用户
页面中展开	不会像菜单或对话框一样打断用户
永久性显示所有选项	不需要通过按钮去显示其余选项
打开新的浏览器窗口	响应式尺寸以及独立的页面布局