Der ultimative UI-Designleitfaden

UI Design Guide
(Bildnachweis: Zukunft)

Was ist Benutzeroberflächendesign? Eine bessere Frage wäre, was eigentlich in das Design einer Benutzeroberfläche einfließt. Ästhetik? Benutzerfreundlichkeit? Barrierefreiheit? Alle von ihnen? Wie vereinen sich all diese Faktoren, um eine optimale Benutzererfahrung zu ermöglichen, und welche sollten an erster Stelle stehen?

Die Zugänglichkeit sollte immer an erster Stelle stehen und den Grundstein für eine optimale Benutzerfreundlichkeit legen (mit einem Top Webseitenersteller wird hier helfen). Und wenn eine Benutzeroberfläche sowohl zugänglich als auch verwendbar ist, sollte sie in Bezug auf die Ästhetik bereits recht anständig aussehen. Um sicherzustellen, dass Ihr Design auf allen Ebenen funktioniert, müssen Sie es gründlich testen, was Sie mit unserer Auswahl der besten tun können Benutzertests Werkzeuge. Schauen wir uns die grundlegenden Elemente der meisten Designs genauer an und was getan werden kann, um die visuelle Konsistenz sicherzustellen.

01. Wählen Sie Ihre Typografie

UI Design Guide: 01



Das Festlegen geeigneter Schriftgrößen ist für die Erstellung einer visuellen Hierarchie auf Ihrer Website von entscheidender Bedeutung(Bildnachweis: Daniel Schwarz)

Gute Typografie (wie viele Aspekte des Designs) läuft auf Zugänglichkeit hinaus. Visuelles Design trägt sicherlich zum Gesamterlebnis des Benutzers bei, aber letztendlich interagieren Benutzer mit der Benutzeroberfläche und betrachten sie nicht als Kunst. Lesbare Buchstaben sorgen für Klarheit und lesbare Wörter helfen Benutzern, Inhalte effizient zu verarbeiten. Beides ist wichtiger als jede visuelle Ästhetik.

Eine gut gestaltete Typografie kann jedoch immer noch ästhetisch zufriedenstellend sein. Schwarz-auf-Weiß-Helvetica (oder eine ähnliche Schriftart) kann nach nur wenigen einfachen typografischen Verbesserungen eine schöne Sache sein. Unter Verbesserungen verstehen wir das Ändern der Schriftgröße, der Zeilenhöhe, des Buchstabenabstands usw. - nicht der Schriftart oder der Farbe des Textes.

'Schöne' Typografie ist eigentlich hässlich, wenn sie nicht lesbar ist, weil Frustration immer die Ästhetik übertrifft. Tolles Design ist ausgewogen und harmonisch.

Wie bei vielen Aspekten des UI-Designs ist die Feinabstimmung der Grafik, um Zugänglichkeit und Ästhetik in Einklang zu bringen, keine Herausforderung. Die Herausforderung besteht darin, die Konsistenz im gesamten Design aufrechtzuerhalten. Die Konsistenz schafft eine klare Hierarchie zwischen Elementen unterschiedlicher Bedeutung, was wiederum dazu beiträgt, dass Benutzer eine Benutzeroberfläche schneller verstehen und Inhalte sogar effizienter verarbeiten können.

In Bezug auf Lesbarkeit und Lesbarkeit beträgt die in den WCAG 2.0-Richtlinien für die Barrierefreiheit von Webinhalten festgelegte Mindestschriftgröße 18pt (oder 14pt fett). Die beste zu verwendende Schriftgröße hängt weitgehend von der Schriftart selbst ab. Es ist jedoch wichtig, die visuelle Hierarchie zu berücksichtigen und zu berücksichtigen, wie sich diese Basisgröße von Zusammenfassungen und Überschriften unterscheidet (d. H.

,

,

).

Mit dem UI-Design-Tool Ihrer Wahl (wir werden es verwenden InVision Studio ), erstellen Sie eine Reihe von Textebenen ( T. ) und passen Sie dann alle Größen an, um mit der folgenden Vorlage zu korrelieren:

  • : 44px

  • :: 33px

  • :: 22px

  • :: 18px

Bei InVision Studio (und allen anderen UI-Designtools) werden dazu die Stile mithilfe des Inspektorfensters auf der rechten Seite angepasst.



Wählen Sie als Nächstes Ihre Schriftart aus, aber seien Sie vorsichtig, da Sie bei einigen Schriftarten möglicherweise 18 Pixel bemerken

und 22px

sieht gar nicht so anders aus. Wir haben zwei Möglichkeiten: Passen Sie die Schriftgrößen an oder ziehen Sie eine andere Schriftart für Überschriften in Betracht. Entscheiden Sie sich für Letzteres, wenn Sie davon ausgehen, dass Ihr Design textlastig sein wird.

Denk daran, dass:

  • Visuelles UI-Design ist oft ein Ansatz, bei dem man sich gut fühlt
  • Nichts ist entschieden; alles kann sich ändern

Zeilenhöhe

Durch die optimale Zeilenhöhe wird sichergestellt, dass die Textzeilen einen ausreichenden Abstand zwischen ihnen haben, um eine angemessene Lesbarkeit zu erzielen. Dies wird immer mehr als 'Standard' anerkannt; Das Lighthouse Audit-Tool von Google schlägt es sogar als manuelle Überprüfung vor (oder sogar als Flag, wenn der Text Links enthält, die aufgrund der suboptimalen Zeilenhöhe möglicherweise zu nahe beieinander liegen).

Wieder einmal hilft uns die WCAG dabei und erklärt, dass die Zeilenhöhe das 1,5-fache der Schriftgröße betragen sollte. Multiplizieren Sie in Ihrem UI-Designtool unter 'Linie' (oder ähnlichem) einfach die Schriftgröße mit - mindestens - 1,5. Wenn der Textkörper beispielsweise 18 Pixel groß ist, beträgt die Zeilenhöhe 27 Pixel (18 * 1,5 - Sie können die mathematische Operation auch direkt im Inspektor ausführen). Seien Sie jedoch auch hier vorsichtig - wenn sich 1.6x besser anfühlt, verwenden Sie 1.6x. Denken Sie daran, dass unterschiedliche Schriftarten unterschiedliche Ergebnisse liefern.

Es ist noch zu früh, um über die Verwendung realer Daten in unserem Design nachzudenken, aber zumindest sollten wir noch etwas realistische Daten verwenden (sogar Lorem Ipsum). InVision Studio verfügt über eine native Realdaten-App, mit der wir sehen können, wie unsere Typografie tatsächlich aussehen könnte.

Absatzabstand

Der Absatzabstand ist kein Stil, den wir mit dem Inspector von InVision Studio deklarieren können. Stattdessen müssen wir Ebenen mithilfe von Smart Guides (⌥) manuell ausrichten. Ähnlich wie bei der Zeilenhöhe beträgt der magische Multiplikator 2x (doppelte Schriftgröße). Wenn die Schriftgröße beispielsweise 18 Pixel beträgt, sollte mindestens 36 Pixel Platz vorhanden sein, bevor Sie zum nächsten Textblock gelangen. Der Buchstabenabstand sollte mindestens 0,12 betragen.

Wir müssen uns jedoch erst darum kümmern, wenn wir mit der Erstellung von Komponenten beginnen.

Geteilte Stile

Wenn Ihr UI-Designtool dies unterstützt (InVision Studio noch nicht), sollten Sie diese typografischen Stile in 'Freigegebene Stile' umwandeln, um sie schnell wiederverwendbar zu machen und gleichzeitig die visuelle Konsistenz sicherzustellen. Dies erfolgt normalerweise über den Inspektor.

02. Wählen Sie die richtige Palette

UI Design Guide: 02

Mithilfe der Empfehlungen von Color Safe können Sie Farbkombinationen mit ausreichendem Kontrast auswählen(Bildnachweis: Daniel Schwarz)

Die Auswahl der perfekten Farben für Ihr Design geht weit über die Ästhetik hinaus: Sie kann die gesamte Hierarchie Ihrer Website beeinflussen.

Wenn es um UI-Design geht, ist Farbe gewöhnlich eines der ersten Dinge, mit denen wir uns gerne beschäftigen, aber wir haben gelernt, dass es eine schlechte Sache ist, direkt in visuelles Design einzutauchen. Dies ist sicherlich richtig, aber wenn es um visuelle Konsistenz geht, sollte Farbe ein Hauptanliegen sein, da sie andere Rollen spielt.

Farbe im UI-Design kann sehr effektiv sein, aber da einige Benutzer (viele tatsächlich) unter verschiedenen Arten von Sehbehinderungen leiden, ist sie nicht immer zuverlässig. Davon abgesehen geht es nicht unbedingt um die spezifische Farbe, die verwendet wird, sondern um die Art der Farbe. Dies gilt möglicherweise nicht für das Branding, da Farbe in dieser Hinsicht für emotionale Auswirkungen verwendet wird. Im UI-Design wird Farbe jedoch auch für die Kommunikation von Absicht, Bedeutung und natürlich visueller Hierarchie verwendet.

Top Tools und Ressourcen

01. Stark
Das Stark-Plugin ist mit Sketch und Adobe XD kompatibel und hilft Ihnen, den Farbkontrast zu überprüfen und Farbenblindheit direkt von der Leinwand aus zu simulieren. Unterstützung für Figma und InVision Studio kommt sehr bald.
02. Farben
Colors ist ein Satz von 90 Farbkombinationen mit dem entsprechenden Farbkontrast, um die WCAG 2.0-Richtlinien zu erfüllen - einige von ihnen erfüllen sogar den AAA-Standard.
03. A11y Projekt
Das A11y-Projekt ist eine riesige Drehscheibe für alles, was mit Barrierefreiheit zu tun hat. Es enthält Ressourcen, Tools, Tipps und Tutorials und wird vom Hersteller des Stark-Plugins erstellt und von InVision finanziert.

Die drei Arten von Farben

Farben haben Bedeutung, daher ist es wichtig, nicht zu viele davon zu haben. Zu viele Bedeutungen führen zu mehr Dingen, die der Benutzer verstehen und sich merken muss - ganz zu schweigen von mehr Farbkombinationen, über die wir uns Sorgen machen müssen. Im Allgemeinen wäre dies das empfohlene Format:

wie man ein Logo in Photoshop ausschneidet
  • Eine Call-to-Action-Farbe (auch die Hauptmarkenfarbe)
  • Eine neutrale dunkle Farbe (besser für UI-Elemente oder den dunklen Modus)
  • Für alle oben genannten eine etwas hellere und dunklere Variante

Dies ermöglicht Folgendes:

  • Der Dunkelmodus ist leicht zu erreichen
  • Unsere CTA-Farbe wird niemals mit anderen Farben in Konflikt stehen
  • In jedem Szenario können wir betonen und de-betonen

UI Design Guide: 02

(Bildnachweis: Daniel Schwarz)

Richten Sie Ihre Palette ein

Erstellen Sie mit dem UI-Design-Tool Ihrer Wahl eine ziemlich große Zeichenfläche (tippen Sie auf A) für jede Farbe (mit den Namen 'Marke', 'Neutral / Hell' und 'Neutral / Dunkel'). Erstellen Sie dann in jeder Zeichenfläche zusätzliche kleinere Rechtecke, in denen die dunkleren und helleren Variationen der Farbe sowie die anderen Farben selbst angezeigt werden.

Wir würden etwas heller und dunkler als 10 Prozent mehr Weiß und 10 Prozent mehr Schwarz betrachten. Wenn Sie fertig sind, zeigen Sie auf jeder Zeichenfläche eine Kopie der typografischen Stile an. Die Farbe dieser Textebenen sollte neutrales Licht sein, außer auf der Zeichenfläche mit neutralem Licht, wo sie neutral dunkel sein sollten.

Kontrast

Als nächstes müssen wir unsere Farben auf optimalen Farbkontrast überprüfen. Es gibt eine Vielzahl von Tools, die dies tun können, zum Beispiel die Stark plugin für Sketch und Adobe XD oder Kontrast für macOS - jedoch eine Online-Lösung wie Kontrastprüfung oder Farbkontrastprüfung wird gut tun.

Überprüfen Sie den Farbkontrast für jede Kombination und passen Sie die Farben entsprechend an. Wenn Sie sich nicht sicher sind, welche Farben Sie verwenden sollen, versuchen Sie es mit Empfehlungen von Color Safe .

UI Design Guide: 03

Die meisten Entscheidungen, die wir über unser Design treffen, führen den Benutzer zu einem Link oder einer Schaltfläche. Dies ist nur wirksam, wenn das Tap-Ziel anklickbar aussieht und eine visuelle Hierarchie kommuniziert(Bildnachweis: Daniel Schwarz)

Größe

Schaltflächen und Links sollten, ähnlich wie Typografie, einige Variationen aufweisen. Schließlich sind nicht alle Aktionen gleich wichtig, und wie bereits erwähnt, ist Farbe eine unzuverlässige Kommunikationsmethode, sodass sie nicht die Hauptmethode zur Beeinflussung der visuellen Hierarchie sein kann. Wir müssen auch mit der Größe spielen.

Was ist ein visueller Leistungstest?

Ein visueller Erschwinglichkeitstest ist ein Usability-Test, mit dem ermittelt wird, ob Tap-Ziele anklickbar erscheinen. Synchronisieren Sie das Design von Studio mit Freehand ( ⌘⇧F ), senden Sie die resultierende URL an Tester und lassen Sie sie die Elemente umkreisen, von denen sie glauben, dass sie anklickbar sind.

Nicht-InVision Studio-Benutzer können auch Freehand verwenden, aber InVision Studio-Benutzer können ihre Entwürfe nahtlos über InVision Studio in Freehand starten. Dies ist die schnellste und effizienteste Methode, um visuelles Feedback von Benutzern zu erhalten.

Im Allgemeinen empfehlen wir, den Schaltflächentext als 18px (wie der Haupttext) zu deklarieren, die Schaltflächen selbst weisen jedoch drei Größenvariationen auf:

  • Normal: 44px hoch (abgerundete Ecken: 5px)
  • Groß: 54px hoch (abgerundete Ecken: 10px)
  • Extra groß: 64px hoch (abgerundete Ecken: 15px)

Auf diese Weise können wir bestimmte Schaltflächen ohne Abhängigkeit von der Farbe als wichtiger erscheinen lassen und Schaltflächen verschachteln (z. B. eine Schaltfläche in einem minimal aussehenden Formularfeld verwenden).

Tiefe

Unabhängig davon, ob das Tippziel eine Schaltfläche oder ein Formularfeld ist, sollten Schatten verwendet werden, um die Tiefe zu erhöhen und daher Interaktivität vorzuschlagen. Ein einziger Schattenstil für alle Varianten von Schaltflächen und Formularfeldern ist in Ordnung.

UI Design Guide: 03

Durch Erhöhen der Tastengröße können Sie bestimmte Schaltflächen wichtiger erscheinen lassen, ohne sich auf die Farbe verlassen zu müssen(Bildnachweis: Daniel Schwarz)

Interaktivität

Jeder Schaltflächentyp benötigt eine Variation, um seinen Schwebezustand anzuzeigen. Dies verdeutlicht dem Benutzer, dass das, was er versucht hat, völlig in Ordnung ist, und stellt sicher, dass er unverzüglich weitermacht.

Dies ist tatsächlich einer der komplexeren Aspekte bei der Aufrechterhaltung der visuellen Konsistenz, da Farbe häufig der bevorzugte Stil ist, um Änderungen beim Erstellen eines Zustands vorzunehmen. Glücklicherweise können diese Zustandsänderungen relativ subtil sein, daher ist es in Ordnung, die Farbe in eine etwas hellere oder dunklere Variante zu ändern - dafür sind sie gedacht. Dies gilt auch für Links.

Wenn wir uns dagegen entscheiden, verwenden wir eine Farbe, die entweder bereits eine bedeutende Bedeutung hat, was dazu führt, dass Benutzer verwirrt werden, oder wir entscheiden uns für eine andere Farbe. Die Entscheidung für eine Sekundärfarbe ist völlig in Ordnung, sollte jedoch eher für Marketing-Visuals als für UI-Elemente gespeichert werden. Weniger ist mehr (und einfacher).

Denken Sie daran, diesen Schritt für jede Zeichenfläche zu wiederholen. Fügen Sie die CTA-Schaltflächen der Marke nicht in die Zeichenfläche der Marke ein. Später erfahren Sie, was passiert, wenn bestimmte Kombinationen nicht funktionieren.

04. Erstellen Sie Ihre Komponenten

UI Design Guide: 04

Durch die Konvertierung von Designelementen in Komponenten können wir sie mehrmals wiederverwenden, um den Workflow zu beschleunigen und die Konsistenz zu gewährleisten(Bildnachweis: Daniel Schwarz)

Komponenten sparen viel Zeit und alle UI-Designtools bieten diese Funktion (z. B. in Skizzieren , sie heißen Symbole). In Studio können wir Komponenten erstellen, indem wir alle Ebenen auswählen, aus denen die Komponente bestehen soll, und das ⌘ verwenden ZU Abkürzung.

Komponenten verwenden

Drahtgitter verwenden

Wireframes sind sehr nützlich, um nicht nur Benutzeroberflächen mit hoher Benutzerfreundlichkeit zu entwerfen, sondern auch um herauszufinden, was unsere Benutzeroberfläche auf lange Sicht benötigt. Es ist wie zukunftssicher.

Dies bedeutet nicht, dass wir eine Vielzahl von Komponenten entwerfen oder für ein mögliches Szenario bereit sein müssen, aber es bedeutet, dass wir ein 'Was wäre wenn?' Einstellung.

Wenn unser Drahtmodell beispielsweise eine 3x1-Komponente erfordert, wir jedoch wissen, dass der Inhalt nicht in Stein gemeißelt ist, könnte eine kleine Betrachtung dazu führen, dass wir uns fragen: 'Was ist, wenn diese Komponente 4x1 ist?'. Als Faustregel gilt: Design nur für die bereits vorhandenen Benutzeranforderungen, aber versuchen Sie, Lösungen relativ flexibel zu gestalten. Andernfalls werden wir später mit einigen sehr unordentlichen 'Designschulden' enden.

Jetzt können wir diese Komponente wiederverwenden, indem wir sie von Bibliotheken> Dokument auf der linken Seite auf die Leinwand ziehen. Beachten Sie jedoch, dass dieser Workflow je nach UI-Tool unterschiedlich sein kann.

Diese Methode zum Erstellen von Styleguides (und schließlich zum Erstellen des Designs selbst) eignet sich besonders gut für modulare / kartenbasierte Layouts, obwohl auch „gemeinsame Bereiche“ wie Kopf-, Fuß- und Navigationsbereiche hervorragende Kandidaten für eine Komponente sind.

Genau wie bei unseren typografischen Stilen, Farben und Schaltflächen müssen wir daran denken, unsere Komponenten sorgfältig zu organisieren.

Unsere Regeln anwenden

Zuvor haben wir eine Bemerkung darüber gemacht, dass keine Marken-CTA-Tasten über der Markenfarbe verwendet werden, da Marken-CTA-Tasten offensichtlich unter allem anderen hervorstechen müssen. Wie erstellen wir eine Markenkomponente, während wir weiterhin eine Markenkomponente für CTA verwenden können? Wenn wir beispielsweise neutrale dunkle Tasten für Navigationsschaltflächen oder einfach weniger wichtige Schaltflächen verwenden, wäre dies keine Option, oder?

USB externe Soundkarte für PC

UI Design Guide: 04

Wenn Sie einen Kartenhintergrund mit neutralem Licht erstellen, können Sie eine Markentaste für eine Markenkomponente verwenden(Bildnachweis: Daniel Schwarz)

Richtig. Dies wäre also eine ideale Gelegenheit, um eine Komponente zu erstellen - insbesondere eine Kombination aus Überschrift, Text und Schaltfläche. Beachten Sie, wie ich einen neutralen Lichtkartenhintergrund erstellt habe, um die Verwendung der Markentaste zu ermöglichen. In ähnlicher Weise sieht das neutrale Lichtformfeld (Formularfelder sind normalerweise weiß, da das mentale Modell historisch gleichbedeutend mit Papierformen ist) auf dem neutralen hellen Hintergrund nicht besonders gut aus, sodass sie nur auf dem neutralen dunklen Hintergrund verwendet werden können - entweder direkt oder innerhalb eine neutrale dunkle Komponente. Auf diese Weise machen wir unser Design flexibel, halten uns an unsere Regeln und halten die Konsistenz aufrecht.

Belastbarkeitstest

Der schnellste und effektivste Weg, um die Robustheit unseres Designs sicherzustellen, ist im Idealfall ein Stresstest. Ein Design auf die Probe zu stellen bedeutet, grausam zu sein. Nehmen wir an, wir haben eine Navigation mit einer X-Anzahl von Navigationselementen, da dies die Voraussetzung war. Um wirklich Flexibilität zu gewährleisten, versuchen Sie, diese Anforderungen zu ändern, indem Sie mehr Navigationselemente hinzufügen, oder, um wirklich einen Schraubenschlüssel in die Arbeit zu werfen, fügen Sie auch ein Navigationselement mit einer höheren visuellen Hierarchie als die anderen hinzu. Lassen unsere Größen-, Typografie- und Farbregeln so etwas zu? Oder brauchen wir eine andere Regel, um eine optimale Benutzerfreundlichkeit zu bieten?

Denken Sie daran, dass es einen Unterschied zwischen dem Hinzufügen von Regeln und dem Biegen der Regeln gibt. Mehr Randfälle bedeuten weniger Konsistenz, daher ist es aus Gründen der Benutzerfreundlichkeit meistens besser, die Komponente einfach zu überdenken.

05. Dokumentieren und zusammenarbeiten

UI Design Guide: 05

InVision Studio macht das Erstellen einer gemeinsam nutzbaren und aktualisierbaren Komponentenbibliothek zum Kinderspiel(Bildnachweis: Daniel Schwarz)

Wie vereinfachen wir die Verwendung unserer Designdateien für uns selbst und andere Designer, die möglicherweise unsere Designdatei verwenden? Nun, halten Sie sie sicher in zuverlässigen, gemeinsam genutzten Cloud-Speicher ist wichtig, wie Sie herausfinden werden.

Farben

Der erste Schritt besteht darin, alle Farben im Farbfeld 'Dokumentfarben' zu speichern, sofern dies noch nicht geschehen ist. Dadurch wird der Zugriff auf sie erleichtert, wenn sie in unserem Design angewendet werden müssen. Öffnen Sie dazu das Farbauswahl-Widget im Inspektor, wählen Sie 'Dokumentfarben' aus der Dropdown-Liste und klicken Sie auf das Symbol +, um die Farbe zum Farbfeld hinzuzufügen. Dies funktioniert in den meisten UI-Tools genauso.

Gemeinsame Bibliotheken

Als nächstes müssen wir unser Dokument - einschließlich typografischer Stile, Farben, Schaltflächen, gemeinsamer Bereiche und grundlegender Komponenten - in eine gemeinsam genutzte Bibliothek konvertieren.

Im Wesentlichen bedeutet dies, dass jedes Element eine Komponente sein muss, auch wenn es nur aus einer Ebene besteht. Klicken Sie auf das + & zwnj; Klicken Sie auf die Schaltfläche in der linken Seitenleiste der Bibliotheken und importieren Sie genau dieses Dokument in ein neues Dokument. Das ist richtig: Unser Dokument ist jetzt eine Bibliothek und kann zum Entwerfen von Benutzeroberflächen mit garantierter Konsistenz verwendet werden.

InVision Studio ist in dem Sinne etwas eingeschränkt, dass es noch nicht mit dem offiziellen Design System Manager-Tool von InVision synchronisiert ist. Es ist jedoch einfach genug, die Bibliothek in Dropbox zu speichern, damit andere Designer sie im Laufe der Zeit verwenden und aktualisieren können. Wenn eine Änderung vorgenommen wird (lokal oder remote), werden Sie in jeder Studio-Datei, die die Bibliothek verwendet (erneut lokal oder remote), gefragt, ob Sie die Farben und Komponenten aktualisieren möchten. Auf diese Weise werden Designbibliotheken teamübergreifend verwaltet.

Alles recyceln

Wenn es darum geht, Benutzeroberflächen zu entwerfen, die visuell konsistent sind, verwenden Sie alles wieder. Entwerfen Sie Schaltflächen, verwenden Sie dann Schaltflächen, um Schaltflächenkomponenten zu erstellen, und verwenden Sie dann
Schaltflächenkomponenten, um andere Komponenten wie Warnungen und Dialoge zu erstellen.

Erstellen Sie nur keine Komponenten, die nicht benötigt werden. Denken Sie daran, dass der Aufbau einer Bibliothek eine kontinuierliche Zusammenarbeit ist. Es muss nicht auf einmal abgeschlossen sein, von Ihnen alleine oder jemals abgeschlossen. Es muss nur eine Sprache vermitteln.

Design im Maßstab

Wenn ein Design erweitert wird, wird die Verwaltung schwieriger. Möglicherweise möchten wir verschiedene Anpassungen vornehmen, um die Effizienz und Wartung zu gewährleisten, insbesondere da InVisions DSM noch nicht mit Studio funktioniert.

Beispielsweise möchten wir möglicherweise Textebenen verwenden, um unsere Bibliothek mit Anmerkungen zu versehen, um die Anwendungsfälle verschiedener Elemente zu erläutern. Für die typografischen Stile könnten wir den Text sogar so bearbeiten, dass er aussagekräftiger ist (z.

/ 1.3 / 44px '). Das sagt das

s sollte 44px groß sein und eine Zeilenhöhe von 1,3 haben.

Design Handoff

Design-Handoff-Tools zeigen die verschiedenen Stile an, die von jedem Element im Design verwendet werden, sodass Entwickler die App oder Website erstellen können. Diese Tools enthalten eine Übersicht über die Stile sowie eine Kopie des Farbfelds 'Dokumentfarben'. Entwickler können diese Stile sogar als Code kopieren. Dies ist hervorragend, wenn Sie sich für die Erstellung einer schriftlichen Konstruktionsdokumentation entschieden haben und Code-Snippet-Darstellungen der Komponenten einfügen möchten.



Wenn Sie sich Sorgen um die Fehlerbehebung und Verwaltung einer Website machen, stellen Sie sicher, dass Sie das Richtige haben Web-Hosting Service wird helfen, aber für Ihr Design-System ist InVisions Design-Handoff-Tool Inspect genau das Richtige. Um es zu verwenden, klicken wir in InVision Studio auf die Schaltfläche / das Symbol 'In InVision veröffentlichen', öffnen die resultierende URL und tippen auf, um in den Inspektionsmodus zu wechseln. Es ist wirklich praktisch.

Dieser Inhalt erschien ursprünglich im Netzmagazin.

Weiterlesen: