Material Design——Snackbars

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

Material Design链接：Material Design——Snackbars

Snackbar在屏幕底部提供关于应用程序进程的简短信息。

一、用法

Snackbar告诉用户应用程序已经或将要执行的进程。它们暂时出现在屏幕底部。他们不应该中断用户体验，也不需要用户输入消失。

· 频繁

一次只能显示一个snackbar

· 操作

快捷键可以包含一个动作，因为它们会自动消失，所以这个动作不应该是“解散”或“取消”

△ 原则

· 信息的 

Snackbar提供应用程序进程的更新

· 临时的 

Snackbar暂时出现，并自行消失，而不要求用户输入被排除

· 上下文的

Snackbar放置在UI中最合适的区域

△ 什么时候使用Snackbar

Snackbar应该传递最小中断性的消息，这些消息不需要用户操作。

二、分析

1. Text label；2. Container；3. Action (optional)

△ 文本标签

Snackbar包含与正在执行的进程直接相关的文本标签，在移动平台上，文本标签最多可以包含两行文本。

文本标签是对已执行的进程的简短、清晰的更新。  

在移动平台上，最多使用两行文本来传递snackbar消息。  

在桌面和平板电脑这样的UI中，snackbar应该只有一行文本。

不要把图标放在零食栏里，如果您的邮件需要图标，请考虑使用警报。

△ 内容

Snackbar显示在带有灰色背景的矩形容器中，容器应该完全不透明，这样文字标签才能保持清晰。

Snackbar容器使用带有阴影的坚实背景色来突出内容。  

在宽布局中，扩展容器宽度以容纳较长的文本标签。  

Caution：只要文本清晰易读，应用程序就可以对容器背景应用轻微的透明性；Wrong：避免显著改变网吧容器的形状。

避免在没有仰角的情况下显示网吧容器。

△ 操作

Snackbar可以显示一个单一的文本按钮，让用户对应用程序执行的进程采取行动，Snackbar不应该是访问核心用例的唯一方法，它可以使应用程序可用。

要将操作与文本标签区分开来，文本按钮应显示彩色文本。  

左：文本标签不应该与文本按钮共享相同的颜色；右：不要在零食栏中使用填充或高举的按钮，因为它会引起太多的注意。

如果一个动作是长的，它可以显示在第三行。  

若要允许用户修改选项，请显示“撤消”操作。  

取消操作是不必要的，因为snackbar在默认情况下会自行消失。

三、行为

△ 显示与消失

Snackbar在没有警告的情况下出现，并且不需要用户交互，它们在至少4秒和最多10秒之后自动从屏幕上消失。

△ 持续的

当需要多个snackbar更新时，每次应该出现一个。

持续的快捷键应该出现在持久的底部导航上方。  

避免互相堆叠snackbars。  

不要将其他组件与Snackbar动画一起动画化，例如浮动动作按钮。

四、位置

△ 在UI的底部

Snackbar应该放在UI的底部，在app内容的前面，避免在经常使用的触控目标或导航前面放置Snackbar。

在内容前面放一个Snackbar。  

避免将导航栏放置在导航组件前面。

只有当UI不使用持久导航组件(如app bar或底部导航条)时，Snackbar才能跨越屏幕的整个宽度。跨UI整个宽度的Snackbar出现时将FAB向上推高。

Caution.：Snackbar可以跨越UI的整个宽度，但是它们不应该出现在导航或其他重要的UI元素(如浮动操作按钮)前面。

△ Snackbars和浮动动作按钮(FAB)

Snackbar应该出现在FAB上方。

Snackbar在FAB上

左：不要把snackbar放在FAB前面；右：不要把Snackbars放在FAB后面。

△ Snackbars和持久页脚元素

Snackbar应该直接出现在持久页脚元素的上方。

持久页脚元素上方的Snackbar。

将Snackbar放在中等延伸的纸前。

避免在 Snackbar 出现时将底部持久元素向上推高。

△ 宽布局的Snackba

在宽的布局中，如果在屏幕底部的相同位置上，Snackbar可以左对齐或中心对齐。

避免将被冲到版面边缘的Snackbar放置。  

避免将连续的Snackbar并排放置或相邻放置。

---

END.THANKS FOR YOUR READING~

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