'還在用Toast?快試試更好用的Snackbar'

設計 DIALOG Android Google 人人都是產品經理 2019-07-28
"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

還在用Toast?快試試更好用的Snackbar

三、Snackbar的顯示與消失機制

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

  1. 用戶點擊Snackbar上的操作,觸發操作的同時消失;
  2. 用戶點擊屏幕任意位置時立即消失;
  3. 用戶不進行任何操作,持續4~10秒後自動消失(時長可自定義)。

四、Snackbar的顯示位置

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

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

還在用Toast?快試試更好用的Snackbar

三、Snackbar的顯示與消失機制

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

  1. 用戶點擊Snackbar上的操作,觸發操作的同時消失;
  2. 用戶點擊屏幕任意位置時立即消失;
  3. 用戶不進行任何操作,持續4~10秒後自動消失(時長可自定義)。

四、Snackbar的顯示位置

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

還在用Toast?快試試更好用的Snackbar

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

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

還在用Toast?快試試更好用的Snackbar

三、Snackbar的顯示與消失機制

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

  1. 用戶點擊Snackbar上的操作,觸發操作的同時消失;
  2. 用戶點擊屏幕任意位置時立即消失;
  3. 用戶不進行任何操作,持續4~10秒後自動消失(時長可自定義)。

四、Snackbar的顯示位置

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

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

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

還在用Toast?快試試更好用的Snackbar

三、Snackbar的顯示與消失機制

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

  1. 用戶點擊Snackbar上的操作,觸發操作的同時消失;
  2. 用戶點擊屏幕任意位置時立即消失;
  3. 用戶不進行任何操作,持續4~10秒後自動消失(時長可自定義)。

四、Snackbar的顯示位置

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

橫屏時,顯示在頁面左下方(不可貼邊)。

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

還在用Toast?快試試更好用的Snackbar

三、Snackbar的顯示與消失機制

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

  1. 用戶點擊Snackbar上的操作,觸發操作的同時消失;
  2. 用戶點擊屏幕任意位置時立即消失;
  3. 用戶不進行任何操作,持續4~10秒後自動消失(時長可自定義)。

四、Snackbar的顯示位置

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

橫屏時,顯示在頁面左下方(不可貼邊)。

還在用Toast?快試試更好用的Snackbar

五、Snackbar的唯一性

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

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

還在用Toast?快試試更好用的Snackbar

三、Snackbar的顯示與消失機制

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

  1. 用戶點擊Snackbar上的操作,觸發操作的同時消失;
  2. 用戶點擊屏幕任意位置時立即消失;
  3. 用戶不進行任何操作,持續4~10秒後自動消失(時長可自定義)。

四、Snackbar的顯示位置

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

橫屏時,顯示在頁面左下方(不可貼邊)。

還在用Toast?快試試更好用的Snackbar

五、Snackbar的唯一性

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

還在用Toast?快試試更好用的Snackbar

六、Snackbar的超時重置

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

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

還在用Toast?快試試更好用的Snackbar

三、Snackbar的顯示與消失機制

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

  1. 用戶點擊Snackbar上的操作,觸發操作的同時消失;
  2. 用戶點擊屏幕任意位置時立即消失;
  3. 用戶不進行任何操作,持續4~10秒後自動消失(時長可自定義)。

四、Snackbar的顯示位置

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

橫屏時,顯示在頁面左下方(不可貼邊)。

還在用Toast?快試試更好用的Snackbar

五、Snackbar的唯一性

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

還在用Toast?快試試更好用的Snackbar

六、Snackbar的超時重置

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

還在用Toast?快試試更好用的Snackbar

七、Snackbar的幾點“不要”

  1. 不要使用與操作結果或進程無關的文案描述
  2. 不要使用“忽略”或“取消”的按鈕文案,因為snackbar會自動消失
  3. 不要使用text button之外的按鈕樣式,因為snackbar不會用於承載重要操作
  4. 不要使用2個以上的按鈕,若確實需要,請考慮使用Dialogs
  5. 不要用於承載很重要的操作,若確實需要,請考慮使用Dialogs
  6. 不要遮擋FAB或底部導航

八、使用範例

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

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

還在用Toast?快試試更好用的Snackbar

三、Snackbar的顯示與消失機制

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

  1. 用戶點擊Snackbar上的操作,觸發操作的同時消失;
  2. 用戶點擊屏幕任意位置時立即消失;
  3. 用戶不進行任何操作,持續4~10秒後自動消失(時長可自定義)。

四、Snackbar的顯示位置

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

橫屏時,顯示在頁面左下方(不可貼邊)。

還在用Toast?快試試更好用的Snackbar

五、Snackbar的唯一性

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

還在用Toast?快試試更好用的Snackbar

六、Snackbar的超時重置

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

還在用Toast?快試試更好用的Snackbar

七、Snackbar的幾點“不要”

  1. 不要使用與操作結果或進程無關的文案描述
  2. 不要使用“忽略”或“取消”的按鈕文案,因為snackbar會自動消失
  3. 不要使用text button之外的按鈕樣式,因為snackbar不會用於承載重要操作
  4. 不要使用2個以上的按鈕,若確實需要,請考慮使用Dialogs
  5. 不要用於承載很重要的操作,若確實需要,請考慮使用Dialogs
  6. 不要遮擋FAB或底部導航

八、使用範例

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

還在用Toast?快試試更好用的Snackbar

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

"

相比於Toast,Snackbar的好處十分明顯——可讀性更強,還可以兼容1~2個次要操作,適用場景更加廣泛。因此,筆者也具體向我們介紹了Snackbar的常見樣式以及設計注意事項。

還在用Toast?快試試更好用的Snackbar

一、什麼是Snackbar

還在用Toast?快試試更好用的Snackbar

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

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

下面就由我來為你詳解Snackbar的一些特性和玩法吧~

二、Snackbar的常見樣式

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

1. 窄屏:純文案

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

還在用Toast?快試試更好用的Snackbar

2. 窄屏:文案+按鈕

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

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

還在用Toast?快試試更好用的Snackbar

3. 寬屏:純文案

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

4. 寬屏:文案+按鈕

通常用於移動設備橫屏。文案最多展示一行,最大展示字數可定義,超出的字數展示為…,支持展示1~2個操作按鈕,按鈕顏色需突出(可自定義)。

還在用Toast?快試試更好用的Snackbar

三、Snackbar的顯示與消失機制

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

  1. 用戶點擊Snackbar上的操作,觸發操作的同時消失;
  2. 用戶點擊屏幕任意位置時立即消失;
  3. 用戶不進行任何操作,持續4~10秒後自動消失(時長可自定義)。

四、Snackbar的顯示位置

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

橫屏時,顯示在頁面左下方(不可貼邊)。

還在用Toast?快試試更好用的Snackbar

五、Snackbar的唯一性

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

還在用Toast?快試試更好用的Snackbar

六、Snackbar的超時重置

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

還在用Toast?快試試更好用的Snackbar

七、Snackbar的幾點“不要”

  1. 不要使用與操作結果或進程無關的文案描述
  2. 不要使用“忽略”或“取消”的按鈕文案,因為snackbar會自動消失
  3. 不要使用text button之外的按鈕樣式,因為snackbar不會用於承載重要操作
  4. 不要使用2個以上的按鈕,若確實需要,請考慮使用Dialogs
  5. 不要用於承載很重要的操作,若確實需要,請考慮使用Dialogs
  6. 不要遮擋FAB或底部導航

八、使用範例

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

還在用Toast?快試試更好用的Snackbar

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

還在用Toast?快試試更好用的Snackbar

最後感謝閱讀,如有問題,歡迎留言討論哦~

本文由 @愚者秦 原創發佈於人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

"

相關推薦

推薦中...