マテリアルデザイン~アニメーションpart2~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!

2016年も残すところあとわずかになりました。
お家の片づけも仕事もやる事いっぱいの師走は本当に忙しいですね。
日に日に時間の流れが速くなっているような気がします。

さてさて、前回の記事にてマテリアルデザインのアニメーションについてお話しさせて頂きました。
今回も引き続きアニメーション部分に触れていきたいと思います!

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*


簡単に前回のおさらい!「マテリアルデザインのアニメーション」とは?

★マテリアルデザインとは触感的表現を含ませたものをさしますので、
よってアニメーション効果にもリアリティのあるルールを適応
★現実的な動きに合わせたモーションが推奨されている

マテリアルデザインのアニメーションの利点とは?

さっそくではありますが、アナタは下記の様に見たい記事を見つけました。

pic_161222_01

如何でしょうか。このパッと切り替わる動作は普段見慣れている人が多いかと思います。
求めている動作が早いことはとても良い事です。
まるで、長いマラソンのスタートとゴールの部分だけを見た様な感じです。

そこで、もっとユーザーメリットが組み込まれたらどうでしょう?
動作からすぐに結果が出ている時点でスピード面において充分メリットがありますが、
ここに「ユーザー自身が行った動作に対して、今自分がどのような状態なのかが一目で分かる」とどうでしょう。

またまた、アナタは下記の様に見たい記事を見つけました。

pic_161222_02

如何でしょうか。動作と結果の間にこのようなモーションを加えることで、
ユーザーは自分が行った行動に対して、アクションが起こるので、
今自分がどのような状態なのかが一目で分かる状態になります。

長いマラソンはスタートとゴールの間に、走っている過程があります。
その過程の部分をマテリアルデザインではユーザーの操作に合わせてリアリティのある現実的な動き
を加えスライドや拡大などのモーションで次のページへ誘導を行います。
つまり今までなかったはっきりとした遷移過程のアニメーションによって、
ユーザーの目線の動きもバッチリとらえ(人はつい動くものなどを追ってしまいますよね)
次々起こる動作をスムーズに解消していくことが出来ますね。

最後に

現実的な動き(例:スタートとゴールの間)に合わせたモーションを加えると操作もより分かりやすくなります。
これらのモーションには様々な種類があり、スライドしたり、画面内のパーツが入れ替わったり回ったり……様々なものがあります。

もしこれからスマートフォンでサイトなどを見るときに少し注意して見てみて下さい。
特に気にしていなかっただけで、実は上記のようなモーションで誘導されていたかもしれません。

まだまだ、マテリアルデザインは奥が深いですね。
次回もマテリアルデザインについて、項目をピックアップしながら全部を理解せずとも、デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。

それでは、またお会いしましょう!

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です