Snackbars & toasts
Snackbars provide brief feedback about an operation through a message at the bottom of the screen.
【翻译】
Snackbars通过屏幕底部的消息提供有关操作的简要反馈。
Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons.
【翻译】
Snackbars包含与所执行的操作直接相关的一行文本。它们可能包含文本操作,但没有图标。
Toasts (Android only) are primarily used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen.
【翻译】
Toasts(仅限Android)主要用于系统消息传递。它们也显示在屏幕的底部,但可能不会从屏幕上滑动。
Usage - 用法
Only one snackbar may be displayed at a time. Each snackbar may contain a single action, neither of which may be “Dismiss” or “Cancel.”
【翻译】
一次只能显示一个snackbar。每个snackbar可以包含单个动作,这两个动作都可以是“关闭”或“取消”。
Behavior - 行为
Snackbars animate upwards from the bottom edge of the screen.
【翻译】
Snackbars从屏幕的底部边缘向上生成动画。
Snackbar specs - Snackbar规格
Action button: Roboto Medium 14sp, all-caps text
Mobile height: 48dp (single-line), 80dp (multi-line)
Desktop snackbar height: 48dp
【翻译】
操作按钮:Roboto Medium 14sp,全大写文本
移动高度:48dp(单线),80dp(多线)
桌面snackbar高度:48dp
Usage - 用法
Show only one snackbar on screen at a time.
【翻译】
一次只在屏幕上显示一个snackbar。
Placement - 放置
Snackbars appear above most elements on screen, and they are equal in elevation to the floating action button. However, they are lower in elevation than dialogs, bottom sheets, and navigation drawers.
【翻译】
Snackbars出现在屏幕上的大多数元素之上,它们在海拔高度上等于浮动动作按钮。但是,它们的高度低于对话框,底部工作表和导航抽屉。
Behavior - 行为
Upon entrance, snackbars animate upwards from the bottom edge of the screen. When they appear, they do not block input.
They exit by being swiped off-screen or automatically disappear after a timeout or user interaction elsewhere (such as summoning a new surface or activity).
【翻译】
进入时,snackbars从屏幕的底部边缘向上生成动画。当它们出现时,它们不阻止输入。
他们在屏幕外滑动或者在其他地方(例如召唤新的表面或活动)超时或用户交互后自动消失退出。
Very short text strings - 非常短的文本字符串
Snackbars should contain a single line of text directly related to the operation performed. They may contain a text action. They cannot contain icons.
【翻译】
Snackbars应该包含与所执行的操作直接相关的一行文本。它们可能包含文本操作。它们不能包含图标。
Do.
[图片上传失败...(image-eff116-1552294520261)]
Don't.
Transient - 短暂的
Snackbars automatically time out from the screen. For usability reasons, snackbars should not contain the only way to access a core use case. They should not be persistent or be stacked, as they are above other elements on screen.
On Android, when an unrelated dialog or popup occurs while the snackbar is up, the snackbar timeout will reset upon the window focus being regained. This is to ensure that the user will be able to read the snackbar for the full intended duration.
【翻译】
Snackbars自动从屏幕超时。出于可用性原因,Snackbars不应该包含访问核心用例的唯一方法。它们不应该是持久的或堆叠的,因为它们在屏幕上的其他元素之上。
在Android上,当Snackbars启动时发生不相关的对话框或弹出窗口时,快门按钮超时将在重新获得窗口焦点时重置。这是为了确保用户能够在整个预期的持续时间内阅读Snackbars。
Do.
[图片上传失败...(image-1b7a5d-1552294520261)]
Don't.
0-1 actions, not dismiss or cancel - 0-1动作,不关闭或取消
If an action is present, comply with dialog spacing and affordance rules. For two or more actions, use a dialog, not a snackbar, even when one of the actions is a dismiss action. If the action described in the snackbar is important enough to block the use of the screen, it should be a dialog.
【翻译】
如果存在操作,请遵守对话框间距和可用性规则。 对于两个或多个操作,使用对话框,而不是snackbar,即使其中一个操作是忽略操作。 如果快餐栏中描述的动作足够重要以阻止屏幕的使用,那么它应该是一个对话框。
Do.
[图片上传失败...(image-52b8a8-1552294520261)]
Don't.
Don’t block the floating action button - 不要阻止浮动操作按钮
Move your floating action button vertically to accommodate the snackbar height.
【翻译】
垂直移动浮动按钮以适应snackbar高度。
Do.
Don't.
Consecutive snackbars - 连续snackbars
There is only ever one snackbar displayed. When a second snackbar is triggered while the first is displayed, the first should start the contraction motion downwards before the second one animates upwards.
【翻译】
只有一个snackbars显示。当在显示第一snackbars时触发第二snackbars,第一snackbars应当在第二snackbars向上动画之前向下开始收缩运动。
Two consecutive snackbars with different content.
【翻译】
两个连续snackbars有不同的内容。
Two consecutive snackbars with the same content.
【翻译】
两个连续snackbars具有相同的内容。
Specs - 规格
Mobile - 移动
Single-line snackbar height: 48dp
Multi-line snackbar height: 80dp
Text: Roboto Regular 14sp
Action button: Roboto Medium 14sp, all-caps text
Default background fill: #323232 100%
【翻译】
单线snackbar高度:48dp
多行snackbar高度:80dp
文字:Roboto Regular 14sp
操作按钮:Roboto Medium 14sp,
大写文本 默认背景填充:#323232 100%
[图片上传失败...(image-973eb9-1552294520261)]
A mobile snackbar
【翻译】
移动端snackbar
A mobile snackbar
【翻译】
移动端snackbar
Animation of a mobile snackbar
【翻译】
移动端snackbar 动画
[图片上传失败...(image-43ec89-1552294520261)]
Mobile in landscape with a snackbar
【翻译】
横屏移动端snackbar
Specs of a mobile snackbar
【翻译】
移动端snackbar规格
Tablet/desktop - 平板/桌面
Single-line snackbar height: 48dp tall
Minimum width: 288dp
Maximum width: 568dp
2dp rounded corner
Text: Roboto Regular 14sp
Action button: Roboto Medium 14sp, all-caps text
Default background fill: #323232 100%
Alignment: Centered or left-aligned 24dp from the left and bottom edges of the screen
【翻译】
单行snackbar高度:48dp高
最小宽度:288dp
最大宽度:568dp
2dp圆角
文字:Roboto Regular 14sp
操作按钮:Roboto Medium 14sp,全帽文本
默认背景填充:#323232 100%
对齐:从屏幕的左边缘和底部边缘居中或左对齐24dp
[图片上传失败...(image-7cd88a-1552294520261)]
A center aligned tablet/desktop snackbar
【翻译】
中心对齐平板电脑/桌面snackbar
A center-aligned tablet/desktop snackbar
【翻译】
中心对齐平板电脑/桌面snackbar
[图片上传失败...(image-ddf41b-1552294520261)]
A left-aligned tablet/desktop snackbar
【翻译】
左对齐平板电脑/桌面snackbar
[图片上传失败...(image-f0cfae-1552294520261)]
A left-aligned tablet/desktop snackbar
【翻译】
左对齐平板电脑/桌面snackbar
Specs of tablet/desktop snackbar
Snackbar height: 48dp
Snackbar left and right padding: 24dp
Snackbar top and bottom padding: 14dp
Snackbar button left padding: 48dp
【翻译】
平板电脑/桌面snackbar规格
Snackbar高度:48dp
Snackbar左右填充:24dp
Snackbar顶部和底部填充:14dp
Snackbar按钮左填充:48dp
Animation of a tablet/desktop snackbar
【翻译】
平板电脑/桌面snackbar 动画