〜ほぼ Daily UI vol.15〜On/Off Switch

Design an On/Off Switch. Consider what's being turned on/off and how it should be done.

参考にしたサイト・アプリ

overreacted
https://overreacted.io/

ユースケースが決まっている場合はこういうのいいかも。
50px x 24px

ZOOM
押すと起こるアクションをテキストにしているのがグッドだと思った

iOS
定番のやつ。とりあえずこれにしとけばいいのでは。

デザインを考える上でのポイント

何が On で何が Off になっているのかを分かりやすくする
on/off という boolean な状態はシンプルであるはずだが、稀に何が On で何が Off というのか分かりづらいものがある。マイクをオフみたいなのはよく槍玉に上げられると思う

toggle buttonにするかアクションの切り替えっぽくするか
ちょっと言葉で説明しづらいが、要するに

これにするか

これにするか

という話である。

思うに、前者はそのtoggleによって同じ画面のものが影響を受けない場合はこちらの方が適切で、同じコンテキストにある場合は後者の表現の方が適切なのではないかと思う。

toggle button の場合は大体 幅52px 高さ 24px - 32px
多分大体の文脈においてリストUIの中で表示されると思うので、その高さとpaddingに依存するとは思うが大体上記のようなサイズで作られる

自分のデザイン

リモートワーク中にSlackのステータスを休憩中か仕事中かを切り替えられるToggleみたいな体で作ってみた。最初背景色を喫茶店ぽい茶色とか、仕事時を濃いめの青とかにしてみたが、どうしてもなんやこれ感が拭えなかったので、普通の配色にしてみた。

せっかくなのでアニメーション付きで作ってみた。

思ったこと

こういう遊び心を本業でも発揮したいですね。