#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~
Material Design链接：Banners
Banners显示突出的消息和相关操作。
一、使用
Banners显示一个重要、简洁的消息，并为用户提供地址（或取消Banner）的动作。它要求用户的行为被驳回。
Banners应显示在屏幕顶部，在顶部应用程序栏下方。它们是持久的和非模态的，允许用户在任何时候忽略它们或与它们交互。
Banners传达重要但不需要用户操作的消息。他们比 Snackbar 更突出，比对话更少干扰。
△ 原则
· 可适当中断 横幅是中断性的，但它们的中断级别应该与它们所包含的信息和它们出现的上下文相匹配。
· 清晰 横幅传达简洁的信息，以及如果用户与他们交互会发生什么。
· 专注性 横幅包含一条消息和用户可以采取的特定操作。
二、分析
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，所有操作都应该用文本按钮。
△ Supporting illustration
banner可以补充他们的信息使用支持插图。
图标可以帮助传达banner的信息。
作为插图使用的图标可能模棱两可，使banner在布局中过于突出。插图支持banner信息，而不是主要的沟通方法。
三、位置
banner应放置在布局或屏幕的顶部。滚动时，banner通常会随内容移动并从屏幕上滚动。一次只能显示一个横banner。
△ Banner和顶部应用程序栏
banner放置在屏幕顶部下方的应用程序栏顶部。它们可以是固定的，也可以是内容的滚动，视环境而定：
· 在移动平台上，它们以与应用程序内容相同的高度从屏幕外滚动。
· 而在桌面上，它们仍然固定在屏幕的顶部，与顶部的应用程序栏处于相同的高度。
Banner and a top bar
左：包含banner的表面应该与顶部的APP栏表面清晰地区分开来；右： banner不应该出现在顶部应用程序栏前面。
△ Banners 和持续搜索功能
当带有持久搜索栏的banner出现时，它会放置在搜索栏下面。
一个banner出现在持久搜索栏下面。
△ Banners 和底部导航栏
当底部导航出现时，banner应保留在屏幕顶部。
△ Banners in wide layouts
宽布置图中的banner横跨屏幕的整个宽度。它们显示在与顶部应用程序栏相同的高度，并在内容滚动时保持在屏幕上。
宽布局中的banner显示在与顶部应用程序栏相同的高度上。
当垂直导航出现时，banner可以出现在内容上方，而不是显示在屏幕的整个宽度上。
屏幕上带有导航抽屉的banner略高于内容(y轴上)，与该内容的高度相同。
避免堆叠多个banners。
△ Banners and pannable content
当滚动可滚动的内容时，Banner仍保留在屏幕上。
当滚动可滚动的内容时，Banner仍保留在屏幕上。
四、行为
△ 显示Banner
当屏幕加载内容时，通常会出现banner。屏幕加载后出现的banner应该从布局的顶部显示在屏幕上。如果banner与内容处于相同的高度，则会将内容向下推。
在同一高度的banner与内容相同，当它们从布局的顶部进入时，将内容向下推送。
△ 关闭Banner
Banner必须保留在屏幕上，直到被用户取消为止。
Banner可被用户关闭。
Banner一直存在，直到用户对其进行操作或将其删除为止。
END.THANKS FOR YOUR READING~
如有不当，还请多多指教~
网友评论