こんにちはもしくはこんばんは！
デザイン業務に関わっております、デジマースのスガです!
前回の記事にて、マテリアルデザインはこのようなもの、とざっくりお話しさせて頂きました。
今回は「マテリアルデザインのアニメーション」に触れていきたいと思います。
*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*
簡単に前回のおさらい！
「マテリアルデザイン」とは？
★「マテリアルデザイン」をそのまま直訳すると「物質的デザイン」という意味になる！
★デバイスが変わってもユーザーが使いやすいUI表現を目指す！
★フラットデザインに「光」や「影」、「奥行き」の触感的表現を含ませたものが「マテリアルデザイン」
★マテリアルデザインでは影の要素が大事！
フラットデザインとは異なりオブジェクト同士の階層の構造が重要になり、高さの概念がある。
★マテリアルデザインでは、１つのページ内で色を多様しません。
マテリアルデザインのアニメーション
アニメーションといえばざっくりいえば動いているものを連想しますよね。
ですがマテリアルデザインとは触感的表現を含ませたものをさしますのでアニメーション効果にもリアリティのあるルールを適応させます。
例えば……
コロコロ…
紫のボールが先にゴールへたどり着きました。
もちろん紫のボールの方が急斜面になっていますので、スピードが早くなります。
黄色のボールの方は斜面が緩いのでゆっくりとした速さで進んでいきます。
この結果は現実的な自然なのものとなっています。
けして、紫のボールと黄色のボールが距離は同じといえど、斜面の関係から同じ速さにはなりません。
★基本的に状態が同じものを除き、アニメーションを行う際は個々のUIパーツが加減速され、等速の動きは致しません。
現実的な動きに合わせたモーションが推奨されます。
仮想ではなく現実によせることで、よりユーザーの視点や動きに合わせた表現が可能になるそう。
静止画の見え方だけではなく動的な動きの見せ方も新しさを感じますね。
まだまだ、マテリアルデザインは奥が深いですね。次回もマテリアルデザインについて、項目をピックアップしながら全部を理解せずとも、デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、またお会いしましょう！
