Nutzen Sie UI-Kits und Iconsets für das Screendesign in Adobe XD CC.
add-emoji_1000x560

In diesem Tutorial gestalten Sie eine App-Oberfläche mit verschiedenen Elementen aus den Apple UI-Ressourcen für iOS. Laden Sie alle für XD verfügbaren UI-Kits herunter, um Designs für Ihre gewünschte Plattform zu erstellen.

add-emoji_step1

Die UI-Kits der Hersteller bieten oftmals genau die UI-Elemente, die Sie brauchen. Sie können jedoch auch eigene Elemente erstellen oder auf die Auswahl von Adobe Stock und Creative Cloud Market zurückgreifen. Hier ein paar Beispiele für lachende Emojis, die wir in verschiedenen Bibliotheken und Icon-Sammlungen gefunden haben.

add-emoji_step2

Das Kopieren und Einfügen von Elementen in Designs geht ganz einfach. In diesem Beispiel haben wir eine benutzerdefinierte Chat-Komponente für eine App erstellt, die sich mit der Tastatur des Systems und dem Emoji-Set „Smileys & Personen“ für iOS bedienen lässt.

add-emoji_step3

Wir haben einige Chatscreens entworfen und die Zeichenflächen im Prototyp-Modus anhand der Aktion „Auto-Animate“ miteinander verdrahtet. Mit dieser Aktion sucht XD nach Ebenen und Ebenengruppen mit demselben Namen und animiert die Unterschiede zwischen ihnen. Für dieses Design haben wir die Elemente in der oberen Hälfte der Zeichenfläche gruppiert und die Gruppe „Chat“ genannt.

add-emoji_step4

Sie wissen nun, wie Sie Design-Elemente aus verschiedenen UI-Kits verwenden, um beim Designen und Prototyping wertvolle Zeit zu sparen.

02/25/2019

Adobe Stock-Anbieter: SFIO CRACHO

War diese Seite hilfreich?