Przewodnik po symbolach Material Design

Czym są symbole materialne?

Symbole Materialy to nasze najnowsze ikony, które łączą ponad 2500 glifów w jednym pliku czcionek z szeroką gamą wariantów graficznych. Symbole są dostępne w trzech stylach i czterech regulowanych osiach czcionki (wypełnienie, grubość, stopień i rozmiar optyczny). Zobacz pełny zestaw symboli materialnych w bibliotece symboli Material Design.

FILL

Wypełnienie umożliwia zmianę domyślnego stylu ikony. Pojedyncza ikona może renderować zarówno stan niewypełniony, jak i z wypełnionym.

Aby przedstawić przejście stanu, użyj osi wypełnienia na potrzeby animacji lub interakcji. Wartości to 0 w przypadku wartości domyślnych lub 1 przy pełnym wypełnieniu. Wraz z osią wagi wpływa też na wygląd ikony.

wght

Waga określa wagę pociągnięcia symbolu w zakresie wagi od cienkiego (100) do pogrubionego (700). Waga może też wpływać na ogólny rozmiar symbolu.

GRAD

Wizualizacja osi ocen

Na grubość symbolu wpływa waga i stopień. Dostosowania oceny są bardziej szczegółowe niż zmiany wagi i mają niewielki wpływ na rozmiar symbolu.

Ocena jest też dostępna przy użyciu niektórych czcionek. Aby uzyskać harmonijny efekt wizualny, możesz dopasowywać poziomy tekstu i symboli. Jeśli np. czcionka tekstu ma wartość stopnia -25, symbole mogą dopasować ją do odpowiedniej wartości, np. -25.

Oceny możesz używać w różnych sytuacjach:

Małe wyróżnienie (np. –25): aby zredukować odblaski jasnego symbolu na ciemnym tle, użyj niskiej jakości.

Wysoki nacisk (np. 200 stopni): aby wyróżnić symbol, zwiększ ocenę pozytywną.

opsz

Rozmiary optyczne mieszczą się w zakresie od 20 dp do 48 dp.

Aby obraz wyglądał jednakowo w różnych rozmiarach, waga kreski (grubości) zmienia się wraz ze skalowaniem rozmiaru ikony. Rozmiar optyczny umożliwia automatyczne dostosowanie grubości kreski przy zwiększeniu lub zmniejszeniu rozmiaru symbolu.

Uzyskiwanie symboli materialnych

Symbole Material Design są dostępne w kilku formatach i pasują do różnych typów projektów i platform – zarówno dla programistów w aplikacjach, jak i dla projektantów w makietach lub prototypach.

Licencjonowanie

Symbole Material Design są dostępne na licencji Apache w wersji 2.0.

Przeglądanie i pobieranie poszczególnych ikon

Pełny zestaw symboli materialnych jest dostępny w bibliotece symboli Material Materials w formacie SVG lub PNG. Można z nich korzystać w przeglądarce, na urządzeniach z Androidem i iOS oraz z dowolnymi narzędziami projektowymi.

Repozytorium Git

Repozytorium Git zawiera pełny zestaw symboli Material Design w formacie SVG.

$ git clone https://github.com/google/material-design-icons

Używanie symboli materialnych

Użyj w przeglądarce

Użycie czcionki Material Symbols jest najprostszym sposobem na umieszczanie takich symboli w projektach internetowych.

Ikony są uporządkowane w jedną czcionce, dzięki czemu programiści mogą z łatwością umieścić je w swojej witrynie, dodając tylko kilka linijek kodu.

Czcionka statyczna z Google Fonts

Najłatwiejszym sposobem skonfigurowania czcionek ikon do użytku na dowolnej stronie internetowej jest skorzystanie z Google Fonts. Dołącz ten pojedynczy wiersz kodu HTML:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

Powyższy fragment kodu zawiera domyślną konfigurację dla każdej osi o wadze 400, rozmiarze optycznym w przypadku 48, ocenę na poziomie 0 i wypełnianiem (również o 0).

Różne wartości osi możesz konfigurować za pomocą interfejsu Fonts CSS API. Przyjrzyj się tym przykładom:

Zmienna czcionka za pomocą Google Fonts

Jeśli animujesz ikony za pomocą CSS lub chcesz uzyskać dokładniejszą kontrolę nad funkcjami ikon, użyj czcionki zmiennej Google Symbols. Używając zakresów w formacie number..number, możemy wczytać całą czcionkę zmiennej. Sprawdź obsługę czcionek zmiennych w kanale „Can I Use”, aby dowiedzieć się, czy użytkownicy będą mogli ładować zmienna czcionkę. Oto przykłady:

Albo nawet animować je!

Samodzielne hostowanie czcionki

Umieść czcionkę ikony w wybranej przez siebie lokalizacji, aby móc określić, kiedy chcesz zaktualizować zasób. Jeśli np. adres URL to https://example.com/material-symbols.woff, dodaj tę regułę CSS:

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

Aby poprawnie wyrenderować czcionkę, zadeklaruj reguły CSS dotyczące renderowania ikony. Te reguły są normalnie wyświetlane jako część arkusza stylów interfejsu Google Fonts API, ale trzeba je dodać ręcznie do projektów podczas samodzielnego hostowania:

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  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;
}

Używanie ikon w kodzie HTML

W powyższych przykładach korzystamy z funkcji typograficznej o nazwie ligatury, która umożliwia renderowanie glifu ikony za pomocą jego nazwy tekstowej. Przeglądarka automatycznie zastępuje ligaturę tekstową wektorem ikony i udostępnia bardziej czytelny kod niż odpowiadające mu odniesienie do znaków numerycznych. Na przykład w kodzie HTML ikona będzie miała postać arrow_forward, a nie &#xE5C8;. W przypadku innych ikon użyj nazwy wielkiej litery (zastępując spacje podkreśleniami).

Ta funkcja działa w większości nowoczesnych przeglądarek na komputerach i urządzeniach mobilnych. W sekcji Obsługa ligatur w usłudze Can I Use dowiesz się, czy Twoi użytkownicy będą mogli przetwarzać ligatury.

Jeśli musisz obsługiwać przeglądarki, które nie obsługują ligatur, określ ikony za pomocą liczbowych odwołań do znaków (punktów kodowych), jak w przykładzie poniżej:

Nazwy ikon i punkty kodowe znajdziesz w bibliotece symboli Material Material, klikając dowolną ikonę i otwierając panel czcionek ikon. Każda czcionka ikony ma w repozytorium Git Google Fonts indeks punktów kodu, który zawiera pełny zestaw nazw i kodów znaków.

Ikony stylu w Material Design

Ikony te zostały zaprojektowane zgodnie z wytycznymi Material Design, a wyglądają najlepiej w zalecanych rozmiarach i kolorach ikon. Poniższe style ułatwiają zastosowanie zalecanych rozmiarów, kolorów i stanów aktywności.

Używaj w Androidzie

W bibliotece symboli materiałowych wszystkie ikony są w formacie rysowalny wektorowy. Więcej informacji znajdziesz w dokumentacji Android Vector Asset Studio.

Używaj w iOS

Ikony są również dostępne w formacie symboli Apple. Aby dowiedzieć się więcej na ten temat, zapoznaj się z oficjalnym omówieniem symboli Apple Symbols i wskazówkami dotyczącymi korzystania.

Użyj we Flutterze

Planowana jest obsługa Flutter symboli Material Design. Wkrótce opublikujemy odpowiednie aktualizacje.