Chatdesign in Sketch für effektive Benutzererfahrung

Die Gestaltung von Benutzeroberflächen, insbesondere von Chat-Anwendungen, kann eine anspruchsvolle, aber auch kreative Aufgabe sein. In diesem Tutorial zeige ich dir, wie du den Chat-Controller effektiv in Sketch gestalten kannst. Wir werden dabei insbesondere mit der Schichtung von Elementen (Layern) arbeiten, um dir Zeit zu sparen und ein sauberes Design zu entwickeln.

Wichtigste Erkenntnisse

• Schichtelemente in Sketch helfen, den Überblick zu behalten und Designänderungen schnell umzusetzen.
• Die Nutzung von wiederverwendbaren Styles spart Zeit und gewährleistet Konsistenz im Design.
• Die Integration von Gestaltungsrichtlinien sorgt für ein ansprechendes und professionelles Aussehen.

Schritt-für-Schritt-Anleitung

Zunächst beginnen wir mit der Erstellung des Chat-Controllers. Du solltest bereits mit der Benutzeroberfläche von Sketch vertraut sein, daher werden wir direkt in die Gestaltung einsteigen.

Schritt 1: Erstellen des Chat-Controllers Öffne dein aktuelles Projekt in Sketch und wähle einen neuen Artboard für den Chat-Controller. Stelle sicher, dass du das iPhone 8 als Gerät auswählst, um eine geeignete Bildschirmgröße zu haben. Benenne den Artboard „Chat“ für die einfachere Zuordnung.

Schritt 2: Kopieren der Navigationsleiste Um ein einheitliches Design zu erzielen, kopiere die Navigationsleisten von deinem Home-Controller. Positioniere diese in demselben Layout wie vorher, um die Konsistenz zu wahren. Die Status- und Navigationsleisten sollten identisch sein.

Schritt 3: Anpassen des Layouts Setze Hilfslinien bei 16 Pixeln Abstand, um sicherzustellen, dass alle Elemente präzise und ordentlich ausgerichtet sind. Achte darauf, dass keine „Glitches“ in der Ausrichtung entstehen, indem du die Werte über die Inspektoransicht anpasst.

Schritt 4: Übertragung von Styles Wenn du Styles von externen Bibliotheken verwenden möchtest, öffne das Originaldokument, um Änderungen vorzunehmen. Du kannst hier Farben und Schriftarten anpassen, die in dem gesamten Projekt verwendet werden sollen. Dies ermöglicht es dir, Änderungen schnell auf alle verwandten Elemente anzuwenden.

Schritt 5: Erstellung der Chatblase Für die Darstellung der Nachrichten, erstelle eine neue Form im Chat-Controller. Wähle die Farbe des Hintergrunds für die neue Chatblase. Wir erstellen eine blaue und eine grüne Variante für eingehende und ausgehende Nachrichten.

Schritt 6: Einfügen von Text Erstelle ein Textfeld in der Chatblase und gib eine Begrüßungsnachricht ein, wie etwa „Hallo, schön dass du hier bist!“ Achte darauf, die Schriftfarbe und den Stil anzupassen, damit der Text hervortritt und gut lesbar ist.

Schritt 7: Erstellen mehrerer Antwortmöglichkeiten Um dem Nutzer verschiedene Antwortmöglichkeiten zu präsentieren, kannst du Kopien der Chatblasen verwenden. Achte dabei darauf, dass der Abstand zwischen den Elementen gleichmäßig bleibt. Du kannst weitere Textfelder mit Vorschlägen für Antworten hinzufügen, z. B. „Was ist dein Ziel?“.

Schritt 8: Anpassung der Elemente Gehe sicher, dass alle Elemente die gleiche Höhe haben und kopiere sie, um die Gestaltung schneller abzuschließen. Bei der Anpassung kannst du die Gruppen und Symbole verwenden, die du erstellt hast, um die Änderungen konsistent und einfach zu halten.

Schritt 9: Letzte Anpassungen und Grouping Fasse alle Elemente in Gruppen zusammen, um die Übersichtlichkeit zu erhöhen. Du kannst die Gruppen so benennen, dass sie leicht identifizierbar sind, wie „Chat_Bubble“ oder „Antwortmöglichkeiten“.

Zusammenfassung - Chatdesign mit Layern in Sketch: Eine Schritt-für-Schritt-Anleitung

Du hast nun gelernt, wie du mit Sketch einen Chat-Controller gestaltest. Von der Auswahl des richtigen Artboards über das Erstellen von Chatblasen bis hin zur Anwendung von Styles hast du effektive Techniken kennengelernt, um Zeit zu sparen und ein einheitliches Design zu erstellen.