見出し画像

Segmented Controls と Toggle button の違いについて

Nabe

MaterialButtonToggleGroup というものが Android の material-components (*1) に追加されており(*2)、それが iOS の Segmented Controls に似ていたので、同じなのかどうか調べてみました。

Toggle button について

Toggle button と聞くと On/Off を切り替えるためのものに聞こえますが、Material Design のガイドラインには次のような説明が記されています。

Toggle buttons group a set of actions using layout and spacing. They’re used less often than other button types.
Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.

関連するアクションをグループ化して使うとあり、他の種類のボタンよりも使用頻度が低いともあります。
ガイドラインにはテキスト編集のオプションとしての例が載っており、bold の On/Off やテキストカラー切り替えのアクション、レイアウトの切り替えに使われています。

画像1

ちなみに Material Design の Button には以下のような説明が最初に書いてあり、

Buttons allow users to take actions, and make choices, with a single tap.

アクションだけがボタンの役目ではなく、選択の意味も含まれるようです。

Segmented Controls について 

HIG には次のような説明が記されています。  

A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. Like buttons, segments can contain text or images. Segmented controls are often used to display different views. In Maps, for example, a segmented control lets you switch between Map, Transit, and Satellite views.

強調したところにある通り、View の切り替えでよく使われるようです。
そのほかにもセグメント数の制限やコンテンツサイズを一定に保つようにといった制約があります。

画像2

Segmented Controls と Toggle button の違い

Segmented Controls は View の切り替えでよく使われるのに対し、Toggle button にははっきりした使い方が記されていません。

Toggle button がどこかで使われていないか探したところ、Android 版の Gmail のアプリのガイダンスでそれっぽいのが使われていました。

画像3

Toggle button を選択すると上の View が切り替わるため、Segmented Controls のような使い方をしています。
が、これはあくまでビューの選択という設定の切り替えに使用されており、上の View は設定した内容のプレビューであるため、画面の切り替えで使われているわけではありません。なので Segmented Controls とは違います。


あくまでガイドラインを基準にすればの話で、ユーザにとって使いやすいのであれば Toggle button を Segmented Controls のような感じでも使えそうです。

ちなみに Material Design のガイドラインは気づいたら更新されていたりするので、Toggle button についても更新される可能性があります。

参考

*1 Material Design の UI Components が詰まったライブラリ
*2 あくまでコード上で追加されており、ライブラリ自体は更新されていないのでこれを書いている 2019/3/9 時点では簡単にアプリへ導入できない

いいなと思ったら応援しよう！