Omówienie ikon materiałów – skąd je pobrać i jak zintegrować je z projektami.
Czym są ikony materiałów?
Ikony systemu Material Design są proste, nowoczesne, przyjazne, a czasem nieco osobliwe. Każda ikona została utworzona zgodnie z naszymi wskazówkami dotyczącymi projektowania, by w prosty sposób przedstawić uniwersalne pojęcia powszechnie używane w całym interfejsie. Aby zapewnić czytelność i wyraźność zarówno w dużych, jak i małych rozmiarach, ikony te zostały zoptymalizowane pod kątem pięknego wyglądu na wszystkich popularnych platformach i w rozdzielczościach wyświetlacza.
Pełen zestaw ikon Material Design znajdziesz w bibliotece ikon Material Design.
Pobieranie ikon
Ikony są dostępne w kilku formatach i pasują do różnych typów projektów i platform, dla programistów w aplikacjach i dla projektantów w swoich modelach lub prototypach.
Licencjonowanie
Udostępniliśmy te ikony w ramach licencji Apache w wersji 2.0, aby umożliwić Ci umieszczenie ich w swoich usługach. Możesz remiksować i udostępniać te ikony oraz dokumentację w swoich usługach. Atrybucja na ekranie about jest bardzo przydatna, ale nie jest wymagana.
Przeglądanie i pobieranie poszczególnych ikon
Pełny zestaw ikon materiałów jest dostępny w bibliotece ikon materiałów. Ikony można pobrać w formacie SVG lub PNG, tak aby można je było wykorzystać w projektach internetowych, na Androida i iOS, a także do dowolnych narzędzi projektowych.
Pobieram wszystko
Pobierz najnowsze stabilne archiwum ZIP (około 310 MB) ze wszystkimi ikonami lub najnowszą wersję z serwera głównego.
Repozytorium Git
Ikony materiałów znajdziesz w repozytorium git, które zawiera pełny zestaw ikon, w tym wszystkie udostępniane przez nas formaty.
$ git clone https://github.com/google/material-design-icons/
Czcionka ikony na potrzeby internetu
Czcionka ikony materiału to najprostszy sposób na dołączenie ikon materiałów do projektów internetowych. Wszystkie ikony materiałów spakowaliśmy do postaci pojedynczej czcionki, która korzysta z możliwości renderowania typograficznego nowoczesnych przeglądarek, dzięki czemu programiści mogą z łatwością umieścić te ikony za pomocą zaledwie kilku wierszy kodu.
Korzystanie z czcionki to nie tylko najwygodniejsza metoda, ale też wydajna i świetnie wygląda:
- Ponad 900 ikon w jednym, małym pliku.
- Pobrane z serwerów Google Web Font lub mogą być hostowane samodzielnie.
- Obsługiwana przez wszystkie nowoczesne przeglądarki.
- Kolorowe, dobrane pod względem rozmiaru i całkowicie pozycjonowane za pomocą CSS.
- Oparte na wektorach: aplikacja wygląda świetnie w dowolnej skali, ma wyświetlacz Retina i ekran o niskiej rozdzielczości.
Czcionka ikony to zaledwie 42 KB w najmniejszym formacie woff2 i 56 KB w standardowym formacie Woff2. Dla porównania pliki SVG skompresowane za pomocą narzędzia gzip mają zwykle około 62 KB, ale można to znacznie zmniejszyć, skompilowając tylko niezbędne ikony w jeden plik SVG ze sprite’ami.
Metoda konfiguracji 1. Korzystanie za pomocą Google Fonts
Najłatwiejszym sposobem skonfigurowania czcionek ikon do użytku na dowolnej stronie internetowej jest skorzystanie z Google Fonts. Wystarczy, że dodasz jeden wiersz kodu HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Podobnie jak w przypadku innych czcionek Google Web Fonts, do aktywowania czcionki „Material Icons” w przeglądarce zostanie wyświetlony prawidłowy kod CSS.
Zostanie zadeklarowana dodatkowa klasa CSS o nazwie .material-icons.
Każdy element korzystający z tej klasy będzie miał prawidłowy kod CSS do renderowania tych ikon z czcionki internetowej.
Metoda konfiguracji 2. Hostowanie własne
Jeśli chcesz samodzielnie hostować czcionkę internetową, musisz przeprowadzić dodatkową konfigurację.
Umieść czcionkę ikony w lokalizacji, na przykład https://example.com/material-icons.woff, i dodaj tę regułę CSS:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
Dodatkowo musisz zadeklarować reguły CSS dotyczące renderowania ikony, aby prawidłowo renderować czcionkę. Te reguły są normalnie udostępniane jako część arkusza stylów czcionki internetowej Google, ale trzeba je ręcznie uwzględnić w projektach podczas samodzielnego hostowania czcionki:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Używanie ikon w kodzie HTML
Umieszczanie ikon na stronie internetowej jest łatwe. Oto mały przykład:
twarz
<span class="material-icons">face</span>
W tym przykładzie użyto funkcji typograficznej o nazwie ligatury, która umożliwia renderowanie glifu ikony przez samą nazwę tekstową. Zastępowanie jest wykonywane automatycznie przez przeglądarkę internetową i zapewnia bardziej czytelny kod niż odpowiedniki w postaci znaków numerycznych.
Ta funkcja jest obsługiwana w większości nowoczesnych przeglądarek na komputerach i urządzeniach mobilnych.
| Przeglądarka | Wersja obsługująca ligatury |
|---|---|
| Google Chrome; | 11 |
| Mozilla Firefox | 3.5 |
| Apple Safari | 5 |
| Microsoft IE, | 10 |
| Microsoft Edge | 18 |
| Opera | 15 |
| Apple MobileSafari | iOS 4.2 |
| Przeglądarka do systemu Android | 3.0 |
W przypadku przeglądarek, które nie obsługują ligatur, użyj zapisu ikon za pomocą odwołań do znaków numerycznych, jak w przykładzie poniżej:
<span class="material-icons"></span>Nazwy ikon i punkty kodowe znajdziesz w bibliotece ikon materiałów, wybierając dowolną ikonę i otwierając panel czcionki ikon. Każda czcionka ikony ma indeks punktów kodu w naszym repozytorium git, który zawiera pełny zestaw nazw i kodów znaków (tutaj).
Ikony stylu w Material Design
Ikony te zostały zaprojektowane zgodnie z wytycznymi dotyczącymi interfejsu Material Design, a wyglądają najlepiej w zalecanych rozmiarach i kolorach ikon. Poniższe style ułatwiają stosowanie zalecanych rozmiarów, kolorów i stanów aktywności.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Rozmiary
Chociaż ikony w czcionce można dostosować do dowolnego rozmiaru, zgodnie z wytycznymi dotyczącymi ikon stylu Material Design zalecamy wyświetlanie ich w rozmiarze 18, 24, 36 lub 48 pikseli. Wartość domyślna to 24 piksele.
Reguły CSS zgodne ze standardowymi wytycznymi dotyczącymi rozmiarów Material Design:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
Ikony materiałów najlepiej wyglądają przy 24 pikselach, ale jeśli ikonę chcesz wyświetlić w innym rozmiarze, warto zastosować się do powyższych reguł CSS:
<span class="material-icons md-18">face</span><span class="material-icons md-24">face</span><span class="material-icons md-36">face</span><span class="material-icons md-48">face</span>Kolorowanki
Użycie czcionki ikony pozwala łatwo zmienić styl ikony w dowolnym kolorze. Zgodnie z wytycznymi dotyczącymi ikon w stylu Material Design w przypadku aktywnych ikon zalecamy użycie czerni o przezroczystości 54% lub białej ze 100% nieprzezroczystością do wyświetlania ich na jasnym i ciemnym tle. Jeśli ikona jest wyłączona lub nieaktywna, użyj czerni o poziomie 26% lub białego przy 30% dla jasnego i ciemnego tła.
Oto kilka przykładów wykorzystania opisanych powyżej stylów CSS Material Design:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Przykład rysowania ikony na jasnym tle i ciemnym kolorze pierwszego planu:
<span class="material-icons md-dark">face</span><span class="material-icons md-dark md-inactive">face</span>Przykład rysowania ikony na ciemnym tle i jasnym kolorze pierwszego planu:
<span class="material-icons md-light">face</span><span class="material-icons md-light md-inactive">face</span>Aby ustawić niestandardowy kolor ikony, zdefiniuj regułę CSS określającą odpowiedni kolor czcionki:
.material-icons.orange600 { color: #FB8C00; }
a potem używaj tej klasy do odwoływania się do ikony:
<span class="material-icons orange600">face</span>Obrazy ikon do użytku w internecie
Ikony materiałów są też dostępne jako zwykłe obrazy w formatach PNG i SVG.
SVG
Ikony materiałów są dostępne w postaci plików SVG, które są odpowiednie w przypadku projektów internetowych. Poszczególne ikony można pobrać z biblioteki ikon materiałów. Pliki SVG są też dostępne w ikonach Material Design git repozytorium pod ścieżką:
material-design-icons/src/
Na przykład ikony map są podane w parametrze src/maps:
material-design-icons/src/maps/
Jeśli na stronie internetowej jest używanych wiele ikon, zalecamy utworzenie arkuszy sprite na podstawie obrazów. Więcej informacji znajdziesz w dokumentacji w katalogu sprites repozytorium git.
PNG
PNG to najbardziej tradycyjny sposób wyświetlania ikon w internecie. Pliki do pobrania z biblioteki ikon materiałów zawierają pojedynczą i podwójną gęstość dla każdej ikony. W pobranym pliku są one oznaczone odpowiednio jako 1x i 2x. Ikony są też dostępne w repozytorium git w sekcji:
material-design-icons/png/
Jeśli na stronie internetowej jest używanych wiele ikon, zalecamy utworzenie arkuszy sprite na podstawie obrazów. Więcej informacji znajdziesz w rekomendacjach w katalogu sprites w repozytorium git.
Ikony na Androidzie
Pliki PNG odpowiednie dla Androida są dostępne w bibliotece ikon materiałów. Są one dostępne we wszystkich obsługiwanych gęstościach ekranu, więc powinny wyglądać dobrze na każdym urządzeniu.
Ikony są również dostępne w ikonach projektu Material Design git repozytorium. Znajdziesz je w tej samej kombinacji kolorów i rozmiarów, o takich samych nazwach:
Element rysunkowy wektorowy jest obecnie dostępny tylko jako czarna ikona o wymiarach 24 dp. Ma to na celu zapewnienie zgodności z naszym najbardziej standardowym rozmiarem ikon. Aby wyświetlić ikonę w innym kolorze, użyj koloru rysunkowego dostępnego w Androidzie Lollipop.
Podczas korzystania z elementu rysowalnego wektorowego nie trzeba dodawać pliku PNG o gęstości xxxhdpi, ponieważ urządzenie obsługujące taką gęstość ekranu nie obsługuje obiektów rysowalnych wektorowych.
Ikony na iOS
Ikony Material Design dobrze sprawdzają się również w aplikacjach na iOS. Zarówno w bibliotece ikon materiałów, jak i w repozytorium git, ikony te są spakowane do zbiorów obrazów Xcode, które łatwo współpracują z katalogami zasobów Xcode (xcassets). Te zbiory obrazów można dodawać do dowolnych katalogów zasobów Xcode, przeciągając je do katalogu zasobów Xcode lub kopiując folder do folderu xcasset.
Zbiór obrazów zawiera obrazy pojedynczej, podwójnej i potrójnej (1x, 2x i 3x), dzięki czemu działają na wszystkich ekranach urządzeń o znanej gęstości ekranu dla iOS. Dostępne są zarówno czarno-białe ikony, ale zalecamy użycie funkcji UIImage's imageWithRenderingMode z ustawieniem UIImageRenderingModeAlwaysTemplate, który umożliwi użycie obrazu jako maski alfa z zabarwieniem na dowolny kolor.
Przykład dotyczący języka Objective-C:
UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
[[UIImage imageNamed:@"ic_close"]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
Przykład Swift:
let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)
Ikony w zapisie od prawej do lewej
Języki w językach takich jak arabski i hebrajski są odczytywane od prawej do lewej (RTL). W przypadku języków z alfabetem RTL interfejsy użytkownika powinny być powielane tak, aby większość elementów była wyświetlana w formacie od prawej do lewej. W przypadku wersji odbicia lustrzanego interfejsu w przypadku RTL niektóre ikony również powinny być odbicie lustrzane. Gdy tekst, układ i ikony są wyświetlane w interfejsach pisanych od prawej do lewej, wszystkie elementy związane z czasem powinny być przedstawione jako ruchy od prawej do lewej. (do przodu na przykład w lewo, a do tyłu w prawo). Należy jednak pamiętać, że kontekst, w którym umieszczona jest ikona, wpływa również na to, czy ikona powinna być odbiciem lustrzanym.
Ikony powinny mieć odbicie lustrzane tylko wtedy, gdy ich kierunek jest taki sam jak w przypadku innych elementów interfejsu w trybie od prawej do lewej. Jeśli ikona reprezentuje elementy wizualne w witrynie, które różnią się od siebie w formacie RTL, powinna ona też mieć odbicie lustrzane. Jeśli np. liczby na liście numerowanej znajdują się po prawej stronie w języku RTL, to wartości powinny znajdować się po prawej stronie ikony lustrzanej.
Ikony RTL na Androidzie
Ten artykuł dla programistów aplikacji na Androida zawiera szczegółowe informacje o implementowaniu interfejsów użytkownika RTL. Domyślnie na urządzeniach z Androidem ikony nie są odzwierciedlane w odbiciu lustrzanym kierunku układu. W razie potrzeby musisz odzwierciedlić odpowiednie ikony, udostępniając specjalistyczne zasoby dla języków pisanych od prawej do lewej lub korzystając z platformy, która odzwierciedla zasoby.
Aby udostępnić wyspecjalizowane zasoby w językach RTL, możesz używać kwalifikatora ldrtl w katalogach zasobów, np. res/drawable-ldrtl/. Zasoby w takich katalogach będą używane tylko w językach RTL. W przypadku urządzeń z Androidem API w wersji 19 lub nowszej platforma udostępnia też atrybut autoMirrored dla elementów Drawable. Gdy ten atrybut ma wartość Prawda, elementy rysowane są automatycznie odzwierciedlane w językach RTL.
Korzystanie z automatycznego tworzenia odbicia lustrzanego:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
android:tint="?attr/colorControlNormal"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
Jeśli korzystanie z funkcji autolustrzanego lub udostępnianie alternatywnych zasobów rysowalnych nie jest możliwe, możesz użyć atrybutu skalX ImageView w formacie lustrzanym (na przykład przez zapewnienie odpowiedniego układu RTL w katalogu res/layout-ldrtl).
Powielanie w pliku układu:
<ImageView
android:id="@+id/my_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleX="-1" />
Elementy rysowalne można też powielać automatycznie.
Ręczne sprawdzanie kierunku układu za pomocą metody getLayoutDirection:
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
}
Automatyczne tworzenie odbicia lustrzanego elementu ImageView:
imageView.setScaleX(-1);
Ikony RTL w systemie iOS
W przypadku iOS istnieje pojęcie atrybutu UISemanticContentAttribute, który jest dołączany do każdego widoku. Możliwe wartości to unspecified, forceLeftToRight, forceRightToLeft, playback lub spatial. iOS używa tej wartości oraz ustawienia (od lewej do prawej (LTR)/RTL) urządzenia, na którym wyświetlany jest interfejs, do określenia efektywnego układu widoku. Ta wartość atrybutu EffectiveLayoutDirection określa, czy podczas wyświetlania obrazu ma być odbicie lustrzane.
Domyślnie treść semantyczna obrazów jest ustawiona na unspecified. Powoduje to, że mają one odbicie lustrzane w trybie RTL. Jeśli nie chcesz, aby ikona miała odbicie lustrzane, musisz wyraźnie ustawić dla niej wartość forceLeftToRight. Apple wyróżnia pewne wyjątki, których nie należy naśladować, na przykład odtwarzanie multimediów (przewijanie do przodu, do tyłu itp.), nuty, obrazy wskazujące upływ czasu itp.
Przykład dotyczący języka Objective-C:
// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
UISemanticContentAttributeForceLeftToRight;
Przykład Swift:
// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;
Szczegółową dokumentację na temat wdrażania RTL w systemie iOS i macOS znajdziesz w dokumentacji RTL przygotowanej przez Apple.
Treści semantyczne zostały dodane w iOS 9. Jeśli obsługujesz wcześniejsze wersje iOS, platforma internacjonalizacji materiałów przenosi niektóre funkcje do iOS 8.
Ikony RTL w internecie
Podstawowe informacje na temat RTL znajdziesz w tym artykule: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2.
Domyślnie w przeglądarce ikony nie są odzwierciedlane w odbiciu lustrzanym. W razie potrzeby musisz utworzyć odbicie lustrzane odpowiednich ikon.
Przykład poniżej pokazuje, jak wdrożyć prostą regułę CSS od prawej do lewej. Możesz też wyświetlić go na Codepen.
page.html
<html dir="rtl">
<img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>
page.css
html[dir="rtl"] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Generuj własne ikony RTL za pomocą ImageMagick
Jeśli odbicie lustrzane ikon w kodzie nie jest możliwe, możesz użyć ImageMagick, by utworzyć odbicie lustrzane w poziomie.
convert -flop my_icon.png my_icon_rtl.png
Które ikony powinny mieć odbicie lustrzane?
Oto lista ikon, które można automatycznie zduplikować do postaci RTL:
| strzałka wstecz | Strzałka wstecz () na iOS | strzałka w prawo |
| Strzałka w górę () na urządzeniach z iOS | strzałka w lewo | strzałka w prawo |
| przypisanie | Zwrot projektu | Backspace |
| Nieznany poziom naładowania baterii: | nawiązano połączenie | Scalanie połączeń: |
| nieodebrane połączenie | nieodebrane połączenie wychodzące | Odebrano połączenie |
| Podział połączenia: | Pozostał szewron: | szewron w prawo |
| Tryb czytnika w Chrome na platformie | nieznane urządzenie | DVR |
| notatka do wydarzenia | polecana lista odtwarzania | polecany film |
| – pierwsza strona | Lądowisko | – start |
| Zmniejszenie wcięcia formatu: | Zwiększenie wcięcia formatu | Lista w formacie jest punktowana |
| dalej | funkcje | – dane wejściowe |
| karta klawiatury | etykieta | etykieta jest ważna |
| Konspekt etykiety | ostatnia strona | Uruchomienie |
| lista | Pomoc na żywo: | udostępnienie ekranu na urządzeniu mobilnym |
| Wykres wieloliniowy | nawiguj przed | przejdź dalej |
| w przyszłym tygodniu | notatka | – otwórz w nowym |
| Dodanie do playlisty | Kolejka muzyki z | Ponów: |
| odpowiedź | odpowiedź wszystkim | udostępnienie ekranu |
| wysłanie | krótki tekst | pokaż wykres |
| Sortowanie: | Połowa gwiazdek: | temat |
| bez zmian | spisu | – spadek |
| zyskuje popularność | cofnij | – wyświetl listę |
| Kołdra z widokiem | zawijanie tekstu |