Ein Handbuch des Typs in der Benutzeroberfläche und im Entwurfssystem.

Die Schrift ist ein wesentlicher Bestandteil jedes Designs und wurde zu Kommunikationszwecken zu einem Teil unseres menschlichen Lebens. Aus diesem Grund spielt Typ in UI eine Schlüsselrolle und fungiert selbst als UI. Ich möchte Sie durch einige Punkte führen, die für Designer, die an digitalen Produkten arbeiten, hilfreich sein können.

A. Geben Sie die Benutzeroberfläche ein: Alles zu den Spezifikationen

Typ auf Bildschirm oder Typ in Benutzeroberfläche ist der Begriff, der verwendet wird, um den Texttyp anzugeben, der für die Anzeige auf elektronischen Bildschirmen oder in den Benutzeroberflächen (Benutzeroberflächen) optimiert ist. Um besser zu verstehen, welche Kriterien Type in der Benutzeroberfläche erfüllen muss, beginnen wir mit dem Zweck und dem Kontext der Verwendung von Type in der Benutzeroberfläche.

SamsungOne - SamsungGoogle Sans - GoogleYoutube Sans - Youtube

I. Zweck & Kontext

Bitte haben Sie Verständnis dafür, dass die Benutzeroberfläche mit anderen Marken-Touchpoints (Banner, Poster, Broschüren usw.) identisch ist. Eine der Hauptaufgaben der Benutzeroberfläche besteht darin, lesbaren Inhalt, Markenbotschaften, nützliche Informationen usw. für Benutzer zu übermitteln. Daher spielt die Schrift hier eine Schlüsselrolle, die dazu beiträgt, dem Benutzer die Informationen, die Botschaft und den Geist der Marke / des Produkts zu vermitteln.

Insbesondere wird der Typ in der Benutzeroberfläche zu zwei Hauptzwecken verwendet: Haupttext und Titel

Es kann jedoch keine Schriftart in der Benutzeroberfläche verwendet werden. Es gibt viele Faktoren zur Bewertung der Eignung einer Schriftart für eine bestimmte Benutzeroberfläche. Es gibt einige offensichtliche Gründe, warum Sie keine künstlerischen Handschrift- / Handschrift-Schriftarten für die Benutzeroberfläche eines Bankprodukts verwenden können.

Nun, nein.Ein Witz von Stackoverflow, der Comics verwendet, sucht alles, einschließlich Codezeilen.

II. Eigenschaften des Typs in der Benutzeroberfläche

Betrachten Sie nun die technische Perspektive, wie Sie eine Schrift für ein reibungsloses Leseerlebnis in der Benutzeroberfläche bewerten können. Was sind die Grundkriterien?

1. Lesbarkeit

Lesbarkeit ist das erste und wichtigste Kriterium bei der Bewertung einer Schriftart, da der Hauptzweck von Type in UI das Lesen ist, nicht nur das, sondern auch das extrem einfache und schnelle Lesen.

Betrachten wir zunächst die Klassifizierung der Schrift:

Sortieren Sie nach dem Detaillierungsgrad und dem Kritzeln jedes Wortes in der Klasse von vielen bis zu wenigen:

Dekorativ> Schrift> Serife -> Sans Serif

Natürlich sind Decorative & Script zwei Klassen, die nicht als Haupttext in der Benutzeroberfläche verwendet werden können, da sie unbekannte Formen und Schreibstile haben, die für das Lesen nicht optimal sind. Diese Klassen werden nur für große Spezialtitel verwendet, aber im modernen Design der Benutzeroberfläche werden diese beiden Klassen selten verwendet.

Die beiden anderen Klassen Serif & Sans Serif können das Lesen unterstützen.

Serif ist für Serifen geeignet, da sie häufig seriöse und formale Merkmale aufweisen, als Text in Textnachrichten, Artikeln, Magazinen oder Finanzinformationen. In den übrigen Fällen werden sie häufig als Titel verwendet.

Bei Sans Serif (auch bekannt als Grotesk / Grotesk) werden sie aufgrund der serifenlosen und vereinfachten Detailformulare als Serif freundlicher, moderner und manchmal auch lustiger. Sans Serif ist im modernen UI-Design weit verbreitet und beliebt, einschließlich einiger großer Namen wie Helvetica, Arial, San Francisco, Roboto, Segoe UI usw.

Lassen Sie uns nun in die Art einer Schrift eintauchen, um die Kriterien bei der Bewertung von Typ in der Benutzeroberfläche zu erfassen.

ein. Unterscheidbare Letterforms

Nehmen wir diese Sans Serif-Schriften als Beispiel:

Denken Sie, dass dies auf einen Blick zwei verschiedene Schriftarten sind?

Hierbei handelt es sich um zwei verschiedene Schriftarten, die obere Zeile ist auf Arial gesetzt und die untere Zeile ist Helvetica.

Obwohl sie viele ähnliche Linien besitzen, gibt es bei genauerem Hinsehen viele Unterschiede wie die Buchstaben a, f, r und t. Wie man sehen kann, haben die serifenlosen Schriften, obwohl sie viele Eigenschaften aufweisen, immer noch ihre eigenen, einzigartigen Designs, die die einzelnen Stimmen jeder Schrift bilden. Durch das Erkennen dieser „einzigartigen Stimmen“ kann Ihre Schriftart die Benutzer beeindrucken, die Marken- / Produktidentität erhöhen und ihnen helfen, sich an die Schriftart eines Produkts zu erinnern. Marke X verwendet beispielsweise eine Schrift mit dem Buchstaben t oben und die Marke Y eine Schrift ohne Ende.

IBM Plex weist identifizierbare Details auf, wie beispielsweise eine 90-Grad-Serifenfolge im rechten Winkel. Die Schüssel des Buchstabens B wird durch einen 90-Grad-Winkel und eine kreisförmige Kurve kombiniert.

Außerdem sollten wir auf die Wörter achten, die leicht verwirrt werden können, wenn sie nebeneinander platziert werden, siehe das folgende Beispiel:

Schauen Sie sich den obigen Text zum ersten und zweiten Mal an. Was können Sie lesen?

III, III, III, III, ||| ?

Die richtige Antwort ist der Buchstabe "i" mit "I", gefolgt von zwei "L", die mit "1" geschrieben sind und mit dem Zeichen "|" enden. Wenn Sie sehr genau hinschauen, können Sie feststellen, dass das „i“, wenn es großgeschrieben wird, einen dickeren Strich als das niedrigere „L“ hat.

Was ist also die Lösung? Schauen Sie sich IBM Plex Sans an:

IBM entwarf das Großbuchstabe „i“, indem er eine zweiköpfige Serife hinzufügte und dem Kleinbuchstaben „L“ ein Ende hinzufügte. Dadurch wurde das „Ill“ vollständig lesbar. :

Mit dieser kleinen Größe können wir „rn“ zu „m“ verwechseln, da diese 3 Wörter eine fast identische Struktur haben.

Gelernte Lektion: Achten Sie auf die Buchstaben und Zeichen in der Schriftart, legen Sie sie zusammen und berücksichtigen Sie viele Anwendungsfälle, die die Lesbarkeit beeinträchtigen können.

b. Typ Eigenschaften & Struktur

Eine für Fließtext optimierte Schrift muss die folgenden Anforderungen erfüllen:

  • Blende: Wie in "a" "e" "c" "C" "G"
Anhand des Bildes können Sie sehen, dass die obigen 2 Zeilen eine Blende haben, die leichter lesbar ist als die dritte Zeile mit einer engen Blende.
  • Breite: Die Breite des Textes muss moderat sein, nicht zu breit (erweitert / breit) oder nicht zu schmal (komprimiert / komprimiert).
Unterschiedliche Breiten der Sharp Grotesk-Familie.
  • Beziehung zwischen X-Höhe und Kappenhöhe: Die Korrelation zwischen der Höhe von Kleinbuchstaben (der Standard ist die Höhe des x) und der Höhe der Großbuchstaben. Dies muss moderat sein, nicht zu groß oder zu klein.
  • IBM Plex Serif (Links) von ArnhemFine (Rechts)

    Da IBM Plex Serif für die Benutzeroberfläche optimiert ist, korreliert es X / Cap kleiner als ArnhemFine auf der rechten Seite, was als Anzeigetyp ausgelegt ist.

    • Kontrast: Je größer der Kontrast zwischen dem stärksten und dem leichtesten Strich, desto größer der Kontrast, desto geringer ist die Lesbarkeit und die schlechte Lesbarkeit.

    Beatrice Display (links) và Beatrice (Rechts)

    Trotz der gleichen Struktur und Form, aber Beatrice Display ist für den Display-Typ optimiert, so dass der Kontrast maximal ist (dramatisch), während Beatrice so konzipiert ist, dass es sich in den Körpertext einfügt, so dass es einen moderaten Kontrast aufweist, der kaum wahrnehmbar ist.

    • Leading / Kerning: Der Abstand zwischen den Textzeilen und dem Abstand zwischen den Buchstaben (Kerning) ist der komplizierteste Teil beim Entwerfen einer Schrift. Verwenden Sie daher sorgfältig geschriebene Schriftarten. Siehe folgendes Beispiel:

    Gotham-Schrift

    Was liest du? "T ornado" ist Tornado? Da T und O nicht gut sind, wird sich der Leser beim Lesen unwohl fühlen, verwirrt und verwirrt.

    Mit freundlicher Genehmigung von Glyphsapp

    Bei der Schriftgestaltung wird es eine Menge Buchstaben mit Form und Struktur geben, die geschickt zusammengestellt werden müssen, um die beste Lesbarkeit zu erzielen. Die Rolle des Kerning in der Schrift ist daher nicht gering.

    • Mikrodetails: Dies sind kleine Details, die jedoch wesentlich dazu beitragen, das Lesen zu erleichtern, oder sie können zur Charakteristik (klarer Persönlichkeit) der Schrift hinzugefügt werden.

    Oppo Sans

    Beachten Sie den Stamm des Buchstabens „a“ in Oppo Sans. Bei einer großen Größe sehen Sie, dass dieser Stamm leicht nach links gebogen ist, was Oppo Sans dabei hilft, mehr Humanist und Unterstützung für die Leserichtung im Text zu haben:

    Oppo Sans

    2. Flexibilität

    In „Typ in UI“ wird Flexibilität auch als Responsive Typography bezeichnet. Dies bedeutet, dass Schriftarten in allen Umgebungen optimal gelesen werden können. Häufig verwendete Umgebungen in der Benutzeroberfläche können Folgendes umfassen:

    • Super klein wie Smart trägt (Apple Watch, Samsung Gear usw.)

    • Moderat als Smartphone (iPhone, Pixel usw.)

    • Groß und mittel als Tablet (iPad, Galaxy Tab usw.)

    • Groß wie Desktop (MacBook Pro, Surface usw.)

    • Andere spezielle Umgebungen wie Fernseher, Kühlschränke, Waschmaschinen usw.

    Für große Typenfamilien, die viele verschiedene Produktlinien bedienen, wie beispielsweise San Francisco, werden folgende Familienfamilien angezeigt:

    • SF UI: Dient zur Anzeige von Text auf iOS, tvOS und macOS

    • SF-UI-Anzeige: Bereitstellung von Medien, Werbung oder Titel- / Überschriften auf der Benutzeroberfläche.

    • SF UI Compact & Rounded: Wird auf watchOS angezeigt
    • Apples SF-Schriftbild

      Es gibt drei Hauptfaktoren für die Bewertung der Flexibilität einer Schrift:

      ein. Gewicht

      Gewicht ist der dünne und fette Typ einer Schrift. Wir haben die folgenden Typen in der dünnsten bis dunkelsten Reihenfolge:

      • Dünn

      • ExtraLight / UltraLight

      • Licht

      • Normal / Normal

      • Mittel

      • SemiBold / DemiBold

      • Fett gedruckt

      • ExtraBold / Ultrabold

      • Schwarz

      • Schwer

      Eine sorgfältig erstellte Schrift hat alle oder die meisten der oben genannten Gewichtsarten. Beim Design der Benutzeroberfläche legen wir häufig Wert auf die Modi Regular, Medium und Bold, da diese drei Modelle mäßig dünn / fett sind.

      Die Gewichtungen werden kombiniert, um verschiedene Hierarchien gemäß IBM Design System 2.0 zu erstellen

      Für kurze Texte wie Titel oder Untertitel: Die meisten Gewichte können in großer oder mittlerer Größe verwendet werden. Für kleine Formate wie 8–10pt, Gewicht mittel oder Fett wird empfohlen. Dies liegt daran, dass sie die Lesbarkeit besser halten als leichtere Gewichte.

      Für Absätze oder Absätze mit 2 oder 3 Zeilen Länge: Beachten Sie, dass in diesem Fall reguläre Absätze Texttypen bilden, die als Textilien mit vielen kleinen Löchern interpretiert werden können, die durch einen negativen Abstand in den Buchstaben gebildet werden. Mäßig dünne Gewichte wie „Normal“ oder „Mittel“ übertreffen Fett, da die Textilien mit mäßigen Löchern versehen sind. Dies schafft etwas Luft für den Absatz und erleichtert das Lesen.

      IBM Plex Sans: Medium (Links) và Fett (Rechts)

      b. Breite

      Die Breite und Breite der Schrift haben wir in der engsten zur breitesten Reihenfolge:

      • UltraCondensed

      • ExtraCondensed

      • SemiCondensed

      • kondensiert

      • SemiExpanded

      • erweitert

      • Ultra erweitert

      • ExtraExpandiert.

      Normalerweise hat der Hauptteil des Textes nicht viel mit den oben genannten Breiten zu tun, aber bei Title / Heading trägt die Kombination von Width zur Verbesserung der Ästhetik / Markenidentität des Produkts bei.

      Dropbox verwendet erweiterte Breiten in Kombination mit Textkörper, um eine klare Hierarchie zwischen Titel und Text sowie die Markenidentität von Dropbox zu erstellen.

      c. In verschiedenen Größen verarbeitbar

      Bei der Verwendung von Schriftarten in der Benutzeroberfläche müssen wir ihnen viele verschiedene Größen von groß bis klein geben. Der Hauptzweck besteht darin, eine bessere Hierarchie in den Informationen zu schaffen. Daher muss die Schrift darauf reagieren, dass alle Größen gut lesbar sind.

      Die von IBM empfohlenen Größen sollten in ihrem Entwurfssystem verwendet werden

      Daher haben wir die Lesbarkeit - Flexibilität und die Hauptkriterien für die Bewertung des Typs in der Benutzeroberfläche beschrieben. Darüber hinaus gibt es eine Reihe weiterer Funktionen, die die Schrift in der Benutzeroberfläche effektiver machen, z.

      • Opentype-Funktionen

      Opentype ist ein neuer Horizont für moderne Typografietechnologie, der es Designern ermöglicht, Dutzende cooler Funktionen in der Datei-Schriftart zu stopfen. Features sind:

      • Standardligaturen
      • Sensible Fälle
      • Stilistische Sets
      Beispiele für OTF-Funktionen

      • Mehrsprachiger Support

      Die meisten Schriften in der Welt unterstützen Englisch und einige Sprachen verwenden andere beliebte lateinische Zeichen wie Französisch, Deutsch, Spanisch usw. Was ist nun mit Kulturen, verwenden Sie diese Sprachen nicht? Besonders in Vietnam, obwohl wir immer noch die lateinische Schrift besitzen, ist Vietnamesisch viel komplizierter mit akzentuierten Glyphen (Buchstaben, die diakritische Zeichen verwenden), wie Akut, Grab, Haken, Tilde, Punkt unten oder Horn und Umlaufflex als Buchstaben "ê". Bei der Auswahl der UI-Schrift für bestimmte Märkte wie Vietnam muss daher sorgfältig auf die Fälle akzentuierter Glyphen geachtet werden, um zu vermeiden, dass sich die Marken in mehreren Textzeilen "verkleben".

      Mit freundlicher Genehmigung von Typography.Guru

      II. Geben Sie das Design-System ein: Alles zu den Regeln

      Das Design System ist eine große Struktur, bei der die Benutzeroberfläche und der Typ „Eingabe in der Benutzeroberfläche“ kleinere Komponenten sind. Überlegen Sie nach der Einrichtung von Type in UI, wie diese Schrift in einem Design-System funktioniert.

      Typ in DS ist als eine Reihe von Nutzungsregeln ausgelegt. Diese Regeln beinhalten:

      • Familie: Gewichte und Stile

      • Ausrichtung

      • Textstile und Skalen

      • Farbe

      1. Familie: Gewichte & Stile

      Ein Design-System kann abhängig von der Komplexität des DS viele Textstile aufweisen. Wie in (1) erwähnt, sollten wir jedoch eine begrenzte Anzahl von Textstilen beibehalten, um die beste Konsistenz in DS zu gewährleisten.

      IBM Plex Sans-Familie

      Es sollte jedoch beachtet werden, dass die Typfamilie eine begrenzte Anzahl von Gewichtungen und Stilen haben sollte, die nicht zu groß und nicht zu klein sind, um die Konsistenz der DS zu gewährleisten. Wenn beispielsweise ein Familientyp aus bis zu 36 Schriftarten besteht (siehe Beispiel unten), kann der DS unnötig stören:

      Parisine Typ Familie

      2. Ausrichtung:

      Wenn wir den Fall angeben, sehen wir häufig 4 allgemeine Arten von Zeichen: Left, Middle, Right und gleichmäßige Abstände. Um das Lesen von Schriftarten mit lateinischen Zeichensätzen zu optimieren, wird der Text häufig links, rechts und manchmal zentriert.

      In Design System muss der Designer angeben, wann der Text linksbündig, rechtsbündig und wann zentriert werden soll.

      Das IBM Design System 2.0 gibt an, dass der Text ausgerichtet bleibt.

      3. Textstile und Skalen

      Nachdem wir über die Typfamilie verfügen, müssen wir jeden Schrifttyp in familienspezifischen Rollen (Textstil) festlegen, indem wir uns auf die Art der einzelnen Schriftarten verlassen. Das Festlegen eines Textstils ist in Design System von großer Bedeutung, da es den Mitarbeitern, die mit DS arbeiten, erleichtert, die Schriftart in DS zu verstehen und die DS konsistent zu halten.

      Ein Design-System kann abhängig von der Komplexität des DS viele Textstile aufweisen. Wie in (1) erwähnt, sollten wir jedoch eine begrenzte Anzahl von Textstilen beibehalten, um die beste Konsistenz in DS zu gewährleisten.

      Beispiele für die Textstile, die IBM in ihrem DS verwendet

      Welchen Faktor schreibt Text Style vor? Bitte beachten Sie die folgenden Angaben:

      • Stilschrift: Normal oder Kursiv

      • Schriftgewicht: Leicht, Normal, Mittel,…

      • Schriftgröße: 8px, 16px, 24px,…

      • Zeilenhöhe: Auto, 16px, 24px,…

      • Buchstabenabstand: Auto, 1px, 2px,…

      4. Farbe

      Neben dem Erstellen von Hierarchien nach Gewicht, Größe und Stil können wir Farbelemente verwenden, um eine bestimmte Rolle für eine Schriftart in der Schriftart zu platzieren.

      In Design System werden häufig Fälle angezeigt, in denen Schriften verwendet werden:

      • Hinweis: Fehler, Erfolg, Warnung usw.

      • Felder: Eingabefelder, Absatzfelder usw.

      • Status: Aktiv, inaktiv, deaktiviert usw.

      Suchfeld der Google-Suche

      Im obigen Beispiel sehen wir, dass 3 Farben zum Erstellen von Hierarchien verwendet werden:

      • Schwarz: Für Eingaben wie "type in Design System" und "type system in compiler design" verwenden. Dies ist die Farbe für den Text im Standardzustand.

      • Grau: Wird in Schaltflächen wie „Suche bei Google“ verwendet, bedeutet diese graue Farbe, dass die Schaltfläche inaktiv ist.

      • Blau: Bei den unteren Hyperlinks wie „Englisch“ oder „Français“ bezieht sich dieses Grün darauf, dass der Text anklickbar ist und zu einem anderen Link führt.

      Was ist die Tendenz zur Verwendung von type in Design System?

      In großen Unternehmen und Konzernen wird das Anpassen der Schrift heutzutage zu einem wesentlichen Trend in großen Systemen, um eine „einzigartige Stimme“ mit höherer Markenidentität zu schaffen. Einige können einschließen:

      Apple Human Design Guideline mit San Francisco

      Google Material Design mit Google Sans & Roboto

      Samsung Design mit Samsung Sharp Sans & Samsung One

      Airbnb-Design mit Airbnb-Getreide

      Uber Design mit Uber Move

      Uber MoveAirbnb-Getreide

      Wie zu sehen ist, gibt es zwei Ansätze für den Typ in Design System:

      • Verwenden Sie nur eine Schriftart für Display & Body Text (A) (Airbnb).

      • Verwenden Sie zwei Schriftarten, eine für Display und eine für Body Text (B) (Samsung)

      Für den Ansatz (A), da die Schrift sowohl den Zwecken von Anzeige als auch von Körpertext genügen muss, wird durch die Neutralisierung zwischen diesen beiden Zwecken die Schrift neutral, da sie einerseits jeden Gegenstand gut bedienen kann. Andererseits wird die starke Charakteristik bei der Anzeige zur Anzeige gesperrt.

      Vergleich von Airbnb Cereal mit Netflix Sans

      Da für die Vorgehensweise (B) jeder Schriftart eindeutig ein Zweck zugewiesen wird, maximiert sie ihre Eigenart. Wenn das Designsystem jedoch keine Regeln mit einem guten Typ festlegt, führt dies leicht zu einer mangelnden Konsistenz in DS.

      Samsung Sharp Sans (Titel) und Samsung One (Body)

      Wir haben also ausführlich über Typ in Design System und Typ in der Benutzeroberfläche gesprochen.