Adobe XD CCを使用してモバイルアプリのユーザーインタラクション用に最適化されたメニューをデザインします。
mobile-menu-design_1000x560

モバイルメニューのデザインを2つ作成します。1つは折りたたまれた状態用で、1つは展開された状態用です。各メニューデザインをシンボルに変換し、それらをそれぞれのアートボードに移動します。各アートボード上でシンボルが同じ名前であることを確認して、後でアニメーション化できるようにします。このアプリデザインでは、折りたたまれた状態用のハンバーガーアイコンと展開された状態用のサイドバーメニューを作成しました。

mobile-menu-design_step1

アクティブなメニュー選択を示すビジュアルヒントを提供してユーザーエクスペリエンスをカスタマイズします。次に、ページデザインを少し右に移動して、展開されたメニューでコンテンツが隠れないようにします。そのためには、ページデザインを構成する要素をグループ化し、各アートボード上でグループに同じ名前を付けます。その後、展開したアートボード上でグループを右に移動して、サイドバーメニュー用のスペースを確保します。

mobile-menu-design_step2

展開したサイドバーメニューシンボルのコピーをペーストボードにドラッグします。右クリックしてシンボルをリンク解除を選択します。これで、おこなった変更が元のシンボルに影響しなくなります。アイコンを削除して、各メニュー項目の背景の長方形だけが残るようにします。展開したメニューを同じサイズの新しいアートボードに配置します。

mobile-menu-design_step3

プロトタイプモードで、展開されたページデザインのアートボードにハンバーガーメニューを結び付けます。次に、修正したサイドバーメニュー内の長方形を同じ展開されたアートボードに結び付けます。各インタラクションのアクションとして自動アニメーションを選択しました。各アートボードで2つのメニューオブジェクトに同じ名前が付けられているので、ユーザーがハンバーガーアイコンをタップするとメニューが展開状態にアニメーション化されます。画面デザインを含むグループには各アートボードで同じ名前が付けられているので、メニューが展開されたときに画面にはスライドアウトの効果があります。

mobile-menu-design_step4

メニューをデザイン全体で再利用可能にするには、展開されたアートボードをアイコンのないメニューに結び付けます。トリガーが「時間」に設定され、アクションが「オーバーレイ」に設定されていることを確認します。緑色のオーバーレイの長方形が各宛先ページに表示されたら、その左端を基になるアートボードの左端に合わせます。使用した設定は次のとおりです。

mobile-menu-design_step5

デスクトッププレビューでナビゲーションをテストし、期待どおりに動作するまで調整を続けます。このテスト中は、サイドバーメニュー上のアイコンが非表示になります。アプリデザインで残りの画面を結び付けます。デザインモードに戻り、サイドバーメニューのアートボードを選択し、「塗り」オプションをオフにしてサイドバーを透明にします。プロトタイプをテストしたときに、すべてが動作し、サイドバーメニューアイコンが表示される必要があります。

mobile-menu-design_step6

これで、アプリ全体の画面デザインに適用できるモバイルメニューをデザインできます。

02/22/2019

Adobe Stock提供元:alwayslovedafilm

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