Schnelleres UI-Design mit Symbolen und Shared Styles in Sketch

Was Sie erstellen werden

In diesem Lernprogramm verwenden Sie ein Design für mobile Einkaufswagen, um mit zwei sehr wichtigen Funktionen in Sketch zu üben. Wir werden genau auf Folgendes achten: "Symbole" und "Gemeinsame Stile".

Skizzensymbole

Mit Symbolen können Sie Elemente Ihres Designs duplizieren und wiederverwenden. Alle Änderungen, die Sie am Inhalt eines Symbols vornehmen, werden auf alle Instanzen dieses Symbols angewendet.

Klicken Sie zum Erstellen eines Objekts mit einem ausgewählten Cluster von Objekten auf Symbol erstellen:

Es gibt zwei wichtige Tipps für die effiziente Verwendung von Symbolen. Stellen Sie zunächst sicher, dass Ihre Symbole unkompliziert sind. Nehmen wir das Beispiel von mir Header Symbol:

Sie sehen den Hintergrund, die Statusleiste, die Titelbezeichnung und die Symbole, die hier in ihren Unterordnern innerhalb des Kopfzeilensymbols angezeigt werden: 

Der Fortschrittsbalken wird nicht in das Symbol aufgenommen, da sich der Status auf jedem Bildschirm ändert.

Die zweite Sache ist, die Option zu überprüfen Ausschließen Text Wert von Symbolen für jede Ihrer Textebenen in Ihren Symbolen. Auf diese Weise kannst du bearbeiten den Text für jedes der duplizierten Symbole auf individueller Basis.

Freigegebene Stile skizzieren

Die Funktion "Gemeinsame Stile" ist so einfach wie "Symbole". Es ist nützlich, das Erscheinungsbild mehrerer Elemente über verschiedene Symbole und Objekte hinweg mit einem einzigen Klick zu ändern. Sehen wir uns noch einmal die Kopfzeile und die Fortschrittsleiste an. Hier sehen Sie, dass ich den Hintergrund der Fortschrittsleiste geändert habe, aber vor dem Hintergrund der Kopfzeile nicht besonders gut aussieht:

Um zu vermeiden, dass jeder Hintergrund der Fortschrittsleiste manuell geändert wird, können Sie einen freigegebenen Stil festlegen. Hier wenden wir das an header-bg Stil, den ich zuvor vorbereitet habe, indem Sie auf klicken Neuen freigegebenen Stil erstellen wenn der Header-Hintergrund ausgewählt wurde:

Dann wenden wir dasselbe für jede Ebene an, die denselben Stil widerspiegeln muss. Wenn Sie nun den Hintergrund der Fortschrittsleiste bearbeiten, wird der Hintergrund aller Elemente mit dem freigegebenen Stil geändert:

Fazit

Mit diesen beiden Funktionen in Ihrem Toolkit sollte das Entwerfen der nächsten App-Benutzeroberfläche in Sketch weniger zeitaufwändig sein!

Vielen Dank für das Lesen und zögern Sie nicht, eine Frage in den Kommentaren zu stellen.