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

当前位置:首页>设计文章>UI>Material Design视觉设计语言(二)——Bars

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

栏(Bars)

一、应用栏:底部(APP Bars:bottom)

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

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

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

原则

1、可操作的

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

2、灵活的

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

3、人体工学

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

何时使用

应该:

1.仅限移动设备

2.访问底部抽屉导航

3.屏幕有2~5个操作

避免:

1.已有底部导航栏的APP

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

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

布局

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

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

1、FAB居中

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

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

2、FAB位于边缘

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

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

3、无FAB

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

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

悬浮操作按钮

若有悬浮操作图标,那么悬浮操作按钮(FAB)将以以下列两种方式,显示在底部应用栏上:

1.重叠:FAB的水平高于底部应用栏(基于Z轴),并且对条形的形状没有影响。

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

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

特别注意

1、覆盖

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

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

2、导航

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

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

3、与顶部应用栏配对

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

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

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

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

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

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

4、Snackbars

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

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

二、应用栏:顶部 (App bars: top)

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

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

原则

1、持久性

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

2、引导性

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

3、一致性

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

类型

常规的顶部应用栏

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

下文操作栏

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

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

布局

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

a.将导航放在最左侧

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

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

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

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

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

1、两种表现方式

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

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

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

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

2、导航图标

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

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

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

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

3、标题

应用栏标题可用于描述:

a.用户当前所在的屏幕

b.用户当前所在的部分

c.正在使用的应用程序

4、操作项和更多菜单

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

5、滚动

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

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

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

下文操作栏

用法

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

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

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

a.栏的填充色发生变化

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

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

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

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

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

布局

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

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

三、底部导航 (Bottom Navigation)

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

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

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

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

原则

1、人体工学

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

2、一致性

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

3、关联性

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

何时使用

应该:

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

b.支持3~5个入口

c.仅限手机和平板使用

避免:

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

b.用户首选项或设置

布局

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

根据入口数量:

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

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

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

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

标记

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

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

1.标记

2.带有数字的标记

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

宛苏

温馨提示:

文章标题:Material Design视觉设计语言(二)——Bars

文章链接:https://www.uied.cn/47174.html

更新时间:2023年12月22日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI交互产品

从0到1构建设计规范的实战指南

2023-12-22 22:07:57

UI交互产品

Material Design 视觉设计语言(三)提示

2023-12-22 23:15:12

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