Erstellen Sie mit Adobe XD CC ein Menü, das für Mobilgeräte optimiert ist.
mobile-menu-design_1000x560

Erstellen Sie zwei UI-Designs einer App: eines für das ausgeblendete Menü und eines für das eingeblendete Menü. Konvertieren Sie jedes Design in ein Symbol, und platzieren Sie sie auf den jeweiligen Zeichenflächen. Achten Sie darauf, dass die Symbole auf beiden Zeichenflächen denselben Namen haben, um sie später animieren zu können. In diesem Beispiel haben wir für das ausgeblendete Menü ein Icon mit drei waagerechten Strichen und für das eingeblendete Menü eine Seitenleiste erstellt.

mobile-menu-design_step1

Erstellen Sie visuelle Hints, die die aktive Menüauswahl kenntlich machen. Im Anschluss positionieren Sie das Seiten-Design neu, damit die Inhalte nicht durch das erweiterte Menü verdeckt werden. Zu diesem Zweck gruppieren Sie alle Elemente innerhalb des Seiten-Designs und geben der Gruppe auf jeder Zeichenfläche denselben Namen. Verschieben Sie dann die Gruppe auf der Zeichenfläche mit dem erweiterten Menü nach rechts, um Platz für die seitliche Menüleiste zu schaffen.

mobile-menu-design_step2

Ziehen Sie eine Kopie des Symbols für das erweiterte Menü auf die Montagefläche. Machen Sie einen Rechtsklick bzw. Ctrl-Klick, und wählen Sie „Symbolverknüpfung aufheben“. So stellen Sie sicher, dass sich Ihre Änderungen nicht auf das Originalsymbol auswirken. Löschen Sie die Icons, sodass nur noch die Rechtecke für die einzelnen Menüelemente zu sehen sind. Platzieren Sie das erweiterte Menü auf einer neuen Zeichenfläche in derselben Größe.

mobile-menu-design_step3

Rufen Sie den Prototyp-Modus auf, und verdrahten Sie das Menü-Icon mit den drei waagerechten Strichen mit der Zeichenfläche, die das erweiterte Menü enthält. Verdrahten Sie dann ein Rechteck aus der geänderten seitlichen Menüleiste ebenfalls mit der Zeichenfläche des erweiterten Menüs. Als Aktion für jede Interaktion haben wir in diesem Beispiel „Auto-Animate“ verwendet. Da die Menüobjekte auf beiden Zeichenflächen denselben Namen haben, wird das Menü erweitert, sobald der Anwender auf das Menü-Icon tippt. Auch die Gruppen mit dem Screendesign haben auf beiden Zeichenflächen denselben Namen. Deshalb bewegt sich der Screen zur Seite, wenn das Menü erweitert wird.

mobile-menu-design_step4

Damit Sie Ihr Menü im gesamten Design wiederverwenden können, verdrahten Sie die Zeichenfläche, die das erweiterte Menü enthält, wieder mit dem Menü ohne Icons. Setzen Sie den „Trigger“ auf „Zeitgesteuert“ und die „Aktion“ auf „Overlay“. Wenn das grüne Rechteck für Overlay auf der jeweiligen Zielseite erscheint, richten Sie den linken Rand des Rechtecks an der darunter liegenden Zeichenfläche aus. Auf der folgenden Abbildung sehen Sie die Einstellungen, die in diesem Beispiel verwendet wurden.

mobile-menu-design_step5

Testen Sie die Navigation in der Desktop-Vorschau, und nehmen Sie ggf. erforderliche Feinanpassungen vor. Bei diesem Test werden die Icons auf der seitlichen Menüleiste ausgeblendet. Verdrahten Sie die verbleibenden Screens in Ihrem Design. Kehren Sie in den Design-Modus zurück, wählen Sie die Zeichenfläche mit der seitlichen Menüleiste aus, und deaktivieren Sie das Kontrollkästchen „Fläche“, um die Seitenleiste transparent zu machen. Wenn Sie den Prototyp testen, sollte alles wie vorgesehen funktionieren, und die Icons auf der Seitenleiste sollten sichtbar sein.

mobile-menu-design_step6

Sie wissen nun, wie Sie Menü-Designs erstellen, die Sie auf Screendesigns in Ihrer gesamten App anwenden können.

02/25/2019

Adobe Stock-Anbieter: alwayslovedafilm

War diese Seite hilfreich?