Adobe XD CCのオーバーレイ機能を使って、アートボードを複製せずにアプリ内でインタラクティブ機能をシミュレートします。
iPhoneを持つ手

サンプルファイルか、ご自身のファイルを開きます。ソースアートボードにアートボードをオーバーレイしたデザインを作成します。ここでは、背景のぼかしを適用した長方形の前面にポップアップメニューがあるアートボードを作成しましょう。背景のぼかしによって、オーバーレイが適用されるアートボードがソフトになり、メニューが目立つようになります。

ポップアップメニューのあるアートボード(Adobe XD)

プロトタイプモードに切り替えて、アートボードまたはオブジェクトと、オーバーレイアートボードを結び付けます。いろいろな設定を試して、好みのアニメーション効果を探してみましょう。デスクトッププレビューを使ってエフェクトをテストします。

デスクトッププレビュー(Adobe XD)

必要に応じて他のアートボードやオブジェクトをオーバーレイに結び付けます。

背景のぼかし

背景のぼかしのあるオーバーレイが、アートボードに応じてインタラクティブに変わることを確認できます。

背景のぼかしとアートボード

このように、モーダルオーバーレイを使ってリアルなユーザーエクスペリエンスを効果的に生み出すことができます。

11/12/2018
このページは役に立ちましたか。