Erstelle aus einer Vektorgrafik von Adobe Stock einen animierten Lade-Screen für eine Mobile App.

Eine Vektorgrafik suchen.

Suche bei Adobe Stock nach einer Vektorgrafik, die sich individuell animieren und gestalten lässt.

Adobe Stock-Suchergebnisse für die Suche nach „neon buchstaben“ mit aktiviertem Filter „Vektoren“.

Buchstaben aus Illustrator nach XD kopieren.

Kopiere einzelne Buchstaben aus der Illustrator-Datei, und füge sie in das XD-Layout ein. Wandle jeden der Buchstaben in eine wiederverwendbare Komponente um.

Vergrößertes Bild einer Illustrator-Datei, aus der Vektorbuchstaben kopiert und in das XD-Layout eingefügt werden.

Zweite Zeichenfläche mit deaktiviertem Buchstaben erstellen.

Dupliziere die Zeichenfläche in XD. Ersetze einen Buchstaben durch die „ausgeschaltete“ Version, und reduziere im Bedienfeld „Aussehen“ die Deckkraft.

Zwei Zeichenflächen in XD. Gotischer Bilderrahmen und Neonbuchstaben in „angeschalteter“ und „ausgeschalteter“ Version.

Eine zeitgesteuerte Animation zwischen Zeichenflächen erstellen.

Verknüpfe im Modus „Prototyp“ die erste Zeichenfläche mit der zweiten. Wähle als Trigger „Zeitgesteuert“ und gib eine Verzögerung ein. Als Animationstyp wähle „Auto-Animate“ mit „Springen“. Erstelle nach demselben Verfahren einige weitere Zeichenflächen mit unterschiedlicher Dauer.

XD-Prototypmodus. 2 Zeichenflächen. Einstellungen für „Interaktion“ auf „Zeitgesteuert“, „Auto-Animate“ und „Springen“.

Animation mit dem Haupt-Screen verknüpfen.

Schließe die Animation für den Lade-Screen ab, indem du den letzten Animations-Screen mit dem Haupt-Screen der Mobile App verknüpfst.

XD-Prototypmodus. Fertiger Lade-Screen, der mit dem Haupt-Screen der Mobile App verknüpft wurde.

Fertig.

Du weißt jetzt, wie du einen animierten Lade-Screen für eine spannende User Experience erstellst.

Zwei Screens einer Mobile App. Links ein gotischer Bilderrahmen mit dem Wort „ENTER“ in Neonbuchstaben, rechts die Oberfläche der Mobile App.

 

Für dein nächstes Projekt könnte es sich lohnen, auch in dieser kuratierten Sammlung von Adobe Stock nach geeigneten Elementen zu suchen.

 

02/10/2021
War diese Seite hilfreich?