Material Design

material-design.png

Google のMaterial Designの内容を、私的に適当に意訳。

Animation Motion

動きには意味があるべき。

やるべからず

線形の動きは機械的な印象を与える
アニメの最初や最後で速さが急に変化するのは、リアルな動きじゃない。

こうするべき

びゅんっと加速して、そーっと減速していくのが自然である

ただし、画面の切替時のアニメーションは例外

こうするべき

画面の切替時においては、画面の入場時はゆっくり退場時は加速
1画面の終わりに加速することにより、自信たっぷりに次の展開に進んでいる印象を与えるのだ。

こうしちゃだめ

入場時を素早くして、退場時をゆっくりにするのはNG ユーザーを混乱させる

上記の法則がすべてに当てはまるわけではない。動かすものによって調整しよう。

軽いものや、小さいものは普通のものより急激に加速したり、減速したりしてもok
なぜなら、物理の法則に従えば、
軽いものや小さいものは、動かすのに、大した力は要らないから、スピードが速くしたり、遅くしたりするのが容易だからだ。

つまり、UIの構成要素も大きいものほどスピードが急激に変化しないように、
小さい物ほどスピードを変化させていいってことだ。

リアクションの良さ、対話している感覚

ユーザーがアプリを触って、完璧に論理的なことが起こったら、
ユーザーを満足させたり、喜ばせることが出来る。

ランダムに起きたり、起こらなかったりするのではなく、
よく考えられていて、目的がはっきりしていること。
茶目っ気があるけれど、気が散るかんじでない。

そのアプリをもっと探検したくなるようなものが良い。

  • UI構成要素は事実上「触れる」けれど、薄くて硬いガラスの向こうに閉じ込められているようなものだ。

アニメーションが、このギャップを埋めてくれる手助けになるのだ。

反応しているかんじを出すには?

さざなみエフェクト

触ったら、まるで水の表面を指で押したかのように、さざ波が起こるエフェクトをつける。

立ち上がりエフェクト

2次元方向に広がる場合

新しい物体がユーザーからの働きかけにより生まれたら、
ユーザーが触った点を原点として、大きくなるべきである。
全然関係ない点から、大きく広がるのはNGである

手前(ユーザーに向かって)立ち上がる

UI構成要素を押したら、ユーザー側に向かって、ぴょこっと立ち上がるのもGood.


animation

サポートサイト Wikidot.com animation