Material design - Components– Snackbars & toasts

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

image

A mobile snackbar

【翻译】
移动端snackbar


Animation of a mobile snackbar

【翻译】
移动端snackbar 动画

[图片上传失败...(image-43ec89-1552294520261)]
Mobile in landscape with a snackbar

【翻译】
横屏移动端snackbar

image

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

image

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

image

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 动画

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容