Snackbars 與 Toasts

Snackbar 是一種針對操作的輕量級反饋機(jī)制，常以一個(gè)小的彈出框的形式，出現(xiàn)在手機(jī)屏幕下方或者桌面左下方。它們出現(xiàn)在屏幕所有層的最上方，包括浮動(dòng)操作按鈕。

它們會在超時(shí)或者用戶在屏幕其他地方觸摸之后自動(dòng)消失。Snackbar 可以在屏幕上滑動(dòng)關(guān)閉。當(dāng)它們出現(xiàn)時(shí)，不會阻礙用戶在屏幕上的輸入，并且也不支持輸入。屏幕上同時(shí)最多只能現(xiàn)實(shí)一個(gè) Snackbar。

Android 也提供了一種主要用于提示系統(tǒng)消息的膠囊狀的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能從屏幕上滑動(dòng)關(guān)閉。

用法

短文本

通常 Snackbar 的高度應(yīng)該僅僅用于容納所有的文本，而文本應(yīng)該與執(zhí)行的操作相關(guān)。Snackbar 中不能包含圖標(biāo)，操作只能以文本的形式存在。

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_do_20_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_dont_20_large_mdpi.png" alt="" />

(上圖)不可取

暫時(shí)性

為了保證可用性，Snackbar 不應(yīng)該成為通往核心操作的唯一方式。作為在所有層的上方，Snackbar 不應(yīng)該持續(xù)存在或相互堆疊。

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_do_22_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_dont_22_large_mdpi.png" alt="" />

(上圖)不可取

最多0-1個(gè)操作，不包含取消按鈕

當(dāng)一個(gè)動(dòng)作發(fā)生的時(shí)候，應(yīng)當(dāng)符合提示框和可用性規(guī)則。當(dāng)有2個(gè)或者2個(gè)以上的操作出現(xiàn)時(shí)，應(yīng)該使用提示框而不是 Snackbar，即使其中的一個(gè)是取消操作。如果 Snackbar 中提示的操作重要到需要打斷屏幕上正在進(jìn)行的操作，那么理當(dāng)使用提示框而非 Snackbar。

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_do_24_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_dont_24_large_mdpi.png" alt="" />

(上圖)不可取

不要阻擋了浮動(dòng)操作按鈕

垂直移動(dòng)浮動(dòng)操作按鈕到 Snackbar 的上方。

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_do_26_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-usage-spec_toast_dont_26_large_mdpi.png" alt="" />

(上圖)不可取

規(guī)格

手機(jī)端 Snackbar

• 單行 Snackbar 高度：48 dp
• 多行 Snackbar 高度：80 dp
• 文本：Roboto Regular 14 sp
• 操作按鈕：Roboto Medium 14 sp, 大寫文本
• 默認(rèn)背景填充色：#323232 100%

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-spec_toast_03_1_large_mdpi.png" alt="" /> http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-spec_toast_03_2_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-3-spec_toast_06_large_mdpi.png" alt="" />

平板/桌面端 Snackbar

• 單行 snackbar 高度：48 dp 以上
• 最小寬度：288 dp
• 最大寬度：568 dp
• 2 dp 圓角
• 文本：Roboto Regular 14 sp
• 操作按鈕：Roboto Medium 14 sp, 大寫文本
• 默認(rèn)背景填充色：#323232 100%

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-snackbar_toast_08_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-snackbar_toast_10_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-spec_toast_12_large_mdpi.png" alt="" />

Android toast

開發(fā)者可以自定義的 Toast 和它在屏幕上的位置。如果你打算自定義 Toast 的話，強(qiáng)烈建議按照上述 Snackbar 的樣式來設(shè)計(jì)。

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts--specs-snackbar_toast_14_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-snackbar_toast_16_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-toasts-specs-spec_toast_18_large_mdpi.png" alt="" />

原文：Snackbars and Toasts 翻譯：chenzimu7 校對：PoppinLp