Material Design 设计语言（二）栏

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

  栏（Bars）

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

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

       

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

原则

1、可操作的

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

2、灵活的  

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

3、人体工学

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

何时使用

应该：

• 仅限移动设备

• 访问底部抽屉导航

• 屏幕有2～5个操作

避免：

• 已有底部导航栏的APP

• 屏幕只有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中，应该在两个栏上明确组织和划分操作。

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

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

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

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

             

4、Snackbars

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

      

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

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

             

原则

1、持久性

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

2、引导性

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

3、一致性

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

类型

常规的顶部应用栏

       

下文操作栏

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

        

布局

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

• 将导航放在最左侧

• 将标题放在导航的右侧

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

• 将更多菜单放在最右侧

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

               

1、两种表现方式

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

              

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

               

2、导航图标

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

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

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

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

3、标题

应用栏标题可用于描述：

• 用户当前所在的屏幕

• 用户当前所在的部分

• 正在使用的应用程序

4、操作项和更多菜单

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

5、滚动

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

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

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

下文操作栏

用法

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

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

 

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

• 栏的填充色发生变化

• 导航图标被替换为关闭图标

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

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

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

布局

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

三、底部导航 （Bottom Navigation）

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

       

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

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

原则

1、人体工学

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

2、一致性

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

3、关联性

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

何时使用

应该：

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

• 支持3～5个入口

• 仅限手机和平板使用

避免：

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

• 用户首选项或设置

布局

              

根据入口数量：

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

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

              

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

标记

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

             

1. 标记

2. 带有数字的标记

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

– 推 荐 阅 读 –

Material Design 设计语言（一）概述

iOS平台设计规范-精简总结篇

iOS平台设计规范（八）控件-Controls

iOS平台设计规范（七）视图-Views