Material Design—

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Banners

Banners显示突出的消息和相关可选操作。

一、使用

Banners显示一个重要、简洁的消息，并为用户提供地址（或取消Banner）的动作。它要求忽略用户的操作。
Banners应显示在屏幕顶部，在顶部应用程序栏下方。它们是持久的和非模态的，允许用户忽略它们或随时与它们交互。

Banners传达重要但不需要用户操作的消息。他们比 Snackbar 更突出，但带来的干扰比 dialogs 少。

△ 原则

· 可适当中断横幅是中断性的，但它们的中断级别应该与它们所包含的信息和它们出现的上下文相匹配。

· 清晰横幅传达简洁的信息，以及如果用户与他们交互会发生什么。

· 专注性横幅包含一条消息和用户可以采取的特定操作。

二、分析

1. Supporting illustration (optional)（插图）；2.Container（卡片容器）；3.Text（文案）；4.Buttons（操作按钮）

△ Banner container

承载Banner的卡片是矩形的，占满布局的全部宽度。在整个应用程序中，承载Banner的卡片应该被放置在一个一致且突出的位置，与屏幕内容共享相同的高度，一次只能显示一个Banner。

一个Banner出现在内容上方和顶部的应用程序栏下面。

上图为错误案例，因为一次只能展示一个banner。

△ banner信息

banner消息在应用程序中传递更改或错误。

banner应该被视为整个应用程序中消息传递策略的一种。

△ 按钮

banner中的按钮应与banner的信息直接相关，并清楚地表示banner的操作，为了清晰起见，按钮必须配上相应文案，而不是图标。banner可以包含最多两个文本按钮，左边放置消极的操作，右边有确认操作，如果有足够的空间，可以将按钮放置在banner信息下面，或者放在同一行上。

banner可能有一个或两个次重点的文本按钮。

左：避免使用单个按钮作为确认banner并将其取消的方法，关闭banner的按钮应与处理其信息的操作配对；右：banner的意图是最低限度的干扰，如果banner中的按钮需要额外的强调，一个包含形式的、通栏的按钮可以用于单个突出的动作(尽管它的突出程度可能会分散注意力)。

左：不要在banner信息中包含链接，所有可用的操作都应该表示为按钮；右：不要将不同强调级别的按钮组合在一起，相比于这个动作可能会更促进另一个动作。

左：除非没有足够的空间来显示它们，否则不要堆叠按钮；右：不要使用一个通过关闭图标来关闭banner，所有操作都应该用文本按钮。

△ Supporting illustration

banner可以使用允许的说明形式来补充他们的信息。

图标可以帮助传达banner的信息。

一个图标作为一个插图可能包含不同意思，使banner在布局中过于突出，插图支持banner信息，而不是主要的交流方法。

三、位置

banner应放置在布局或屏幕的顶部。

滚动时，banner通常会随内容移动并从屏幕上滚动，一次只能显示一个banner。

△ Banner和顶部应用程序栏

banner放置在屏幕顶部下方的应用程序栏顶部，它们可以是固定的，也可以是内容的滚动，视上下文而定：

· 在移动设备上，它们在屏幕外滚动内容，与应用程序内容在同一高度。

· 而在桌面上，它们仍然固定在屏幕的顶部，与顶部应用程序栏的高度相同。

Banner and a top bar

左：包含banner的表面应该与顶部的top app bar surface清晰地区分开来；右： banner不应该出现在顶部应用程序栏前面。

△ Banners 和持续搜索功能

当存在持久搜索栏，banner会放置在搜索栏下面。

一个banner出现在持久搜索栏下面。

△ Banners 和底部导航栏

当底部导航出现时，banner应保留在屏幕顶部。

△ Banners in wide layouts

宽布局的banner横跨屏幕的整个宽度，它们和top app bar宽度相同，并在内容滚动时保持在屏幕上。

宽布局中的横幅显示在与顶部应用程序栏相同的高度上。

当垂直导航出现时，banner可以出现在内容上方，而不是显示在屏幕的整个宽度上。

屏幕上带有导航抽屉的banner略高于内容(y轴上)，与该内容的高度相同。

避免堆叠多个banners。

△ Banners and pannable content

当滚动可滚动的内容时，Banner仍保留在屏幕上。

四、行为

△ 显示Banner

当屏幕加载内容时，通常会出现banner，屏幕加载后出现的banner应该从布局的顶部显示在屏幕上，如果banner与内容处于相同的高度（y轴），则会将内容向下推。

在同一高度的banner与内容相同，当它们从布局的顶部进入时，将内容向下推送。

△ 关闭Banner

Banner必须一直在屏幕上显示，直到被用户取消为止。

Banner可被用户关闭。

Banner一直存在，直到用户对其进行操作或将其删除为止。

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~

Material Design——Banners