产品经理@IT·互联网Material design - Android

Material Design 设计语言(二)栏

2019-07-22  本文已影响19人  宛苏

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项目的,可以参考上图这种方式。

标记

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

· 标记

· 带有数字的标记

· 具有最多字符数的标记

上一篇 下一篇

猜你喜欢

热点阅读