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 条评论
登录 后参与评论

相关文章

来自专栏ThoughtWorks

使用Enzyme测试React(Native)组件|洞见

组件化与UI测试 在组件化出现之前,我们不谈UI的单元测试,哪怕是对于UI页面进行测试都是一件非常困难的事情。其实组件化并不完全是为了复用,很多情况下也恰恰是为...

3324
来自专栏无原型不设计

盘点3款原型工具的部件样式

使用样式是集中管理整个项目的外观及感受的最优方法,通过部件样式可以像word一样对组件进行快速方便的样式设置,大大提高了制作原型的效率。当项目要更新视觉设计时...

3755
来自专栏日常学python

用python来给图片加水印

有时候我想在图片上添加自己的水印来防止别人盗图,所以今天给大家分享如何用python给我们的图片添加上水印。我们先来看看效果。

1423
来自专栏互联网杂技

HTML head 头标签 总结

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多...

5147
来自专栏Material Design组件

Human Interface Guidelines —— Buttons

1576
来自专栏理论坞

那些你不知道的Photoshop冷知识⑤——CC2015评测专题

笔者在探索新版本时,首先注意的便是首选项的变化,可以发现这次更新之后首选项侧边栏多了不少东西,点进去之后才发现原来是进行了重新分类,那么有哪些好玩的功能呢?介绍...

894
来自专栏Material Design组件

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

2504
来自专栏EAWorld

像踢球一样玩转Redux和React

引言 React的核心是使用组件定义界面的表现,是一个View层的前端库,简单来说它就是一堆前端组件,view,view,view,重要的事情...

3097
来自专栏js编程在工科课程中的简单应用

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

2310
来自专栏娱乐心理测试

移动端图标生成工具

1550

扫码关注云+社区

领取腾讯云代金券