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

相关文章

来自专栏hrscy

怎样在 Unity 中创建 UI

在现在每一个软件应用中,用户界面(UI)都是核心的特征。游戏也没有抛弃这一规则。有非常多的游戏都使用 UI 来显示一些信息,比如生命值,技能,地图,武器的弹药,...

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

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

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

1102
来自专栏前端知识分享

第81天:jQuery 插件使用方法

在追求页面互动效果的时代,大家都想把页面效果做的美轮美奂,这一切都离不开前端技术脚本Javascript,而最近常被人用到的Javascript库文件则是jQu...

772
来自专栏程序员的碎碎念

你用JavaGUI做的课程设计是这样子的吗?

很多人学完《Java基础教程》后,接着一般都会用GUI来做一下课程设计,多数同学通常选择用插件WindowBuilder来设计程序的界面,认为用插件做会更快更...

4198
来自专栏娱乐心理测试

移动端图标生成工具

680
来自专栏编程微刊

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

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

1542
来自专栏落影的专栏

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

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

3106
来自专栏ThoughtWorks

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

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

2954
来自专栏Material Design组件

Human Interface Guidelines —— Buttons

1376
来自专栏理论坞

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

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

774

扫码关注云+社区