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

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

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

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

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

ノーマルの切り替え

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

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

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

手順

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

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

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

手順

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

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

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

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

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

手順

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

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

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

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

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

手順

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

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

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

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

うまくいったパターン

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

手順

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

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

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

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

まとめ

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

---

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

919.jp