デザイナーのCynthia Fong氏はプロトタイプで動的に変化するインタラクティブな画像を作成し、デザインをテストします。この短いチュートリアルでは、Adobe XDでモバイルアプリ用のアイデアを形にするFong氏の手法を紹介します。
必要な情報
Larson氏は、2つ目のアートボードを複製することから作業を開始します。アートボード名をクリックして、Alt(Windows)またはOption(macOS)キーを押しながらアートボードを右側にドラッグします。

Adobe XDのアートボード間でオブジェクトをアニメーション化するには、レイヤー名が一致している必要があります。アートボードを複製すると、レイヤー名を維持して複製されます。2つ目のアートボードから上のアイスを削除し、アイスクリームコーンを上に移動します。次に、新しいScoops - 2用に文字と金額を更新します。

プロトタイプは最終的に5つのアートボードになります。前の手順と同様にアートボードを複製していきます。複製したアートボードから2つ目のアイスを削除してコーンを上に移動し、文字と金額を更新します。さらにこのアートボードを複製して、最後のアートボードから文字を削除します。


プロトタイプモードに切り替えて、インタラクションを定義します。最初のアートボードをクリックして、ワイヤーを2つ目のアートボードにドラッグします。次に、トリガーを「タップ」に、アクションを「自動アニメーション」に設定します。XDではアニメーション設定が保持されるため、効率的に繰り返し同じ設定を適用できます。各アートボードから次のアートボードにワイヤーをドラッグし、最初のアートボードに戻します。最後に、デスクトッププレビューでインタラクションをテストします。


09/02/2020
アーティスト:Cynthia Fong
Adobe Stock提供元:Subbotina Anna、pamela_d_mcadams、rawpixel