Material Icons Guide - Google Entwurf
Eine Übersicht über Material Icons-wo sie bekommen und wie sie mit Ihren Projekten zu integrieren.
Material-Design-System-Icons sind einfach, modern, freundlich und manchmal schrullig. Jedes Symbol wird erstellt, unsere Design-Richtlinien unter Verwendung von in einfachen und minimalen Formen die universellen Konzepte häufig über einen UI verwendet, um darzustellen. Die Gewährleistung der Lesbarkeit und Klarheit bei großen und kleinen Größen haben diese Symbole für schöne Anzeige auf allen gängigen Plattformen und Bildschirmauflösungen optimieren.
Die gesamte Menge von Material Design-Ikonen im Material-Icons Bibliothek.
Die Symbole sind in verschiedenen Formaten verfügbar und eignen sich für verschiedene Arten von Projekten und Plattformen für Entwickler in ihren Anwendungen und für Designer in ihren Mockups oder Prototypen.
Wir haben diese Symbole zur Verfügung gestellt, damit Sie sie in Ihre Produkte unter der Apache-Lizenz zu übernehmen Version 2.0. Fühlen Sie sich frei remixen und Re-Aktie dieser Symbole und Dokumentation in Ihren Produkten. Wir würden Zuschreibung in Ihrer App über Bildschirm lieben, aber es ist nicht erforderlich. Das einzige, was wir verlangen ist, dass Sie nicht wieder verkaufen die Symbole selbst.
Surfen und Herunterladen von einzelnen Icons
Der vollständige Satz von Material Symbole sind auf dem Material Symbol-Bibliothek zur Verfügung. Die Symbole stehen zum Download in SVG oder PNG-Dateien, Formate, die für das Web geeignet sind, Android und iOS-Projekte oder für die Aufnahme in jeden Designer-Tools.
Herunterladen alles
Git Repository
Die Materialien Symbole sind aus der git-Repository zur Verfügung, die den vollständigen Satz von Symbolen enthält, einschließlich all die verschiedene Formate, die wir zur Verfügung machen.
Installieren von Symbolen von Bower
Installieren Sie die Symbole, um die Bower Paketmanager.
Installieren von Icons aus npm
Installieren Sie die Symbole npm Paketmanager.
Das Material Symbol Schrift ist die einfachste Art und Weise Material Icons mit Webprojekten zu integrieren. Wir haben alle materiellen Symbole in einer einzigen Schrift verpackt, die die Vorteile der typographischen Rendering-Fähigkeiten von modernen Browsern nimmt, so dass Web-Entwickler leicht diese Symbole mit nur wenigen Zeilen Code integrieren können.
die Schriftart zu verwenden ist nicht nur die bequemste Methode, aber es ist effizient und sieht gut aus:
- 900+ Symbole aus einer einzigen, kleinen Datei.
- Serviert von Google Web Font-Server oder kann selbst gehostet werden.
- Unterstützt von allen modernen Web-Browsern.
- Farbig, große und ganz mit CSS positioniert.
- Vektor-basiert: Schaut in jedem Maßstab, Retina-Displays, Low-dpi-Bildschirme.
Das Symbol Schriftart wiegt nur 42KB in seinem kleinsten woff2 Format und 56KB in Standard woff Format in. Im Vergleich dazu werden die SVG-Dateien mit gzip komprimiert werden in der Regel um 62KB groß, aber dies kann nur die Symbole durch Kompilieren erheblich reduziert werden Sie in eine einzige SVG-Datei mit dem Symbol Sprites müssen.
Setup-Methode 1. Mit über Google Web Fonts
Der einfachste Weg, Symbol Schriftarten für die Verwendung in einer beliebigen Web-Seite einzurichten, ist durch Google Web Fonts. Alles, was Sie tun müssen, ist eine einzige Zeile HTML umfassen:
Setup-Methode 2. Selbst Hosting
Mit den Symbolen in HTML
Es ist einfach, Symbole in Ihre Webseite zu integrieren. Hier ist ein kleines Beispiel:
In diesem Beispiel wird eine typographische Funktion namens Ligatur. das ermöglicht Rendering von einem Symbol Glyphe einfach durch seine Textnamen. Der Austausch wird automatisch vom Web-Browser und bietet lesbaren Code als die entsprechende numerische Zeichenreferenz.
Diese Funktion wird in den meisten modernen Browsern auf Desktop- und Mobilgeräten unterstützt.
Version unterstützt Ligatur
Über das Symbol Schrift ermöglicht eine einfache Styling eines Symbols in jeder Farbe. In Übereinstimmung mit Material Design-Ikone Richtlinien. für aktive Symbole empfehlen wir die Verwendung mit 54% Opazität oder weiß bei 100% Opazität entweder schwarz, wenn diese auf den hellen oder dunklen Hintergründen anzuzeigen sind. Wenn ein Symbol deaktiviert oder inaktiv ist, bei 26% unter Verwendung von schwarz oder weiß bei 30% für helle und dunkle Hintergründe sind.
Hier sind einige Beispiele, die Material CSS-Stile wie oben beschrieben mit:
Beispiel für mit einem dunklen Vordergrundfarbe auf einem hellen Hintergrund ein Symbol Zeichnung:
Gesicht
Gesicht
Beispiel für mit einem hellen Vordergrundfarbe auf einem dunklen Hintergrund ein Symbol Zeichnung:
Material Symbole sind auch als normale Bilder, sowohl in PNG und SVG-Formaten.
Die Materialien Symbole werden als SVGs zur Verfügung gestellt, die für Web-Projekte geeignet sind. Einzelne Symbole sind aus dem Material Icons Bibliothek heruntergeladen werden. Die SVGs sind auch aus dem Material Design-Ikonen git-Repository unter dem Pfad:
Zum Beispiel Symbole für die Karten sind in Karten / svg / Produktion:
PNG ist die traditionelle Art und Weise Symbole auf dem Web angezeigt werden soll. Unsere Downloads aus dem Material Icons Bibliothek bieten sowohl Einzel- und Doppel Dichten für jedes Symbol. Sie werden als 1x_web und 2x_web jeweils im Download. Icons auch im Git-Repository verfügbar unter:
PNGs geeignet für Android ist aus dem Material Ikonen-Bibliothek zur Verfügung. Diese kommen in allen unterstützten Bildschirmdichten, so dass sie auf jedem Gerät gut aussehen sollte.
Die Symbole sind auch im Material Design-Ikonen git-Repository in der gleichen Kombination von Farben und Größen erhältlich wie folgt benannt:
Eine dichteunabhängige VectorDrawable vorgesehen ist, die von Android Lollipop unterstützt wird und später:
Der Vector Drawable ist derzeit nur als schwarzes 24dp Symbol zur Verfügung. Dies ist für die Kompatibilität mit unserer Standard-Icon-Größe. Um das Symbol in einer anderen Farbe zu machen, verwenden ziehbar Tönung auf Android Lollipop.
Material Symbole funktionieren auch gut in iOS-Apps. Sowohl in der Material-Icons Bibliothek und git-Repository. Diese Symbole werden in Xcode Bilder verpackt bis die leicht mit Xcode Asset-Kataloge (xcassets) arbeiten. Diese Bilder können auf alle Xcode Asset-Kataloge hinzugefügt werden, indem sie in Xcode auf den Asset-Katalog oder durch Kopieren Sie den Ordner, in die xcasset Ordner ziehen.
Die Grafiksammlung enthält die Einzel-, Doppel- und Dreifachdichtebilder (1x, 2x, 3x), so dass sie arbeiten auf allen Bildschirmdichten iOS bekannt. Sowohl Schwarz-Weiß-Ikonen sind vorhanden, aber wir empfehlen UIImage den imageWithRenderingMode mit UIImageRenderingModeAlwaysTemplate mit dem dem Bild erlauben wird, als Alpha-Maske verwendet werden, die zu jeder möglichen Farbe getönt werden können.
Sprachen wie Arabisch und Hebräisch von rechts nach links (RTL) lesen. Für RTL Sprachen sollte UIs gespiegelt werden die meisten Elemente in RTL anzuzeigen. Wenn eine Benutzeroberfläche für RTL gespiegelt wird, sollen einige der Symbole auch gespiegelt werden. Wenn Text, Layout und Ikonographie gespiegelt werden von rechts nach links UIs zu unterstützen, alles, was zu der Zeit bezieht, sollte nach links, wie sich von rechts dargestellt werden. Zum Beispiel Swappunkte nach links und rückwärts nach rechts zeigt. Jedoch darauf achten, dass der Kontext, in dem das Symbol platziert wird auch beeinflusst, ob ein Symbol gespiegelt werden soll oder nicht.
RTL-Symbole auf Android
Die Android-Entwickler Artikel beschreiben im Detail, wie RTL Benutzeroberflächen zu implementieren. Standardmäßig auf Android, Symbole spiegeln nicht, wenn das Layout Richtung gespiegelt wird. Sie müssen die entsprechenden Symbole speziell spiegeln, wenn nötig, entweder durch spezialisierte Vermögen für RTL Sprachen anbieten oder ein Rahmen-Funktionalität, die Vermögenswerte zu spiegeln.
Um Fachvermögen für RTL Sprachen zur Verfügung stellen, können Sie die ldrtl Qualifier auf Ressourcen-Verzeichnisse verwenden, wie res / ziehbar-ldrtl /. Ressourcen innerhalb solcher Verzeichnisse werden nur für RTL Sprachen verwendet werden. Für Geräte mit Android API 19 oder höher bietet der Rahmen auch das autoMirrored Attribut für Drawables. Wenn dieses Attribut auf true gesetzt ist, wird die ziehbar automatisch auf RTL Sprachen gespiegelt werden.
Bei der Verwendung von autoMirrored oder Bereitstellung von alternativen Drawable Ressourcen ist keine Option, die Image scaleX Attribut kann auch Drawables verwendet werden, um Spiegel (zum Beispiel durch ein RTL-spezifisches Layout in einem res / Layout-ldrtl Verzeichnis bereitstellt).
Mirroring innerhalb der Layout-Datei:
Schließlich kann Drawables programmatisch gespiegelt werden.
überprüfen manuell für Layoutrichtung mit getLayoutDirection:
Mirroring Image Inhalt programmatisch:
RTL-Symbole auf iOS
iOS hat das Konzept eines UISemanticContentAttribute, die jede Ansicht angebracht ist. Dies kann nicht angegeben werden. forceLeftToRight. forceRightToLeft. Wiedergabe- oder räumlich. IOS verwendet diesen Wert, und die (von links nach rechts (LTR) / RTL-Einstellung der Vorrichtung der Schnittstelle präsentiert die effectiveLayoutDirection der Ansicht zu bestimmen. Diese effectiveLayoutDirection bestimmt, ob oder ob nicht ein Bild spiegeln, wenn sie angezeigt wird.
Standardmäßig ist Bilder semantischen Inhalt nicht spezifiziert gesetzt. Dies bewirkt, dass sie in der RTL-Modus gespiegelt werden. Wenn Sie nicht über ein Symbol wollen immer gespiegelt werden, müssen Sie explizit festlegen es forceLeftToRight werden. Apple nennt einige Ausnahmen aus, die, wie die Medienwiedergabe (Schneller Vorlauf, Rücklauf, etc.) werden nicht gespiegelt, Musiknoten, Bilder im Laufe der Zeit angibt, usw.
Für weitergehende Dokumentation, wie RTL auf iOS und Mac OS zu implementieren, benutzen Sie bitte Apples RTL-Dokumentation.
Semantischen Inhalt in iOS 9. hinzugefügt wurde Wenn Sie frühere Versionen von iOS, das Material Internationalisierung Rahmen unterstützt werden portiert einen Teil der Funktionalität auf iOS 8.
RTL-Icons im Web
Standardmäßig im Web, sind Symbole nicht gespiegelt, wenn die Layoutrichtung gespiegelt wird. Sie müssen speziell auf die entsprechenden Symbole spiegeln, wenn nötig.
Das folgende Beispiel zeigt, wie eine einfache RTL CSS-Regel zu implementieren. Sie können es sehen können auch auf codepen.
Generieren Sie Ihre eigenen RTL-Icons mit ImageMagick
Wenn die Spiegelung der Symbole im Code keine Option ist, dass Sie ImageMagick verwenden können, um horizontal spiegelt das Bild.
Welche Symbole sollten für RTL gespiegelt werden?
Hier ist eine Liste von Symbolen, die programmatisch RTL gespiegelt werden können: