Modale Overlays erstellen | Adobe XD-Tutorials
Mit der Funktion „Overlay“ in Adobe XD CC können Sie Interaktionen mit Ihrer App simulieren, ohne dafür Zeichenflächen duplizieren zu müssen.
iPhone in zwei Händen

Öffnen Sie die Beispieldatei oder verwenden Sie eine Ihrer eigenen Dateien. Sie brauchen für diese Übung eine Hauptzeichenfläche und eine Zeichenfläche, die als Overlay dienen wird. Für dieses Design wurde eine Zeichenfläche mit einem Popup-Menü erstellt, das vor einem weichgezeichneten Rechteck liegt. Die Weichzeichnung des Rechtecks sorgt dafür, dass jede Zeichenfläche, die unter dem Overlay liegt, einen verschwommenen Look erhält und somit nicht vom Popup-Menü ablenkt.

Zeichenfläche mit Popup-Menü in Adobe XD

Im Modus „Prototyp“ können Sie eine Zeichenfläche oder ein Objekt mit der Overlay-Zeichenfläche verdrahten. Probieren Sie verschiedene Übergangsarten aus, und überprüfen Sie das Ergebnis in der Vorschau.

Vorschau in Adobe XD

Verdrahten Sie alle erforderlichen Zeichenflächen oder Objekte mit dem Overlay.

Weichgezeichnetes Hintergrundbild

Achten Sie darauf, wie das Overlay mit dem weichgezeichneten Hintergrund mit jeder darunterliegenden Zeichenfläche interagiert.

Untergeordnete Zeichenfläche mit weichgezeichnetem Hintergrund

Jetzt wissen Sie, wie Sie mit modalen Overlays realistische User Experiences gestalten können.

05/18/2020
War diese Seite hilfreich?