画面遷移の方式
プッシュ遷移、モーダル、クロスフェードなど、画面遷移はどう使い分けますか? 深く入るならプッシュ、一時的に行って戻るならモーダル、同じ階層の移動ならタブ切り替えと、画面同士の関係に合わせて選びます。
遷移の方式は、新しい画面がどこから来たかを伝えます。画面同士の関係に合った遷移を選びます。
名前とプレビュー
プレビューをタップすると止まり、もう一度タップすると再生します。
プッシュ
Push transition
横から押し込むように入る。一段深く入るとき
モーダル表示
Modal presentation
下からせり上がって覆う。一時的に行って戻る作業(作成、設定)
タブ切り替え
Tab switch
同じ階層の画面同士を切り替える。短いフェード程度
カード展開
Shared element transition
押したカードがそのまま大きくなり、詳細画面になる
クロスフェード
Crossfade
前の画面が消えながら、新しい画面が重なって現れる
使い方
- 深く入るのはプッシュ、一時的に行って戻るのはモーダル、同じ階層の移動はタブ切り替え。この関係を混ぜません。
- 戻るときは、入ってきた方向と逆に出ます。右から入ってきたなら、右へ出ていきます。
- カード展開は、写真・商品のように同じものを大きく見る場合にだけ使います。効果が大きいので、多用すると疲れます。
コピーして使うプロンプト
一覧 → 詳細
商品一覧から詳細への遷移を、カード展開(Shared element transition)で作ってください。 - 押したカードの画像がそのまま大きくなり、詳細画面上部の画像になるように。 - 長さ350ms、ease-out。 - 閉じるときは、元のカードの位置へ縮みながら戻るように。 - 視差効果を減らす設定のときは、クロスフェード(Crossfade)200msに置き換えてください。
参考にした投稿: @uxwoodytips