App bars: bottom 底部应用栏

时间:2020-09-02 03:24:54 来源:

【摘要】 App bars: bottom 底部应用栏考必过小编为大家整理了关于App bars: bottom 底部应用栏的信息,希望可以帮助到大家!

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

​​

目录

  1. 用法
  2. 剖析
  3. 行为
  4. 主题化
  5. 规格


用法

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

原则


使用场景

底部应用栏应该用于:

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

底部应用栏不应该用于:

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

剖析

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

  1. 容器
  2. 导航抽屉控件
  3. 浮动操作按钮(FAB)
  4. 操作图标
  5. 溢出菜单控件

位置

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

FAB在中间

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

FAB在末端

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

没有FAB

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

横屏

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

浮动操作按钮

如果存在,浮动操作按钮(FAB)将以两种方式之一显示在底部应用栏上:

    1. 重叠:FAB处于比底部应用栏更高的海拔,并且对应用栏的形状没有影响。
  1. 内嵌:FAB与底部应用栏处于同一海拔,并且应用栏变形以让FAB停靠在底部应用栏的凹槽中。

使用内嵌来增加FAB的视觉显著性或突出自定义元素形状。有关底部应用栏中内嵌FAB的更多规范,请参阅主题化部分。

重叠FAB

内嵌FAB

 

不要将FAB放在底部应用栏之外,因为那样更难触及。

行为

布局

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

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

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

滚动

滚动时,底部应用栏可以显示或消失:

  1. 向下滚动隐藏底部应用栏。如果有FAB,它将从应用栏上分离并保留在界面上。
  2. 向上滚动显示底部应用栏,如果有FAB,则它重新和FAB连接。

底部应用栏可沿其边缘掘出一个形状,例如容纳FAB的凹槽。当应用栏与FAB分离时,应用栏将返回其默认形状。当返回界面并重新连接FAB后,应用栏又恢复其缺口形状。

FAB可一直停留在界面上,即使在面滚动时底部应用栏隐藏起来的时候。

海拔高度

底部应用栏的高度为8dp。当与FAB配对时,要给FAB加上静止和抬升高度以便其在底部应用栏上方可见。

  1. 内容(0dp)
  2. Snackbar(6dp)
  3. 底部应用栏(8dp)
  4. 浮动按钮(12dp静止时)
  5. 底部导航抽屉(16dp)

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

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


覆盖底部应用栏的元素

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

位置

导航

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


与顶部应用栏配对

与底部应用栏一起使用时,顶部应用栏可以提供返回导航和其他操作。在整个App中,两个栏上的操作都有统一组织和划分。

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

  1. 将单个导航菜单控件放在底部应用栏中(为了可访问)
  2. 将单个溢出菜单控件作为末端操作
  3. 将操作(例如搜索)放置在整个应用中的固定位置
  4. 在顶部应用栏中放置破坏性操作,例如“删除”


Snackbars

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

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

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

主题化

Posivibe材料主题

此社交媒体App的底部应用栏已使用材料主题进行自定义。定制领域包括颜色和形状。

Posivibe的自定义底部应用栏

​​

颜色

Posivibe的底部应用栏在两个元素上使用了自定义颜色:容器和图标。

元素 类别 属性
容器 表面颜色 颜色
不透明度
#FFFFFF
100%
图标

表面之上

颜色

不透明度

#000000

100%

形状

Posivibe底部应用栏的上边缘带有自定义形状。

元素 属性
容器 上边缘

三角形边缘SVG

路径数据: “l 42 42 l 42 -42″

更多路径语法规范,请参阅https://www.w3.org/TR/SVG/paths.html。

规格

移动端竖屏

底部应用栏是仅限移动设备的组件,不适用于平板电脑或台式机。

导航菜单的另一端使用最少1个,最多2个操作。

FAB在中间

FAB在中间并切割应用栏

​​

FAB在末端

最少2个,最多4个操作在FAB的另一端

​​

没有FAB

最少2个,最多4个操作在导航菜单的另一端

​​

移动端横屏

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

​​

以上就是App bars: bottom 底部应用栏的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

上一篇      下一篇
技能类相关推荐 更多>>
研究了100多个App后,总结了顶部栏UI设计的模式和规则 写给新人的App动效设计方案基础科普 我用新拟物化设计风格,做了一个App改版案例<i class=" 为什么说 Apple 的设计细节是魔鬼:声音篇<i class=" Apple 出品!如何做好机器学习时代的产品体验设计:输入 Apple 出品!如何做好机器学习时代的产品体验设计:输出 深色模式设计实战!优酷 App 的“黑”化之路<i class= 为什么说 Apple 的设计细节是魔鬼:UI 篇
技能类热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net