移行中の知識
モーション時間
Motion Duration
定義
モーション時間（motion duration）とは、animationやtransitionが開始から終了まで進む時間です。durationはeasing、移動距離、変化するproperty、interactionの目的と組み合わせて知覚されるため、単一のms値だけで「速い・自然・使いやすい」を決めません。操作結果として必要なfeedbackと、補助的・装飾的なmotionの完了を同一視しないことも重要です。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
navigation drawer
drawerの開閉時間
見るポイント
easingと移動距離を固定してdurationだけを比較し、操作後の応答が遅く感じないか、内容の位置変化を追える時間があるかを見る。device性能によるframe dropも別問題として確認する。
desktop Webのbutton state
hover transition
見るポイント
色やborderの変化に長いdurationを付けてpointer feedbackを鈍らせない。状態変化が認識できる範囲で、操作の応答と装飾的なtransitionを分ける。
注意
誤解しやすい点
- 200msや300msなど一つの値を、距離・目的・platformに関係なく普遍的な正解として使う。
- animationが滑らかなら長いほど上質に見えると考え、操作への応答遅延を無視する。
- durationを短くすればmotion accessibilityの問題が自動的に解決すると考える。
関連
関連する概念
出典