Material Design — App bars: bottomApp bars: bottom

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

App bars: bottom

Material Design链接:App Bars:bottom

Bottom app bar 在手机屏幕底部展示导航和关键操作。


用法

Bottom app bars 提供对 bottom navigation drawer 的访问以及最多四个操作(包括 floating action button在内)。

原则

·可操作

Bottom app bars 突出显示重要的屏幕操作并提高用户对 floating action button 的意识。

·灵活

Bottom app bars 的布局和操作会因为屏幕的需求而改变。

·人体工学

Bottom app bars 很容易从移动设备上的手持位置到达。

什么时候用

Bottom app bars 应该用于:

·仅限移动设备

·访问 bottom navigation drawer

·有两到五个操作的屏幕

Bottom app bars 不该应用于:

·带有 bottom navigation bar 的应用程序

·有一个或没有操作的屏幕

当只有一个或没有操作(除floating action button)时,不使用bottom app bars


组成

Bottom app bars 可以包含适用于当前屏幕上下文的操作。 Bottom app bars 包括最左侧的 navigation menu control 和floating action button(当存在时)。 如果 overflow menu control 包含在 bottom app bar 中,则会在其他操作后面放置。

位置

Bottom app bars 根据 FAB 的存在及其在 bar 中的位置具有三种不同的布局。 这些布局决定了可以包含在该 bar 中的操作的数量。

1、FAB 在中间

在主屏幕上使用 bottom app bars ,其中包含 navigation menu control 和突出的操作(如FAB)。 在 bar 的另一侧至少可以放置一个,最多两个操作。

2、FAB 在尾部

在需要 FAB 和三到四个附加操作的手机屏幕上使用FAB

3、无 FAB

当不需要 FAB 时, bottom app bar 可以容纳 navigation menu icon,并且最多可以在另一侧对齐四个操作

横向

在横向方向上,操作仍然与屏幕边缘对齐,便于手持访问

Floating Action Button

如果存在,FAB 将以两种方式之一显示在 bottom app bars 上:

1、重叠:FAB位于比 bottom app bar 更高的位置,并且对 bar 的形状没有影响。

2、嵌入:FAB处于与 bottom app bar 相同的高度,并且 bar 的形状转换为让 FAB 嵌入在 bottom app bar 中。

使用嵌入的方式可增加 FAB 的视觉突出性或突出定制的元素形状。 

不要将 FAB 放在 bottom app bar 外面,因为很难够到


行为

布局

为了支持 app 不同部分的意图,可以更改 bottom app bar 的布局和操作以适合每个屏幕。

例如,屏幕可以根据最适合屏幕内容显示更多或更少的操作。

为展示主要操作,此 bottom app bar 在其主屏幕上使用 FAB 居中的布局。 查看消息时,bottom app bar 布局更改为“FAB 在尾部”布局以适应其他上下文操作。

滚动

滚动时, bottom app bar 可以出现或消失:

向下滚动隐藏 bottom app bar, 如果有FAB,则它会脱离 bar 并保留在屏幕上。

向上滚动显示 bottom app bar,如果有FAB,则重新附着 FAB。

Bottom app bar 可以改变其边缘的形状,例如凹口以容纳FAB。 当 bar 脱离FAB时,会恢复到默认的形状。 在返回到屏幕并重新附着 FAB 后,bar 重新获得了缺口形状。


海拔

Bottom app bar 的海拔高度为8dp。 当与 FAB 配合时,FAB 的静止和凸起高度应该增加,以便在 bottom app bar 上方保持可见。

由 bottom app bar 生成的 menus(例如 bottom navigation drawer 或 overflow menu)与 bottom sheets 一样都高于 bar 的高度。

底部的导航抽屉从底部的应用栏打开。 抽屉在底部应用程序栏前打开,并显示顶部应用程序栏以在达到完整高度时关闭抽屉。

Bottom navigation drawer 从 bottom app bar 打开。 Drawer 在 bottom app bar 前面打开,并显示 top app bar 以在达到完整高度时关闭抽屉。

覆盖 bottom app bar 的元素

Bottom app bar 可以被键盘和其他临时表面覆盖。 如果 app 需要频繁阻挡 bar,应该使用另一个组件。


位置

导航

Bottom app bar 可显示 navigation menu icon 以打开 bottom navigation drawer,但该 bar 本身不包含任何导航操作(例如向上导航至主屏幕或一个关闭图标)。App 导航应放置在另一个组件中,例如 top app bar 或嵌入在屏幕中。

不要将导航操作置于bottom app bar中,因为它们可以被临时表面覆盖

与 top app bar 同时使用

当与 bottom app bar 一起使用时,top app bars 可以提供向上导航和其他操作。 在整个 app 中,操作应该在两个栏中进行组织和划分。

以下项目受益于特定的展示位置:

·将一个 navigation menu control 放置在 bottom app bar(为了可达性)

·放置一个 overflow menu control 作为尾部操作

·将操作(如搜索)置于整个 app 的一致位置

·在 top app bar 中放置破坏性操作,例如“删除”

在主屏幕上,不要在 top app bar 和 bottom app bar 中放置 navigation menu control 。 只有一个 app bar 应该有这个control

Bottom app bar 可以提供对操作(如导航和搜索)的一致访问,从而允许 top app bar 保留上下文相关的,屏幕特定的操作

Snackbars

为了避免妨碍,snackbars 和 toasts 应该在 bottom app bar 垂直上方进行动画展示。 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯AlloyTeam的专栏

移动端输入框填坑系列(一)

输入在移动端是一个很常用的功能,那么输入框必然是一个很重要的部分。然而,移动端输入框总会遇到各种各样的问题,无论是样式还是ios和android两端体验不一致都...

1.4K0
来自专栏吴小龙同學

Android屏幕适配不同的资源图片、布局

在Android 2.1版本之前,存放资源图片的文件夹名称为drawable,应用程序用到的所有的资源图片都放在其中,所以很难解决不同屏幕大小的图片适配问题。 ...

3577
来自专栏韩东吉的Unity杂货铺

零基础入门 19: UGUI ScrollBar

通常在实际项目中,对ScrollBar的应用非常简单,主要用于配合TableView或者ScrollView来进行使用,下一节我们将说明一下Unity里的Scr...

702
来自专栏大前端开发

微信小程序中实现瀑布流布局和无限加载

瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。

832
来自专栏Rovo89

iptables防火墙的实例教程

1122
来自专栏web前端-

Swiper开篇

 swiper是一款轻量级以及免费的移动设备触控滑块的js框架,主要运用于移动端的操作,但也可以用于pc端页面效果制作,完全的开源免费,

692
来自专栏韩东吉的Unity杂货铺

零基础入门 23: UGUI ScrollView

今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

691
来自专栏木子墨的前端日常

到底该用img还是background-image?

在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式...

761
来自专栏技术墨客

React学习(11)—— 高阶应用:Web组件

从概念上说,React 和 Web组件 分别用于解决不同的问题。Web组件提供了强大的封装特性来支持其可重复使用性,而React提供了一系列声明性(declar...

622

在Debian上安装McMyAdmin for Minecraft

McMyAdmin是最受欢迎的Minecraft服务器控制面板之一。它拥有与第三方mod的兼容性,专注于服务器安全性和管理服务器的Web界面流畅性。本指南介绍了...

341

扫码关注云+社区