App bars: bottom 底部应用栏

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

底部应用栏显示移动端界面底部的导航和关键操作。

​​1tf0wmbywi2.png插图

目录

用法剖析行为主题化规格

用法

底部App栏提供对底部导航抽屉和至多四个操作的访问,包括浮动操作按钮。

原则

mwug5nbh4u3.png插图(1)

使用场景

底部应用栏应该用于:

仅限移动设备访问底部导航抽屉界面有两到五个操作

底部应用栏不应该用于:

带有底部导航栏的应用界面只有一个或没有操作

vcrorzqp21w.png插图(2)

剖析

底部应用栏可以包含适用于当前界面上下文的操作。它们包括最左侧的导航菜单控件和浮动操作按钮(若有)。若底部应用栏中有溢出菜单,将其放在其他控件的末尾。

zszkou2alwe.png插图(3)容器导航抽屉控件浮动操作按钮(FAB)操作图标溢出菜单控件

位置

基于FAB是否存在以及其位置,底部应用栏有三种不同的布局。这些布局决定了可以应用栏中可以放多少操作。

FAB在中间

1tf0wmbywi2.png插图vkmfzum1taj.png插图(4)

在主界面上使用底部应用栏,其中包含导航菜单控件和突出操作(例如FAB)。可以在应用栏的另一侧放置最少一个,最多两个附加操作。

FAB在末端

qme4ddnr4hs.png插图(5)vkmfzum1taj.png插图(4)

在二级界面使用FAB,需要有FAB和三到四个其他操作。

没有FAB

ovwpdaijx43.png插图(6)vkmfzum1taj.png插图(4)

当不需要浮动操作按钮时,底部应用栏可以容纳导航菜单图标,并且在另一边最多可以放四个操作。

横屏

4r4rstxxqqg.png插图(7)vkmfzum1taj.png插图(4)

在横屏方向,操作保持靠边对齐,以便于手持访问。

浮动操作按钮

如果存在,浮动操作按钮(FAB)将以两种方式之一显示在底部应用栏上:重叠:FAB处于比底部应用栏更高的海拔,并且对应用栏的形状没有影响。内嵌:FAB与底部应用栏处于同一海拔,并且应用栏变形以让FAB停靠在底部应用栏的凹槽中。使用内嵌来增加FAB的视觉显著性或突出自定义元素形状。有关底部应用栏中内嵌FAB的更多规范,请参阅主题化部分。1tf0wmbywi2.png插图重叠FABxyghge1oeim.png插图(8)内嵌FAB5heapmk2ahv.png插图(9)kc35bd2v2yu.png插图(10)不要将FAB放在底部应用栏之外,因为那样更难触及。

行为

布局

为了支持App不同部分的意图,可以更改底部应用栏的布局和操作来适配每个界面。

例如,界面可以根据最适合界面内容的方式来显示更多或更少的操作。

要显示主要操作,此底部应用栏会在其主界面上使用居中的FAB布局。而查看消息时,底部应用栏将更改为“末端FAB”布局以适应更多的上下文操作。

滚动

滚动时,底部应用栏可以显示或消失:向下滚动隐藏底部应用栏。如果有FAB,它将从应用栏上分离并保留在界面上。向上滚动显示底部应用栏,如果有FAB,则它重新和FAB连接。底部应用栏可沿其边缘掘出一个形状,例如容纳FAB的凹槽。当应用栏与FAB分离时,应用栏将返回其默认形状。当返回界面并重新连接FAB后,应用栏又恢复其缺口形状。FAB可一直停留在界面上,即使在面滚动时底部应用栏隐藏起来的时候。

海拔高度

底部应用栏的高度为8dp。当与FAB配对时,要给FAB加上静止和抬升高度以便其在底部应用栏上方可见。t4b5z3tjymm.png插图(11)内容(0dp)Snackbar(6dp)底部应用栏(8dp)浮动按钮(12dp静止时)底部导航抽屉(16dp)

从底部应用栏弹出的菜单(例如底部导航抽屉或溢出菜单)展开后会是比底部应用栏更高的底部卡片(bottom sheet)。

此底部导航抽屉从底部应用栏弹出。抽屉在底部应用栏前面打开,并在菜单达到最大高度时会出现顶部应用栏,以便关闭抽屉。

覆盖底部应用栏的元素

底部应用栏可以被键盘和其他临时界面覆盖。如果你的App需要频繁遮挡应用栏,则应换成其他组件。jdkr3iabxps.png插图(12)

位置

导航

底部应用栏可以显示导航菜单图标以打开底部导航抽屉,但应用栏本身不包含任何导航操作(例如返回导航到主界面或关闭图标)。应用导航应放置在其他组件中,例如顶部应用栏或嵌入在界面上。0pvlvkesbmr.png插图(13)

与顶部应用栏配对

与底部应用栏一起使用时,顶部应用栏可以提供返回导航和其他操作。在整个App中,两个栏上的操作都有统一组织和划分。以下项目受益于特定的展示位置:将单个导航菜单控件放在底部应用栏中(为了可访问)将单个溢出菜单控件作为末端操作将操作(例如搜索)放置在整个应用中的固定位置在顶部应用栏中放置破坏性操作,例如“删除”

j3cprna45j2.png插图(14)

y0vu3ovvywx.png插图(15)

Snackbars

为避免阻塞,Snackbar和Toast应在底部应用栏上方垂直排列出现。有关其布局和位置的更多规范,请参阅Snackbars 。

mdsgl3ddez2.png插图(16)

在底部应用栏和FAB上方插入Snack或Toast。

zoeynchvakg.png插图(17)

不要把Snackbar放在底部应用栏或FAB前面。

主题化

Posivibe材料主题

此社交媒体App的底部应用栏已使用材料主题进行自定义。定制领域包括颜色和形状。zibar0fyrnh.png插图(18)Posivibe的自定义底部应用栏​​

颜色

Posivibe的底部应用栏在两个元素上使用了自定义颜色:容器和图标。nhz5vlx2gty.png插图(19)元素类别属性值容器表面颜色颜色不透明度#FFFFFF100%图标表面之上颜色不透明度#000000100%

形状

Posivibe底部应用栏的上边缘带有自定义形状。jdhygioewvl.png插图(20)元素属性值容器上边缘三角形边缘SVG路径数据: “l 42 42 l 42 -42″更多路径语法规范,请参阅https://www.w3.org/TR/SVG/paths.html。

规格

移动端竖屏

底部应用栏是仅限移动设备的组件,不适用于平板电脑或台式机。导航菜单的另一端使用最少1个,最多2个操作。

FAB在中间

jmbkbfdn533.png插图(21)

FAB在中间并切割应用栏

melkrmes4pv.png插图(22)

FAB在末端

最少2个,最多4个操作在FAB的另一端​muwjy2aryxs.png插图(23)

没有FAB

最少2个,最多4个操作在导航菜单的另一端​​wngi43z0adw.png插图(24)

移动端横屏

底部应用栏是仅限移动设备的组件,不适用于平板电脑或台式机。导航菜单的另一端放置最少1个,最多两个操作。​​m1n5nn1pl0i.png插图(25)

原文地址:Material Design

译者:珠珠

人已赞赏
UI设计

苹果的设计牛在哪儿

2020-10-11 1:19:54

UI设计

原创 | 一文彻底看懂UI设计适配与落地(上)

2020-10-11 2:06:37

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索