WEB開発をしていると、
「サムネイル画像はクリックで拡大表示にしたい。」
「ログインはモーダルですかね。」
「本当に削除してもいいですか?の画面が欲しいですね。」
など、モーダル系の画面もメインと並行して作ることがよくあると思います。
制作者にとっては、たかがモーダル、されどモーダルですよね!
Adobe XDのプロトタイプで再現できれば、確認時にリアル感がでるので是非やってみましょう!
モーダルウィンドウの作り方
作り方はいたって簡単です。
今回の例として、フォトギャラリーのサムネイル画像をクリックすると、画像がモーダルで開くようにしてみます!
完成 イメージ。
Step1.アートボードを2つ用意しよう!
アートボード1:フォトギャラリー
アートボード2:サムネイル拡大(モーダルウィンドウ)
を用意しました。
モーダル感を出すため、サムネイル拡大の方に背景を敷いて透過させておきましょう!
今回は、透過率60%にしておきます。
今回は、透過率60%にしておきます。
Step2.プロトタイプモードでトリガーを設定しよう!
アートボード1のサムネイル画像→アートボード2へトリガーを伸ばしましょう。
(もしくは、トリガーの「移動先」に「アートボード2」を指定しましょう。)
そして次が重要です!
アクションを「オーバーレイ」に設定しましょう!
オーバーレイに設定すると、前のアートボードが下に配置されるので、モーダルをリアルに再現できます。
さらに、トリガーの線が破線になるので、トリガーが複数入り乱れている状況になってもわかりやすいです。
おまけ
緑色のクロスカーソルをクリックすると、薄くプレビューが表示されますよ。
以上、簡単でしたね!!!
冒頭でも書いたように、ログインとか確認画面にも使えるので便利です。
デザイナーなら、地味に背景の透過具合とか調整したいですもんね!
では、良いXDライフを!
制作のみなさん、共に頑張りましょう〜。