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

相关文章

来自专栏理论坞

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

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

804
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

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

1990
来自专栏cnblogs

如何写好css系列之button

      现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必...

2177
来自专栏无原型不设计

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

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

3625
来自专栏Material Design组件

Human Interface Guidelines —— Buttons

1506
来自专栏落影的专栏

一个多UITableview的左右滑动简单解决方案

前言 本文源自实际开发中的需求,核心的要求有几个: 1、多个UITableview要支持左右滑动; 2、点击Tab也要有UITableview的滑动切换效果...

3386
来自专栏EAWorld

像踢球一样玩转Redux和React

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

2867
来自专栏编程微刊

小程序点击轮播图跳转到tab导航界面

一切准备好之后,在wxml文件里面,我们要使用 bindtap在图片上绑定一个事件,在js里面写事件函数的具体操作。

2282
来自专栏ThoughtWorks

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

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

3074
来自专栏葡萄城控件技术团队

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Des...

1912

扫码关注云+社区