Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
74
Help us understand the problem. What is going on with this article?
@m1noon

マテリアルデザイン#2 Subheaders, Switches, Snackbars & toasts

More than 5 years have passed since last update.

マテリアルデザインのコンポーネントのうち、

  • Subheaders
  • Switches
  • Snackbars & toasts の3つについて簡単にまとめる。

各コンポーネントがどういう目的で使われ、利用するときに気をつけるべきことはなにかを理解するためのメモ。
デザイナーさんが上げてきたデザインがマテリアルデザイン的に正しいかをチェックできるくらいの基礎知識を身につけることが目的。

Subheaders

サブヘッダー(Subheaders)は、リストやグリッドで表示されているコンテンツをいくつかのセクションに分けるために利用される特別なタイルである。

主にリスト、グリッド、メニューの3パターンに分類される。

また、スクロールした時にサブヘッダーは画面の上側に固定される。
さらにスクロールして次のサブヘッダーが上部に来た時に、以前のサブヘッダーは消えて次のサブヘッダーが上部に固定される。

components_subheaders4.png
Fig 1. リストのSubheadersの例。ここではFolders,FilesがSubheadersである。

仕様

リスト、グリッド、メニューそれぞれのサブヘッダーのレイアウトの規約などはこちらを参照。

Switches

ユーザーがオプションを選択するために用いられるコンポーネントで、以下の3つがある。

  • チェックボックス
    複数の選択肢を選択する場合に利用
  • ラジオボタン
    1つの選択肢を選択する場合に利用
  • On/Offスイッチ   on/offの状態を切り替えるだけの場合に利用

components_switches_check3.png
Fig 2. チェックボックスの例

components_switches_radio3.png
Fig 3. ラジオボタンの例

components_switches_switch3.png
Fig 4. スイッチの例

Snackbars & Toast

スナックバー(Snackbars)は、何らかの操作に対する簡易なフィードバックを提供するためのコンポーネントである。
モバイル端末では画面下部に、デスクトップでは左下に簡単なメッセージを表示する。
スナックバーは画面上のUI要素の上に表示し、アクションを含むこともできる。
その他の特徴を以下にまとめる。

  • 時間により自動で消える。
  • 画面のどこかをタッチしても消える。
  • スワイプで消す事もできる。
  • 入力を邪魔しない。
  • 一度に表示されるのは1つだけ。
  • Toastはスワイプできない、アクションを持たない点でスナックバーと異なる。

components_toasts_mobile1.png
Fig 5. スナックバーのサンプル。 Archivedというテキストで下部に通知されており、UNDOというボタンで処理の取り消し(アクション)を行える。

使い方

  • 操作の実行に直接関係する、わかりやすいテキストを表示する。
  • アイコンは使わない。
  • あくまで一時的なコンポーネントなので、アクションに対する核となる使用例としては用いず、他の方法で同じアクションができるように配慮する。
  • 1つのスナックバーに対してアクションは多くても1つ。
    キャンセルボタンなどはつけない。もし重要なアクションであり、キャンセルが必要な場合などはダイアログの使用を検討する。

components_toasts_usage6.png
fig 6. ダメな例。Dismiss(閉じる)ボタンは必要ない

  • Floating Action Buttonの上には被せない。

仕様

レイアウトの規約などはこちらを参照。
表示の際の動きのサンプルもここで見ることができる。

74
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
m1noon
渋谷で動画系アプリの開発などをしております。主にAndroid。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
74
Help us understand the problem. What is going on with this article?