交互控件科普系列！Snackbar 的常見樣式和設計注意事項總結

相比于 Toast，Snackbar 的好處十分明顯，可讀性更強，還可以兼容 1-2 個次要操作，適用場景更加廣泛。因此，我整理了 Snackbar 的常見樣式以及設計注意事項。

在學習控件的設計方法之前，先來補充下基礎 → 《這個控件叫什么？》

什么是Snackbar

Snackbar 是 Google Material Design 中提供的一種兼容提示與操作的消息控件。這也就意味著所有 Android 開發都可以直接通過官方插件來調用此控件。

此控件與 Toast 比較相似，通常用于低干擾度的消息提示，該消息可被忽略且不會打斷用戶當前的操作。但相對 Toast 而言，Snackbar 的優勢在于可讀性更強，還可以兼容 1-2 個次要操作，適用場景會更加廣泛，有興趣的同學不妨可以在設計開發中嘗試使用，你會發現確實比 Toast 好用太多了。

下面就詳解 Snackbar 的一些特性和玩法。

Snackbar的常見樣式

Snackbar 的樣式可以根據設備的寬度進行適配改變。

1. 窄屏：純文案

通常用于移動設備豎屏。最多展示兩行，每行最大展示字數可定義，超出兩行信息展示為……

2. 窄屏：文案+按鈕

通常用于移動設備豎屏。文案最多展示兩行，每行最大展示字數可定義，超出兩行信息展示為……

支持展示 1-2 個操作按鈕，按鈕顏色需突出（可自定義），當按鈕展示不下時（文案過長或按鈕文本過長）允許折行顯示。

3. 寬屏：純文案

通常用于移動設備橫屏。文案最多展示一行，最大展示字數可定義，超出的字數展示為……

4. 寬屏：文案+按鈕

通常用于移動設備橫屏。文案最多展示一行，最大展示字數可定義，超出的字數展示為…...支持展示 1-2 個操作按鈕，按鈕顏色需突出（可自定義）。

Snackbar的顯示與消失機制

顯示時不會打斷用戶操作，在以下情況下會消失：

• 用戶點擊 Snackbar 上的操作，觸發操作的同時消失；
• 用戶點擊屏幕任意位置時立即消失；
• 用戶不進行任何操作，持續 4～10 秒后自動消失（時長可自定義）。

Snackbar的顯示位置

當頁有 Bottom app bar 或 Bottom Navigation 時，顯示在其上方（不可貼邊或發生重疊）。

當頁無 Bottom app bar 或 Bottom Navigation 時，顯示在頁面底部（不可貼邊或發生重疊）。

當頁底部有 Floating action button 時，顯示在其上方（不可貼邊或發生重疊）。

橫屏時，顯示在頁面左下方（不可貼邊）。

Snackbar的唯一性

需展示多個 Snackbars 時，每次僅能顯示 1 個，之后的 Snackbar 應在前一個消失后再顯示。

Snackbar的超時重置

在 Snackbar 顯示期間出現了 Dialogs，關閉 Dialog 后，重新顯示該 Snackbar 并重置顯示時長，以確保用戶能讀完 Snackbar 上的信息。

Snackbar的幾點「不要」

• 不要使用與操作結果或進程無關的文案描述；
• 不要使用「忽略」或「取消」的按鈕文案，因為 snackbar 會自動消失；
• 不要使用 text button 之外的按鈕樣式，因為 snackbar 不會用于承載重要操作；
• 不要使用 2 個以上的按鈕，若確實需要，請考慮使用 Dialogs；
• 不要用于承載很重要的操作，若確實需要，請考慮使用 Dialogs；
• 不要遮擋 FAB 或底部導航。

使用范例

當用戶手動將某道題目成功添加至錯題本時，使用 snackbar 告知用戶收藏是否成功并顯示「添加標簽」按鈕引導，用戶可選擇點擊按鈕去添加標簽，也可以選擇置之不理。

當用戶成功提交問題反饋時，使用 snackbar 告知用戶提交是否成功。

歡迎關注作者的微信公眾號：「愚者筆記」