Flutterで学ぶ、モバイルアプリのトランジション by kumamo_tone

概要

トランジションとは、アプリの個々の要素を繋ぐ短いアニメーションのことです。トランジションは、変化した意味を説明したり、UI要素の階層を明確化したり、ユーザーがアプリの動作を直感的に理解するのに役立つため、うまく使うことで、優れたUXを提供します。

本セクションでは、Material Designで紹介されている以下のような代表的なトランジションパターンと、それらの使い道や、実際にFlutterで実現する方法などについて紹介します。また、実際に業務で導入しようとしたときの体験談や反省点などについてもお話します。

• Container transform
• Forward and backward
• Lateral
• Top level
• Enter and exit
• Skeleton loaders

トランジションパターンについて正確に理解することによって、UIアニメーションの利点を、ただ単にカッコいいからといった感覚的な理由からではなく、理屈で説明できるようになると思います。

想定対象者

・アニメーションを使ったUX改善に興味がある人