Matériel icônes Guide - Google Conception
Une vue d'ensemble des icônes où le matériel pour les obtenir et comment les intégrer à vos projets.
icônes du système de conception des matériaux sont simples, moderne, accueillant, et parfois bizarre. Chaque icône est créée en utilisant nos lignes directrices de conception pour représenter des formes simples et minimales les concepts universels utilisés couramment dans toute une interface utilisateur. Assurer la lisibilité et la clarté à la fois grandes et petites tailles, ces icônes ont été optimisés pour une belle exposition sur toutes les plates-formes communes et résolutions d'affichage.
Voir l'ensemble des icônes du design matériel dans la bibliothèque Icônes des matériaux.
Les icônes sont disponibles en plusieurs formats et conviennent à différents types de projets et plates-formes, pour les développeurs dans leurs applications, et pour les concepteurs dans leurs maquettes ou prototypes.
Nous avons fait ces icônes disponibles pour vous de les intégrer dans vos produits sous la licence Apache version 2.0. Ne hésitez pas à remixer et re-partage ces icônes et la documentation dans vos produits. Nous aimerions attribution dans votre application est à peu près l'écran, mais il est pas nécessaire. La seule chose que nous demandons est que vous ne revendez les icônes elles-mêmes.
La navigation et le téléchargement des icônes individuelles
L'ensemble complet d'icônes matériels sont disponibles sur la bibliothèque d'icônes de matériel. Les icônes sont disponibles pour téléchargement en SVG ou PNG, des formats adaptés pour le Web, Android, et les projets iOS ou à inclure dans les outils de conception.
téléchargement tout
dépôt Git
Les icônes matérielles sont disponibles à partir du dépôt git qui contient l'ensemble complet d'icônes, y compris tous les formats que nous mettons à votre disposition.
Installation des icônes de charmille
Installez les icônes en utilisant le gestionnaire de paquets Bower.
Installation des icônes de NPM
Installez les icônes en utilisant le gestionnaire de paquets de NPM.
La police icône du matériel est la meilleure façon d'intégrer les icônes de matériel avec des projets web. Nous avons emballé toutes les icônes matérielles en une seule police qui profite des capacités de rendu des navigateurs modernes typographiques afin que les développeurs Web peuvent facilement intégrer ces icônes avec seulement quelques lignes de code.
Utilisation de la police est non seulement la méthode la plus pratique, mais il est efficace et ressemble beaucoup:
- 900+ icônes tous d'un seul petit fichier.
- Servi de serveurs Google Web de police ou peut être'autonome.
- Pris en charge par tous les navigateurs web modernes.
- Couleur, taille et positionné entièrement avec CSS.
- vectoriel: Regarde grand à toute échelle, affiche la rétine, des écrans d'affichage à faible dpi.
La police icône pèse seulement 42KB dans son plus petit format woff2 et 56Ko au format standard woff. Par comparaison, les fichiers SVG compressés avec gzip seront généralement autour de 62Ko taille, mais cela peut être considérablement réduite en compilant uniquement les icônes dont vous avez besoin dans un seul fichier SVG avec sprites symbole.
Méthode d'installation 1. À l'aide via Google Web Fonts
La meilleure façon de mettre en place des polices d'icône pour une utilisation dans une page Web est via Google Web Fonts. Tout ce que vous devez faire est de comprendre une seule ligne de code HTML:
Méthode d'installation 2. auto hébergement
En utilisant les icônes au format HTML
Il est facile d'intégrer des icônes dans votre page Web. Voici un petit exemple:
Cet exemple utilise une fonctionnalité appelée ligatures typographic. ce qui permet le rendu d'une icône glyphe simplement en utilisant son nom textuel. Le remplacement se fait automatiquement par le navigateur Web et fournit le code plus lisible que la référence de caractère numérique équivalent.
Cette fonction est prise en charge dans la plupart des navigateurs modernes sur les ordinateurs de bureau et les appareils mobiles.
ligatures soutien Version
Utilisation de la police d'icônes permet un style facile d'une icône dans toutes les couleurs. Conformément aux directives de l'icône de conception matériel. pour les icônes actives, nous vous recommandons d'utiliser soit noir à 54% d'opacité ou blanc à 100% d'opacité lors de l'affichage de ces arrière-plans sur claires ou foncées, respectivement. Si une icône est désactivée ou inactive, en utilisant le noir à 26% ou blanc à 30% pour les fonds clairs et foncés, respectivement.
Voici quelques exemples, en utilisant les styles CSS matériaux décrits ci-dessus:
Exemple pour dessiner une icône sur un fond clair avec une couleur de premier plan sombre:
visage
visage
Exemple pour dessiner une icône sur un fond sombre avec une couleur de premier plan lumière:
icônes matérielles sont également disponibles sous forme d'images régulières, à la fois dans des formats PNG et SVG.
Les icônes matérielles sont fournies à titre SVGs qui conviennent pour des projets web. icônes individuelles sont téléchargeables à partir de la bibliothèque d'icônes de matériel. Les SVGs sont également disponibles à partir du référentiel des icônes de conception git matériel sous le chemin:
Par exemple, les icônes des cartes sont des cartes / svg / production:
PNG est la façon la plus traditionnelle pour afficher les icônes sur le web. Nos téléchargements de la bibliothèque d'icônes matériel fournissent à la fois des densités simples et doubles pour chaque icône. Ils sont appelés 1x_web et 2x_web respectivement dans le téléchargement. Les icônes sont également disponibles dans le dépôt git sous:
PNGs adapté pour Android sont disponibles à la bibliothèque d'icônes de matériel. Ceux-ci viennent dans toutes les densités d'écran prises en charge, ils devraient bien paraître sur tout appareil.
Les icônes sont également disponibles dans le référentiel des icônes de conception git matériel dans la même combinaison de couleurs et de tailles nommées comme suit:
L'invention concerne un VectorDrawable densité indépendante qui est supportée à partir de Sucette applications et versions ultérieures:
Le vecteur Drawable est actuellement disponible sous forme d'icône noir 24dp. Ceci est pour la compatibilité avec la taille de notre icône la plus standard. Pour rendre l'icône dans une couleur différente, utilisez teinter drawable disponible sur Android Lollipop.
icônes matérielles fonctionnent aussi bien dans les applications iOS. Dans les deux la bibliothèque d'icônes de matériel et dépôt git. ces icônes sont emballés dans Xcode imagesets qui travailleront facilement avec Xcode Catalogues d'actifs (xcassets). Ces imagesets peuvent être ajoutés à tous les catalogues Asset Xcode en les faisant glisser dans Xcode sur le catalogue d'actifs ou en copiant le dossier dans le dossier xcasset.
Le imageset contient les images de densité simple, double et triple (1x, 2x, 3x) de sorte qu'elles fonctionnent sur toutes les densités d'écran iOS connues. Les deux icônes en noir et blanc sont fournis, mais nous vous recommandons d'utiliser la imageWithRenderingMode de UIImage avec UIImageRenderingModeAlwaysTemplate qui permettra à l'image à utiliser comme un masque alpha qui peut être teinté à toute couleur possible.
Langues telles que l'arabe et l'hébreu se lisent de droite à gauche (RTL). Pour les langues RTL, UIs devrait être mis en miroir pour afficher la plupart des éléments de RTL. Lorsqu'une interface utilisateur est mis en miroir pour RTL, devrait également se refléter certaines des icônes. Lorsque le texte, mise en page, et l'iconographie sont en miroir pour soutenir le droit à gauche UIs, tout ce qui concerne le temps devrait être dépeints comme mouvement de droite à gauche. Par exemple, des points en avant vers la gauche, et en arrière des points à droite. Cependant, soyez conscient que le contexte dans lequel l'icône est placée influence également si une icône doit être mis en miroir ou non.
icônes RTL sur Android
Cet article de développeur Android décrit en profondeur la façon de mettre en œuvre des interfaces utilisateur RTL. Par défaut sur Android, les icônes ne sont pas en miroir lorsque la direction de la mise en page est en miroir. Vous devez refléter spécifiquement les icônes appropriées en cas de besoin, soit en fournissant des actifs spécialisés pour les langues RTL, ou en utilisant la fonctionnalité de cadre pour refléter les actifs.
Fournir des actifs spécialisés pour les langues RTL, vous pouvez utiliser le qualificatif de ldrtl sur les répertoires de ressources, tels que res / drawable-ldrtl /. Ressources à l'intérieur de ces répertoires ne seront utilisées que pour les langues RTL. Pour les appareils fonctionnant sous Android API 19 ou plus récent, le cadre fournit également l'attribut autoMirrored pour dessinables. Lorsque cet attribut est défini sur true, le drawable sera automatiquement en miroir sur les langues RTL.
Si vous utilisez autoMirrored ou fournir des ressources Drawable alternatives ne sont pas une option, l'attribut ImageView scaleX peut également être utilisé pour refléter dessinables (par exemple, en fournissant une mise en page spécifique à RTL dans une résolution répertoire / layout-ldrtl).
Mise en miroir dans le fichier de mise en page:
Enfin, dessinables peuvent être inversés par programme.
Vérification manuelle des sens de la mise en page à l'aide getLayoutDirection:
ImageView contenu miroir programme:
icônes RTL sur iOS
iOS a le concept d'un UISemanticContentAttribute qui est attaché à chaque vue. Cela peut être non précisée. forceLeftToRight. forceRightToLeft. la lecture ou l'espace. iOS utilise cette valeur et de la (de gauche à droite (LTR) / RTL réglage du dispositif de présentation de l'interface afin de déterminer la effectiveLayoutDirection de la vue. Cette effectiveLayoutDirection détermine si oui ou non pour mettre en miroir une image lorsqu'elle est affichée.
Par défaut, le contenu sémantique des images est réglée sur Non spécifié. Cela les amène à se refléter en mode RTL. Si vous ne voulez pas une icône à jamais en miroir, vous devez définir explicitement à forceLeftToRight. Apple appelle quelques exceptions qui ne devrait pas être mis en miroir, comme la lecture multimédia (Avance rapide, retour rapide, etc.), des notes de musique, des images indiquant le passage du temps, etc.
Pour plus d'une documentation approfondie sur la façon de mettre en œuvre RTL sur iOS et Mac OS, s'il vous plaît consultez la documentation d'Apple RTL.
contenu sémantique a été ajouté dans iOS 9. Si vous soutenez les versions antérieures d'iOS, le cadre de l'internationalisation matériel rétroporte certaines des fonctionnalités iOS 8.
icônes RTL sur le web
Par défaut sur le Web, les icônes ne sont pas en miroir lorsque la direction de la mise en page est en miroir. Vous devez refléter spécifiquement les icônes appropriées en cas de besoin.
L'exemple ci-dessous montre comment implémenter une règle simple RTL CSS. Vous pouvez également consulter sur codepen.
Générer vos propres icônes RTL en utilisant ImageMagick
Si la mise en miroir des icônes dans le code n'est pas une option que vous pouvez utiliser ImageMagick pour refléter l'image horizontalement.
Quelles icônes doivent être copiées en miroir pour RTL?
Voici une liste d'icônes qui peuvent être à RTL programmation en miroir: