〜ほぼ Daily UI vol.14〜 Countdown Timer

2020年6月9日 23:07

Design a Countdown Timer. Is it for an app? An interface for an oven? A sport related countdown? A launch countdown for NASA?

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

iOS

ペルソナ5
オシャ過ぎて参考にならない。

Olympic
今って表示どうなってんだろ。

上限を決める
上限が分なのか時間なのか月なのか、果ては年なのかでデザインはかなり影響を受けると思う。例えば iOS のカウントダウンタイマーは23時間59分59秒を上限としている。

なのでユースケースに応じた上限時間を最初に決める必要がある。

状態遷移
時間を決めてスタートする -> 停止、再会、キャンセル

の状態があるのでそれぞれの状態でその状態でしか実行できないアクションだけ描いてあげると、ユーザも楽だし実装も楽になると思う。

数字が単位ごとに分けて見やすくする
基礎的な話ではあるがちゃんとマージンを空けたり、セミコロンつけるなりして見分けられるようにすべき。

タイマーを操作する場合、時間を大きく表示する
自分で時間を決めてストップウォッチのように使うものの場合、その時間の動作中にチラチラ確認することが想定されうる。なのでなるべくアクションのボタンと比較して相対的に大きく表示して一瞬で確認できるくらいのサイズにした方がいいだろう。

時間経過によって背景が変われば直接画面見ずともなんとなくの経過が分かるのではと思い、空で表現してみた。

お昼くらい

夕方

アイデア思いついてから楽しかった。

同じ色の要素を重ねて表示するときはシャドウをうまく使う。