Einführung in Icons


In diesem Artikel:

Im folgenden Abschnitt lernst du, wie du Icons findest, sie deinem Projekt hinzufügst und ihre Größe und ihren Stil formatierst. Du lernst auch, wie du sie auf der Seite gruppierst und mithilfe des Gliederungs-Panels schnell und effektiv organisierst.

Icons spielen eine wesentliche Rolle dabei, Benutzern die Navigation in einer Benutzeroberfläche zu erleichtern. Wenn du neu im Design bist, ist der einfachste Weg, ihre einzigartige Rolle und ihren Zweck zu verstehen, sich das Leitsystem eines internationalen Flughafens vorzustellen.

Die Ikonografie des Flughafens muss universell, inklusiv und sprachunabhängig sein. Reisende müssen auf einen Blick erkennen können, wo sie für Gepäck, Informationen, Essen, Toiletten, Zoll, Ankünfte, Abflüge, Taxis, Busse und so weiter hingehen sollen.

Daher müssen die Icons nicht nur klar und eindeutig sein, sondern auch zur selben „Familie" und zum selben Stil gehören – damit du sofort weißt, dass du es mit der offiziellen Beschilderung des Flughafens zu tun hast. Sie müssen eine eigene grafische Sprache haben, weshalb sie normalerweise in Stilgruppen angewendet werden.

Die Flughafenikonografie ermöglicht es Zehntausenden von Nutzern, gleichzeitig die komplizierte Architektur von Flughäfen zu navigieren, Chaos und Verwirrung zu minimieren und pünktlich zu ihren Flügen zu gelangen.

Ebenso ermöglichen die Icons in deiner UI Millionen von Benutzern eine nahtlose Navigation mit einfachen, schnellen und klaren Wegweisern.

Aufgrund der grundlegenden Bedeutung und des Nutzens von Icons haben sie einen eigenen, dedizierten Tab.

Um die Symbolbibliothek zu finden, gehe zur Linken Seitenleiste und klicke auf den Icons-Tab. Der Tab wird blau und öffnet das Icons-Panel.

1.icons.gif

Unsere Symbolbibliothek enthält zahlreiche Icon-Kits: Material Design, Font Awesome, Bootstrap, Feather, Hawcons, Amazon AWS, Azure Services, Kubernetes, Google Cloud, Cisco, RPG Awesome und Emoji. Und viele dieser Sets bieten verschiedene Themes; unser Material Design-Paket enthält beispielsweise jetzt die Varianten Filled, Outlined, Rounded, Sharp, Two-Tone und Community.

Icons können wie alle anderen Objekte angepasst und gestaltet werden – aber die Arbeit mit Icons unterscheidet sich in zwei wesentlichen Punkten:

  • Wie du nach Icons suchst
  • Wie du die einzigartige Ersetzen-Funktion nutzen kannst

Beide Themen werden wir in den folgenden Artikeln dieses Abschnitts behandeln.

Noch auf der Suche?

  • Wenn du deine Objekte (Icons) kombinieren und gruppieren möchtest, um Vorlagen zu erstellen, klicke hier.
  • Wenn du lernen möchtest, wie du deinen Icons Interaktionen hinzufügst, klicke hier.