Material Design视觉设计语言(二)——Bars

Material Design（原质化设计）是谷歌开发的一种视觉设计语言，它遵循了优秀设计的经典原则，同时还结合了创新理念和新技术。

栏（Bars）

一、应用栏：底部（APP Bars：bottom）

底部的应用栏在移动屏幕底部用于显示导航和关键性操作。

底部应用栏提供了访问抽屉导航的入口，以及最多可放置4个操作按钮，包括悬浮操作按钮（FAB）。

原则

1、可操作的

底部的应用栏突出显示重要的屏幕操作，并且让浮动操作按钮更显眼。

2、灵活的

底部应用栏的布局和操作会根据屏幕的需要而变化。

3、人体工学

底部应用栏可以通过移动设备上的手持位置轻松到达。

何时使用

应该：

1.仅限移动设备

2.访问底部抽屉导航

3.屏幕有2～5个操作

避免：

1.已有底部导航栏的APP

2.屏幕只有1个或没有操作

布局

底部应用栏基于FAB的存在及其在栏中的位置，有三种不同的布局。这些布局决定了可以包含在栏中的操作数。

1、FAB居中

在主屏幕上使用底部应用栏，其中包含抽屉导航控件和突出操作按钮（例如FAB）。可以在栏的另一侧放置最少1个，最多2个附加操作。

2、FAB位于边缘

在次级页面上使用FAB，需要悬浮操作按钮和3～4个其他操作。

3、无FAB

当不需要悬浮操作按钮时，底部应用栏可以防止更多菜单里的操作，并且在相对边缘上最多可以放置4个操作图标。

悬浮操作按钮

若有悬浮操作图标，那么悬浮操作按钮（FAB）将以以下列两种方式，显示在底部应用栏上：

1.重叠：FAB的水平高于底部应用栏（基于Z轴），并且对条形的形状没有影响。

2.插入：FAB与底部应用栏处于同一水平，并且栏形状改变，以便于FAB可刚好放在底部应用栏中的凹槽中。

特别注意

1、覆盖

底部应用栏可以被键盘和其他临时元素覆盖。如果你的APP需要长时间/经常遮住底部应用栏，则应使用其他的组件。

2、导航

底部应用栏可以显示菜单图标以打开底部导航抽屉，但该栏本身不应包含任何导航操作（例如返回上一页面或关闭页面的图标）。APP的导航应放置在其他组件中，例如顶部应用栏或嵌入在屏幕上。

3、与顶部应用栏配对

与底部应用栏一起使用时，顶级应用栏可以提供向上的导航和其他操作。在整个APP中，应该在两个栏上明确组织和划分操作。

a.将单个导航菜单控件放在底部应用栏中（用于访问）

b.将单个更多菜单控件放于底部应用栏的边缘操作

c.将搜索操作（例如搜索图标）放置在整个应用中一致的位置

d.破坏性操作放置在顶部应用栏中，例如“删除”

4、Snackbars

Snackbars 与 Toasts 应在垂直于底部应用栏上方的位置进行动画处理显示，避免遮盖底部应用栏。

二、应用栏：顶部 （App bars: top）

顶部应用栏显示与当前屏幕相关的信息和操作。

原则

1、持久性

顶部应用栏始终显示在APP中每个页面的顶部，并且可以在滚动时消失。

2、引导性

顶部应用栏提供了引导用户浏览应用的可靠方式。

3、一致性

顶部应用栏的位置和内容应一致，以提高熟悉度。

类型

常规的顶部应用栏

下文操作栏

上下文操作栏为所选项提供操作。顶部应用栏可以转换为上下文操作栏，保持可操作状态直到执行操作或将其取消。

布局

对于从左往右看的语言，建议在顶部应用栏中放置元素：

a.将导航放在最左侧

b.将标题放在导航的右侧

c.将上下文操作放在导航的右侧

d.将更多菜单放在最右侧

对于从右往左看的语言，应该翻转放置位置。

1、两种表现方式

突出的顶部应用栏可包含更长的标题、背景图片，或为顶部应用栏提供更强的存在感。

在突出型的顶部应用栏中使用背景图片的注意事项：

2、导航图标

导航图标是可选的。当它出现在应用栏中时，它会与 Bar 的左侧对齐。它可以是：

a.菜单图标，用于打开导航抽屉

b.一个向上箭头，用于浏览APP的层次结构

c.后退箭头，返回上一个页面

3、标题

应用栏标题可用于描述：

a.用户当前所在的屏幕

b.用户当前所在的部分

c.正在使用的应用程序

4、操作项和更多菜单

将最常用的操作放在左侧，更少使用的操作依次向右放置。任何不适合应用栏的剩余操作项都可以放入更多菜单。

5、滚动

在滚动时，顶部应用栏可以保留在原位，也可以通过以下方式进行转换：

a.向上滚动时隐藏顶部应用栏

b.向下滚动时显示顶部应用栏

下文操作栏

用法

顶部应用栏可以转换为上下文操作栏，以便于为所选项目提供上下文操作。

例如，当用户从图库中选择照片时，顶部应用栏将转换为具有与所选照片相关的操作的上下文应用栏。

当顶部应用栏转换为上下文操作栏时，会发生以下更改：

a.栏的填充色发生变化

b.导航图标被替换为关闭图标

c.应用栏标题文字转换为上下文操作栏文字

d.顶部应用栏操作将替换为上下文操作

关闭后，上下文操作栏将转换回顶部应用栏。

布局

当顶部应用栏转换为上下文操作栏时，栏应该更改颜色以指示状态的更改。

三、底部导航 （Bottom Navigation）

底部导航栏使用户可以在APP中的主要页面之间自由切换。

底部导航栏位于屏幕的底部，通常显示3～5个入口。每个入口都由一个图标和一个文本标签（可选）表示。

点击底部导航图标时，用户将被带到与该图标关联的页面。

原则

1、人体工学

在手持移动设备上，底部导航栏很容易被触及。

2、一致性

若使用底部导航栏，其将显示在每个屏幕的底部。

3、关联性

通过底部导航栏进入的页面，应同等重要。

何时使用

应该：

a.优先级最高的页面/功能，应该从APP的任何位置都可以访问的

b.支持3～5个入口

c.仅限手机和平板使用

避免：

a.单个任务，例如查看单个电子邮件

b.用户首选项或设置

布局

根据入口数量：

a.3个入口：显示所的图标和文本标签。

b.4～5个入口：只有选中的入口才显示图标和文本标签。未选中的显示图标，如果空间允许，则可以同时放置文本标签。

注：国内APP一般很少遇到文本很长的状态，如果做国外APP项目的，可以参考上图这种方式。

标记

底部导航图标可以在右上角加标记。这些标记可以包含动态信息，例如许多待处理请求。

1.标记

2.带有数字的标记

3.具有最多字符数的标记

Material Design视觉设计语言概述（一）

原创： 宛苏