#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~
Material Design链接:Banners
Banners显示突出的消息和相关可选操作。
一、使用
Banners显示一个重要、简洁的消息,并为用户提供地址(或取消Banner)的动作。它要求忽略用户的操作。
Banners应显示在屏幕顶部,在顶部应用程序栏下方。它们是持久的和非模态的,允许用户忽略它们或随时与它们交互。
△ 原则
· 可适当中断 横幅是中断性的,但它们的中断级别应该与它们所包含的信息和它们出现的上下文相匹配。
· 清晰 横幅传达简洁的信息,以及如果用户与他们交互会发生什么。
· 专注性 横幅包含一条消息和用户可以采取的特定操作。
二、分析
△ Banner container
承载Banner的卡片是矩形的,占满布局的全部宽度。在整个应用程序中,承载Banner的卡片应该被放置在一个一致且突出的位置,与屏幕内容共享相同的高度,一次只能显示一个Banner。
△ banner信息
banner消息在应用程序中传递更改或错误。
banner应该被视为整个应用程序中消息传递策略的一种。
△ 按钮
banner中的按钮应与banner的信息直接相关,并清楚地表示banner的操作,为了清晰起见,按钮必须配上相应文案,而不是图标。banner可以包含最多两个文本按钮,左边放置消极的操作,右边有确认操作,如果有足够的空间,可以将按钮放置在banner信息下面,或者放在同一行上。
△ Supporting illustration
banner可以使用允许的说明形式来补充他们的信息。
三、位置
banner应放置在布局或屏幕的顶部。
滚动时,banner通常会随内容移动并从屏幕上滚动,一次只能显示一个banner。
△ Banner和顶部应用程序栏
banner放置在屏幕顶部下方的应用程序栏顶部,它们可以是固定的,也可以是内容的滚动,视上下文而定:
· 在移动设备上,它们在屏幕外滚动内容,与应用程序内容在同一高度。
· 而在桌面上,它们仍然固定在屏幕的顶部,与顶部应用程序栏的高度相同。
△ Banners 和持续搜索功能
当存在持久搜索栏,banner会放置在搜索栏下面。
△ Banners 和底部导航栏
当底部导航出现时,banner应保留在屏幕顶部。
△ Banners in wide layouts
宽布局的banner横跨屏幕的整个宽度,它们和top app bar宽度相同,并在内容滚动时保持在屏幕上。
当垂直导航出现时,banner可以出现在内容上方,而不是显示在屏幕的整个宽度上。
△ Banners and pannable content
当滚动可滚动的内容时,Banner仍保留在屏幕上。
四、行为
△ 显示Banner
当屏幕加载内容时,通常会出现banner,屏幕加载后出现的banner应该从布局的顶部显示在屏幕上,如果banner与内容处于相同的高度(y轴),则会将内容向下推。
△ 关闭Banner
Banner必须一直在屏幕上显示,直到被用户取消为止。
END.THANKS FOR YOUR READING~
如有不当,还请多多指教~