ユーザーエクスペリエンスの最適化が、アプリの成功の鍵を握ります。アーティストのErica Larson氏は、プロトタイプで再利用可能な画像とメニューのオーバーレイを作成し、デザインをテストしました。この短いチュートリアルでは、Adobe XDでモバイルアプリ用のアイデアを形にするLarson氏の手法を紹介します。

Adobe Studioチームのメンバー、グラフィックアーティストのErica Larson氏は、アイデアが刺激されるデザイン作りに毎日取り組んでいます。そのデザインを見た人がさらに何かを作りたいと思うようなデザインを目指しています。

ステップ1:ステージを設定する

Larson氏は先頭のアートボードを複製することから作業を開始します。それには、アートボード名をクリックして、Alt(Windows)またはOption(macOS)キーを押しながらアートボードを右側にドラッグします。

デザインが完成したヘルス&ビューティアプリのアートボードを複製、モバイルメニューのデザインが左側、プロダクトのオーバーレイが右側

ステップ2:シークと非表示

アートボード上のいくつかの要素を初期状態では非表示にしておき、ユーザーがアプリを操作したときに表示され、また非表示に戻るようなデザインを考えています。Shiftキーを押しながらクリックして、複数のアートボード上の要素をまとめて選択し、プロパティインスペクターの不透明度スライダーを0%にします。

2つのアートボードでオブジェクトの周囲の境界線が選択、プロパティインスペクターの不透明度は0に設定

ステップ3:メニューを配置する

「プロトタイプ」タブをクリックして、インタラクションを定義します。最初のiPhoneアートボードで設定メニューアイコンを選択し、ワイヤーをMenuアートボードまでドラッグします。アクションを「オーバーレイ」に、アニメーションを「右にスライド」に設定して、メニューがアートボードにスライド表示されるようにします。次に、オーバーレイの緑の円をドラッグして、メニューを表示する位置に配置します。次のiPhoneアートボードでも設定メニューアイコンを選択して、同じ手順を繰り返します。

「プロトタイプ」タブで、青い点線が最初のアートボードからMenuオーバーレイに接続、プロパティインスペクターにインタラクション設定が表示

ステップ4:非表示の要素を表示する

次に、Infoアイコンから2つ目のiPhoneアートボードにワイヤーをドラッグします。今回は非表示だった要素がフェードイン表示されるようにするため、アクションを「トランジション」に、アニメーションを「ディゾルブ」に設定します。

青い線が最初のアートボードの情報アイコンからに2つ目のアートボードに接続、プロパティインスペクターにインタラクション設定が表示

ステップ5:最小限で再利用

最後に、モデルのチークのホットスポットからProductオーバーレイにワイヤー接続します。ドットを選択して、ワイヤーをProduct overlayアートボードにドラッグし、インタラクションを定義します。次にオーバーレイを2つ目のアートボード上の表示させる位置に配置します。最後に、デスクトッププレビューをクリックして、すべての動きをテストします。

青い点線がモデルのチークのドットからProductオーバーレイに接続、プロパティインスペクター、デスクトッププレビューがハイライト表示

リアルなエクスペリエンスを作成

モバイルアプリ用の再利用可能な画像とメニューのオーバーレイをデザインしましょう。

ヘルス&ビューティアプリのデザインを表示したスマートフォンを手に持つ、左下にAdobe XDのニーモニック

注意:このチュートリアル付属のプロジェクトファイルは練習目的でのみご利用ください。

01/07/2020

アーティスト:Erica Larson

Adobe Stock提供元:blackzheep

このページは役に立ちましたか。