株式会社クイックのWebサービス開発blog

HAPPYなサービスプランナー・エンジニア・デザイナーのブログです。

画面を切り替えるときの動きをXDのプロトタイプで再現してみた

こんにちは、デザイナーのSAYAです。

普段業務では、サイト内のUIや新機能のデザインをすることが多いのですが、XDでプロトタイプを作ると、使用感や操作感を確かめながらデザインできてとても便利です。

今回は、よく使われそうなナビゲーションを押した時の、画面が切り替わる動きをいくつかXDで再現してみたので、制作の手順と構造をご紹介します。

こちらの画面デザインをベースに、画面が切り替わる際のアニメーションをつけていきます。

f:id:aimstogeek:20211112105712p:plain

ノーマルの切り替え

こちらは、それぞれのアートボードとナビゲーションを自動アニメーションで繋いだだけです。

f:id:aimstogeek:20211112105135g:plain

少しだけフェードイン/フェードアウトしているのみで、ノーマルで自然な切り替わりを再現できます。

ナビゲーション部分はステート機能を利用して制作しました。
ナビゲーションをコンポーネント化し、メインコンポーネントをそれぞれのアートボードに飛ぶように設定すると、それをコピーして配置したナビゲーションの遷移先が全て同じ設定になります。
ステートでフォーカス部分を切り替えて、それぞれのアートボードに配置します。

f:id:aimstogeek:20211112105400p:plain

手順 ・画面ごとのアートボードを作る。
・ナビゲーションを作って遷移を繋ぐ。
・それぞれにナビゲーションを、ステートを切り替えて配置。

スライドのアニメーションをつける

ナビゲーションは固定で、内容がスライドしていく形です。

f:id:aimstogeek:20211112105917g:plain

手順 ・それぞれの中身をグルーピングして、MENU1のアートボードの中に入れる。MENU1の中身以外はアートボードからはみ出すようにする。

f:id:aimstogeek:20211112110058p:plain

・MENU1をコピペして中身のグループをずらしてMENU2のアートボードを作る。MENU3も同様にしていく。

f:id:aimstogeek:20211112110233g:plain


・ナビゲーションからそれぞれのアートボードに「自動アニメーション」で繋ぐ。

f:id:aimstogeek:20211112110412p:plain

ナビゲーションのフォーカスもスライドさせる

スライドに合わせてナビゲーションのフォーカスもスライドさせることもできます。

f:id:aimstogeek:20211112120222g:plain

手順 ・ナビゲーションのステートを作るときにフォーカス部分を移動させて作り、アートボードの遷移を「自動アニメーション」で繋ぐ。 f:id:aimstogeek:20211112121509g:plain

下からふわっとフェードインするアニメーション

こちらは少し工夫して制作しました。うまくいかなかったパターンも紹介します。

f:id:aimstogeek:20211112110831g:plain

うまくいかなかったパターン

ここまでの2つと同じようにそれぞれのアートボードを繋ぐ形で作ることを試みましたが、ちょっと違う感じになりました。まずはその時の手順です。

手順 ・MENU1の画面の中に、MENU2の中身をコピペし、ちょっと位置を下げて透明度を0%にする。同様にMENU3の中身も入れる。
・MENU2、MENU3の画面の中にもそれぞれ同じように別MENUの中身を入れる。

f:id:aimstogeek:20211112111741g:plain

・ナビゲーションからそれぞれのアートボードに「自動アニメーション」で繋ぐ。

f:id:aimstogeek:20211112111826p:plain


できたものがこちら・・・

f:id:aimstogeek:20211112111844g:plain

ちょっとおしい感じですね・・・
要素が上下に動いてるのが想定とは違いました。
下からふわっとフェードインしてるものの、「自動アニメーション」で互いにつなぐと双方向にアニメーションがつくので、 消える時に、下に下がってフェードアウトするアニメーションもついてしまいました・・・

うまくいったパターン

こちらは切り替わる前に、一旦、中身の透明度が0%のアートボードを挟めて、消える時の下に動いてしまうアニメーションを無くす形にしました。

手順 ・それぞれのアートボードをコピペし、中身の位置を少し下げて透明度を0%にしたものを用意する。

f:id:aimstogeek:20211112112311g:plain

・ナビゲーションから、それぞれ中身が見えないアートボードに「トランジション」で繋ぐ。 (自動アニメーションじゃないので、要素が動かずに切り替わる)

f:id:aimstogeek:20211112191511p:plain

・中身が見えないアートボードから中身があるアートボードに、トリガーを「時間」にして、「自動アニメーション」で繋ぐ。 (中身が見えないアートボードは、一瞬しか見せないのでディレイは0.01秒に設定)

f:id:aimstogeek:20211112140440p:plain


こちらで、イメージ通りの動きになりました!!!

f:id:aimstogeek:20211112110831g:plain

まとめ

見た目が同じデザインでも操作に動きがつくことで、使用感や印象が変わりますね。
今後もデザインや仕様の検討の材料にできるような、プロトタイプを制作していきたいと思います!!


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //

919.jp