Verwendung von Typografie im UI-Design
Daher müssen Sie die Grundlagen der Typografie lernen, um ein effizientes UI-Design zu erstellen. Dennoch gibt es viele Webmaster und Designer, die nicht wissen, wie Typografie im UI-Design richtig eingesetzt werden kann.
Wenn Sie Designer sind, müssen Sie eine große Chance auf den Text haben und ihn nicht nur als Inhalt, sondern als Grundmerkmal des UI-Designs betrachten. 95% Typografie sind im Webdesign enthalten und Sie müssen über die Schrift gehen.
Lesen Sie auch: So erstellen Sie ein außergewöhnliches UI-Design für mobile Apps, das sofort Aufmerksamkeit erregt
Sie müssen über Lesbarkeit, Verantwortlichkeit und Grafikbalance nachdenken, wenn Sie Ihre Typografie für das UI-Design optimieren möchten, aber die Benutzerfreundlichkeit ist mit Sicherheit der wichtigste Aspekt.
Was ist Typografie?
Laut Wikipedia ist es eine Methode und die Kunst, Schriftarten zu organisieren, um die geschriebene Sprache attraktiv, lesbar und lesbar zu machen, wenn sie präsentiert wird.
Die Systematisierung des Typs umfasst das Auswählen von Punktgrößen, Schriftarten, Zeilenabständen, Zeilenlängen, Buchstabenabständen und das Ändern des Abstands zwischen Buchstabenpaaren.
Der Begriff “Typografie” gilt auch für die Organisation, den Stil und das Erscheinungsbild der durch das Verfahren erzeugten Symbole, Zahlen und Buchstaben.
Kurz gesagt, Typografie handelt von allem, was mit der geschriebenen Sprache auf dem Bildschirm zusammenhängt, und erfordert sowohl die taktischen als auch die künstlerischen Fähigkeiten eines Designers.
Best Practices der Typografie im UI-Design
Wenn Sie ein hervorragendes UI-Design erstellen möchten, sollten Sie Ihre Typografie beherrschen.
In diesem Blog werde ich einige Richtlinien vorstellen, die Ihnen dabei helfen, den Typografiestil im UI-Design zu übertreffen.
1. Vollständig erkennbare Briefformen
Zahlreiche Schriften haben bestimmte Buchstabenformen, die sich nicht von anderen in diesem Satz unterscheiden. Dies kann es sehr schwierig machen, den Text dieser Benutzeroberfläche zu lesen.
Zusammen mit Buchstaben werden Zahlen manchmal wirklich ignoriert, verglichen mit verschiedenen Attributen von Schriftarten für eine bestimmte Aufgabe.
2. Textstile
Verwenden Sie nach Möglichkeit integrierte Textstile, um den Kontext visuell unterschiedlich darzustellen und gleichzeitig die absolute Lesbarkeit zu gewährleisten.
Diese Stile hängen von den Systemschriftarten ab und helfen Ihnen dabei, grundlegende typografische Funktionen wie Dynamic Type zu nutzen, mit denen das Führen und Verfolgen für jede Schriftgröße automatisch geändert wird.
3. Prototyping
Neben allen Arten von Designs ist Typografie auch beim Prototypendesign von entscheidender Bedeutung. Erstaunliche mobile Typografie kann zusammen mit jedem UI-Element zu einer produktiven und sauberen mobilen UI beitragen. Beim Entwurf mobiler Prototypen muss der Text jedoch nicht aussagekräftig sein.
In Mockplus, einem der besten Prototyping-Tools, können Sie beispielsweise Textkomponenten zum einfachen Ziehen und Ablegen verwenden.
Mockplus besteht aus einzeiligen und mehrzeiligen Textelementen. Es steht Ihnen frei, die Eigenschaften des Textes wie Schriftart, Schriftgröße, Ausrichtung, Farbe usw. zu beschreiben.
Darüber hinaus sparen Sie durch die automatische Datenfüllfunktion des Textes viel Zeit. Sie können das Design auch auf einem echten Mobiltelefon untersuchen, um zu überprüfen, ob es eine hervorragende Lesbarkeit aufweist.
4. Größe ist wichtig
Normalerweise ist zu erkennen, dass zahlreiche Designer Textkomponenten enthalten, die sich in der Größe unterscheiden. Zum Beispiel Schaltflächenkopie, Feldbezeichnungen, Abschnittsüberschriften usw.
Normalerweise sind einige Schriften ideal für große Größen, während andere perfekt aussehen, wenn sie in kleinen Größen oder für Briefformen verwendet werden.
Dabei müssen Sie über die Skalierbarkeit des Textes nachdenken, falls Sie eine Schrift haben, die Sie auf große Überschriften und kleine Beschriftungen anwenden müssen.
Wenn Sie eine Schriftart auswählen, die auf eine bestimmte Weise angezeigt wird, sollten Sie über eine Schriftart nachdenken, die mit verschiedenen Größen kompatibel ist und die Lesbarkeit und Benutzerfreundlichkeit fördert.
5. Buchstabenabstand
Die einzige Sache, über die Sie im Buchstabenabstand nachdenken müssen, ist, dass Sie den Abstand entsprechend und kleiner zur Textgröße machen müssen, wenn der Text größer ist.
Wenn Sie große Buchstaben mit großem Abstand koppeln, erscheint die Schrift sehr offen und dies hilft Ihnen, den Abstand manuell zu korrigieren. Diese manuelle Einstellung des Buchstabenabstands gilt nur für Überschriften im UI-Design.
6. Breites Verhältnis
Die Breite eines Charakters in Verbindung mit seiner Höhe wird als Proportion erklärt. Normalerweise benötigen Sie einen breiten Buchstaben und keinen komprimierten, um die Buchstaben besser erkennen zu können. Dies liegt an der besseren Lesbarkeit.
7. Lesbarkeit
Dies betrifft die Qualität des gesamten Leseerlebnisses und wird als die Leichtigkeit beschrieben, mit der Sie Textblöcke, Unterüberschriften, Absätze, Überschriften identifizieren und den Ihnen präsentierten Text verstehen können.
Sie können es als eine Makrotypografie betrachten, die den Text attraktiv macht, um Website-Besucher zum Lesen des Inhalts zu ermutigen.
8. Ohne Serife vs. Serif
Nach der Geschichte sind Serifen besser lesbar. Sie wurden über einen längeren Zeitraum im Druck verwendet und verbessern das Leseerlebnis bei großen Textblöcken erheblich. Mit Serif kann das Auge leichter über den Text fließen.
Diese Geschichte ist jedoch auf Mobilgeräten und im Internet nicht dieselbe. Es gibt verschiedene serifenlose Schriftarten, die gelesen werden können, und der aktuelle Zustand des visuellen Designs mag einfache Buchstabenformen. Im Web und speziell auf Mobilgeräten können Sie mehr serifenlose Inhalte sehen.
Darüber hinaus ist das Display definitiv kein Papier und im Allgemeinen werden Sie keine langen Texte im Web lesen, insbesondere in Anwendungen.
Dabei hängt alles von dem Projekt ab, mit dem Sie sich befassen, und davon, wie die Benutzer Ihre Inhalte verwenden.
9. Hierarchie
Das Lesemuster wird durch Hierarchie bestimmt. Hier erfahren Sie, wie Sie eine Kopfzeile vom Haupttext und der Unterüberschrift trennen.
Dies kann unter Verwendung des Effekts von Kontrast, Rändern, Textgrößen, Auffüllung usw. erfolgen. Sie müssen diese Methode richtig erlernen, um eine erstaunliche Lesbarkeit zu beherrschen.
10. Szenarien im Blick
Wenn Sie den Text fertigstellen möchten, den Sie in Ihr UI-Design aufnehmen möchten, müssen Sie mehrere Szenarien überprüfen. Sie müssen auch verstehen, wie der Text abgeglichen und geformt wird. Eine Warnmeldung ist ein Beispiel dafür.
Der Originaltext muss sich vom Text der Warnmeldung unterscheiden. Dies macht deutlich, dass eine gute Benutzeroberfläche Herausforderungen begegnet, aber am Ende fehlerfrei ist.
11. Tatsächliche Plattform
Dies scheint wirklich eindeutig zu sein, wird aber normalerweise übersehen. Wenn Sie eine mobile App entwickeln, wird empfohlen, diese auf mobilen Plattformen zu testen.
Wenn Ihre Benutzeroberfläche in einem reaktionsschnellen Format erstellt wurde, führen Sie alle Tests auf verschiedenen Größen und Geräten durch, um festzustellen, ob die Entscheidungen über den Text relevant sind oder nicht.
12. Rhythmus und Wiederholung
Dies ist ein ungeschickter Teil des UI-Designs. Jede Komponente, die wiederholt wird, dient dazu, Einheitlichkeit im Design zu bieten.
Diese Wiederholungstechnik kann durch Kästchen, Hintergründe, Textgröße, Auffüllung, Farben und Ränder angewendet werden. Wiederholung berücksichtigt Rhythmus.
13. Linienhöhe
Es ist sehr ratsam, den Goldenen Schnitt zu verwenden, wenn es um das Führen geht. Falls Sie mehr Erfahrungen haben, können Sie dieses Ergebnis manuell anpassen.
Auf jeden Fall gibt es einige Ausnahmen von dieser Regel, und diese Regel kann immer dann gebrochen werden, wenn dies erforderlich ist.
14. Leerraum
Durch Leerzeichen wird die Textmenge minimiert, die Ihre Besucher sofort lesen müssen. Dies verbessert die Lesbarkeit und verhindert, dass die Seite ungeschickt aussieht.
Der weiße Raum ermöglicht dem Auge die Beobachtung des Layouts und sorgt so für eine attraktive und raffinierte Anordnung der Inhalte.
15. Textblockbreite
Angenommen, Sie lesen auf dünnem Eis. Sehr breite Textblöcke erschöpfen Ihre Augen, während Sie die nächste Zeile zum Lesen hinzufügen.
Wenn die Linien nicht breit sind, wird das Auge auf verschiedene Weise gezwungen, von Linie zu Linie zu gehen, wodurch der Lesefluss verhindert wird.
Leser erhalten unbewusst Energie durch das Konzept, zur nächsten Zeile zu springen. Und um alle Leser in ihren Bann zu ziehen, müssen Sie nur 50 bis 75 Zeichen in Ihrer Textzeile behalten.
16. Text ist eine Benutzeroberfläche
Der Unterschied zwischen unerfahrenen und erfahrenen UI-Designern wird anhand ihrer Textansicht gemessen. Erfahrene Designer betrachten den Text als Benutzeroberfläche, während die unerfahrenen ihn als ein weiteres Inhaltselement betrachten.
In diesem modernen digitalen Zeitalter sollte Ihr Text eine funktionale Komponente unterstützen, wodurch er der Benutzeroberfläche ähnelt. Dies bedeutet, dass alle Funktionen Ihres UI-Designs mit den von Ihnen eingegebenen Texten kompatibel sein sollten.
Abschließend
Unabhängig vom Zweck führt der Typ immer die Benutzeroberfläche an. Ihr Text wird beherrschen, wenn Sie ihn richtig einstellen, und er wird fehlschlagen, wenn Sie ihn falsch einstellen. Alle UI-Entwurfspraktiken gelten für die ausgewählte Schriftart.
Ein vollendetes UI-Design verfügt über eine hervorragende Typografie. Dabei kann ein Text, der sich durch hohe Flexibilität und Skalierbarkeit auszeichnet, das Rennen der fließenden Begegnung mit Ihrem Design bestimmen.
Befolgen Sie die oben genannten Tipps und nutzen Sie sie, falls Sie bereit sind, sich auf dem Markt zu etablieren und das Rennen als erfahrener UI-Designer zu gewinnen.
