選択肢から選ぶ部品の違い
ドロップダウン・アクションシート・コンテキストメニュー・チップ
いくつかの選択肢から選ぶUIの違いです。最初から見えているか、どこに出るかが違います。
表で比べる
| ドロップダウンメニュー | アクションシート | コンテキストメニュー | チップ | |
|---|---|---|---|---|
| 最初から見えている？ | 今の選択だけ見える | 見えない（ボタンを押すと出る） | 見えない（長押しで出る） | すべて見えている |
| 出る場所 | ボタンのすぐ下 | 画面の下 | 押した物のそば | その場に並んでいる |
| 選べる数 | 1つ | 1つ | 1つ | いくつでも |
| よくある例 | 並び替え・都道府県 | 写真の共有・削除 | 写真のコピー・削除 | お店のジャンルの絞り込み |
こんなときは、これ
- 選択肢が多く、場所を取りたくないドロップダウンメニュー →
- スマホで短い選択肢から選ばせたいアクションシート →
- 画面をすっきりさせたまま操作を用意したいコンテキストメニュー →
- よく使う条件をワンタップで切り替えたいチップ →
迷ったら選択肢が少なくよく使うならチップ、多いならドロップダウンです。