タブバーのインタラクション
タブバーのアニメーションはどんな種類があり、どれを使うのがよいですか? 基本はスライディングインジケーターとアイコンの塗りつぶし切り替えを200ms前後で行い、反転やパーティクルは遊びが目的のときだけ使います。
1日に最も多く押す場所なので、効果は短くはっきりさせます。派手さよりも、どこに来たかが見えることが大切です。
名前とプレビュー
プレビューをタップすると止まり、もう一度タップすると再生します。
スライディングインジケーター
Sliding indicator
下線やピル型の選択表示が、押したタブへ滑る
アイコンの塗りつぶし切り替え
Outline-to-filled icon
線のアイコンが塗りつぶしのアイコンに変わる
ラベル展開
Expanding label
選択されたタブだけ、文字が横に広がる
アイコンのバウンス
Icon bounce
押したアイコンが軽く跳ねて収まる
反転・パーティクル
3D flip / Particles
アイコンが反転したり、粒子が広がったりする。装飾性が強い
使い方
- 基本は、スライディングインジケーター + アイコンの塗りつぶし切り替え。200ms前後で十分です。
- 反転・パーティクルのように装飾の大きい効果は、ゲームや子ども向けアプリのように、楽しさが目的のときだけ使います。
- すでに選択されているタブをもう一度押したら、一覧の先頭へ戻るようにします。ユーザーがすでに慣れている動作です。
コピーして使うプロンプト
タブバー4つ
下部のタブバー4つにインタラクションを入れてください。 - 選択表示は、ピル型の背景が押したタブへ滑るスライディングインジケーター(Sliding indicator)、220msのスプリング。 - 選択されたタブのアイコンは、線から塗りつぶし(Outline-to-filled)に切り替える。 - すでに選択されているタブをもう一度押したら、一覧の先頭へスクロール。 - transformとopacityだけを使用してください。
参考にした投稿: @ui_motion_prompts, @ui_motion_prompts, @ui_motion_prompts