Material designのガイドをざっくり読んだのでざっくりまとめます。
マテリアルデザインについてのざっくりまとめ ～Components編その1～
マテリアルデザインについてのざっくりまとめ ～Components編その2～
マテリアルデザインについてのざっくりまとめ ～Components編その3～
この記事ではComponentsの Switches ～ Tooltips についてまとめます。
Switches
- 項目の選択などに使用する。
- Checkbox
- 複数の項目のON/OFFを選択する場合に使用する。単一項目のON/OFFのみの場合はSwitchを使用すべき。
- Radio button
- 複数項目から1つを選択する場合に使用する。
- 選択肢が一度に見られるようにしたい場合はRadio buttonが有効。スペースを節約したい場合はプルダウンメニューも使用可能。
- Switch
- 単一項目のON/OFFを設定する場合に使用する。
- 「ON」「OFF」などの文字列が表記されているのは推奨されない。
- モバイル端末でタッチしたときに放射状にUIを変化させると、指で塞がれて見えない場合にもわかりやすくすることができる。
Tabs
- グルーピングされたコンテンツの表示に使用する。
- 固定位置に一列で表示し、ネストしない。
- 選択されているタブはハイライトする。
- 見出しの文字列を省略・リサイズ・複数行表示しない。（この場合はスクロール可能なタブを利用する）
- 見出しはアイコンと文字列を混在させない。
Text fields
- テキスト入力に使用する。
- Single-line text field: 単一行の入力。カーソルが右端に達したら入力時左にスクロールする。
- Floating labels: テキストフィールド内のラベル（ヒント）が、入力を始めるとテキストフィールド上部に浮き上がる。
- Multi-line text field: 複数行の入力。カーソルが下端に達したら入力時縦スクロールする。
- Full-width text field: 画面幅いっぱいの入力。単一行・複数行ともに適用可能。
- Character counter: 文字数制限の表記。「現在の文字数 / 最大文字数」の形式で、制限オーバーの際はわかるように表記する。
- Auto-complete text field: ドロップダウンまたはインラインで入力候補を表示する。
- Search filter: アプリバーへの入力により、フィルター＆ソートされたコンテンツが下に表示される。
Tooltips
- フォーカス時に表示されるツールチップ。マウスオーバー、タブキーでの移動、タッチなどでフォーカスする。
- アイコンなどのグラフィカルな要素に対して表示する。文字列要素に対しては表示しない。
- 多くの情報（画像やフォーマットされた文字列など）を表示しない。
- 吹き出しのように方向を表示しない。代わりに、対象の要素から発生するような動作で表現する。