5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

マテリアルデザインのsnackbarとtoastの違い

Posted at

同じ文脈で使われがちなSnackbarとToastの違いを調べてみました。

snackbarとtoastの違い

両方とも簡易的なメッセージを表示するためのUIコンポーネントで、その2つには表示方法や目的に違いがあります。

一般的にSnackbarは、ユーザーアクションに関連するメッセージを表示するために使用されます。例えば、フォームが正常に送信された場合や、ログインが成功した場合に、画面下部に短時間表示されるメッセージがSnackbarによって表示されます。Snackbarは、同時に1つのメッセージしか表示できず、表示時間が短いため、ユーザーに過剰な情報を与えないように配慮されています。またメール送信後に送信が完了しました。のメッセージとともに「送信取り消し」などのアクションを持つことができます。

一方、Toastは、アプリケーション内での操作や出来事に関する独立した情報を表示するために使用されます。例えば、新着メッセージの通知や、アプリケーションが正常に動作していることを示すためのメッセージを表示する際に、画面の任意の位置に表示されることがあります。Toastには表示時間が設定されていることが一般的で、メッセージが非常に簡潔であることが求められます。アクションは持ちません。

簡潔なまとめ

Snackbar

  • ユーザーが行ったアクションへのフィードバックとして使われる
  • 「送信取り消し」など、ユーザーが実行できるアクションを持たせることがある

toast

  • ユーザーのアクションとは関係なしの通知(アプリからのお知らせや通知)
  • アクションを持たない

ちょっとした疑問

例えばアプリのPush通知なんかは何らかのアクション(ページ遷移など)ができることがほとんどなのですがつまりスナックバーと言えるのかな? iOSエンジニアはトーストって言っているけど(?)
少なくとも大体の意味だけ知っていればなにか調べ物のときには役立ちそう。

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?