Czym są symbole w Material Design?
Symbole materiałowe to najnowsze ikony połączone w ponad 2,5 tys. glifów z jedną czcionką o szerokiej gamie wariantów. Symbole są dostępne w 3 stylach i 4 osiach czcionki (wypełnienie, grubość, stopień i rozmiar optyczny). Zobacz pełny zestaw symboli materiałowych w symbolach materiałowych Biblioteka.
Oś FILL
Wypełnienie umożliwia zmianę domyślnego stylu ikony. Pojedyncza ikona może Niewypełnione i wypełnione.
Aby przekazać przejście stanu, użyj osi wypełnienia dla animacji lub interakcji. Wartości wynoszą 0 – domyślne pole lub 1 – pełne wypełnienie. Oprócz osi wagowej wypełnienie ma również wpływ na wygląd ikony.
Oś wght
Waga określa grubość kreski symbolu, a zakres wagowy wynosi pomiędzy cienki (100) i pogrubiony (700). Waga może też wpływać na ogólny rozmiar symbolu.
Oś GRAD
Waga i stopień wpływają na grubość symbolu. Korekty oceny: bardziej szczegółowe niż dostosowywanie wagi i ma niewielki wpływ na wielkość symbolem.
Ocena jest też dostępna w niektórych czcionkach tekstowych. Możesz dopasować poziomy ocen do: tekst i symbole, aby uzyskać harmonijny efekt wizualny. Na przykład, jeśli czcionka tekstu ma wartość -25, symbole mogą dopasować ją do odpowiedniej wartości, na przykład -25.
Oceny możesz używać na różne sposoby:
Niski stopień podświetlenia (np. -25 stopni): aby zmniejszyć odblaski jasnego symbolu na ciemnym tle, użyj niskiego stopnia.
Duża wyróżnienie (np.200 stopni): aby wyróżnić symbol, zwiększ liczbę dodatnią. ocenę.
Oś opsz
Rozmiary optyczne: od 20 dp do 48 dp.
Aby obraz wyglądał tak samo w różnych rozmiarach, grubość obrysu zmienia się wraz ze skalowaniem rozmiaru ikony. Rozmiar optyczny umożliwia dostosuj grubość kreski po zwiększeniu lub zmniejszeniu rozmiaru symbolu.
Uzyskiwanie symboli materiałowych
Ikony Material Design są dostępne w różnych formatach i są odpowiednie do różnych typów projektów i platform, zarówno dla deweloperów w ich aplikacjach, jak i dla projektantów w przypadku makiety lub prototypów.
Licencjonowanie
Symbole Material są dostępne na podstawie licencji Apache w wersji 2.0.
przeglądać i pobierać poszczególne ikony.
Pełny zestaw symboli materiałowych jest dostępny w symbolach materiałowych Biblioteka w formacie SVG lub PNG. Można z nich korzystać w przeglądarkach internetowych, na urządzeniach z Androidem, iOS oraz i narzędzia projektowe.
Repozytorium Git
Interfejs git repozytorium zawiera pełny zestaw symboli materiałowych w formacie SVG.
$ git clone https://github.com/google/material-design-icons
Używanie symboli Material
Użyj w przeglądarce
Czcionka symboli materiałowych to najprostszy sposób na dodanie symboli materiałowych w projekty internetowe.
Ikony są układane w jedną czcionkę, co ułatwia programistom stron internetowych dodać te ikony za pomocą zaledwie kilku wierszy kodu.
Czcionka statyczna w Google Fonts
Najłatwiejszym sposobem skonfigurowania czcionek ikon na każdą stronę internetową jest skorzystanie z Google Czcionki. Dodaj 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żdego osi , z waga przy 400, optyczne rozmiar ma 48 lat, ocena przy 0 i wypełnij (również 0).
Użyj arkusza CSS Czcionki API do skonfigurować różne wartości osi. Zapoznaj się z tymi przykładami:
Zmienna czcionka Google Fonts
Jeśli animujesz ikony za pomocą CSS lub chcesz mieć dokładniejszą kontrolę nad funkcjami ikon, użyj funkcji
czcionki zmiennych symboli Google. Za pomocą zakresów w formacie number..number możemy wczytać całą czcionkę zmienną. Sprawdź strona Can I Use, na której znajdziesz informacje o wsparciu dla czcionek zmiennych, aby dowiedzieć się, czy Twoi użytkownicy będą mogli wczytać czcionki zmienne. Prawdopodobnie będą mogli to zrobić. Oto przykłady:
Możesz je nawet animować.
Zoptymalizuj czcionkę ikony
Podzbiór czcionki, aby zawierała tylko ikony odpowiednie dla Twojej aplikacji, za pomocą parametru zapytania
&icon_names. Użyj listy nazw ikon (ligatur) posortowanej alfabetycznie i oddzielonej przecinkami.Niezalecane – użycie domyślnych ustawień spowoduje załadowanie ponad 3800 ikon. Ładunek czcionki: 295 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+OutlinedZalecane – określanie nazw ikon aby wczytać tylko niezbędne ikony. Dane czcionki: 1,7 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=blockUtwórz instancje osi czcionek zmiennych, aby uwzględnić tylko te, których będzie używać aplikacja. Większość aplikacji potrzebuje tylko kilku odmian osi.
Niezalecane – brak konfiguracji osi powoduje załadowanie domyślnej czcionki statycznej (waga 400, rozmiar optyczny 24, zaokrąglenie 50, stopień 0, wypełnienie 0). Uwzględnianie wszystkich osi czcionek zmiennych w pełni zwykle nie jest konieczne i zwiększa rozmiar pliku. Dane czcionki: 7,9 MB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100Zalecane – używana jest określona kombinacja osi. Na przykład pełna oś „FILL” zapewnia przejścia CSS między stanami, a wartość „ROND” 100 to wybrany projekt. Ładunek czcionki: 2,6 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
Hostowanie czcionki samodzielnie
Przechowuj czcionkę w miejscu, które kontrolujesz, aby móc decydować, kiedy zaktualizować zasób. Jeśli na przykład 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 prawidłowo renderować czcionkę, zadeklaruj reguły CSS do renderowania ikony. Te reguły są zwykle dostarczane jako część arkusza stylów interfejsu Google Fonts API, ale w przypadku samodzielnego hostowania musisz je uwzględnić ręcznie w swoich projektach:
.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 podanych wyżej przykładach użyto funkcji typograficznej o nazwie
ligatury
, co umożliwia renderowanie glifu ikony na podstawie jego nazwy tekstowej. Przeglądarka internetowa automatycznie zastępuje ligaturę tekstową wektorem ikony i zapewnia czytelniejszy kod niż odpowiednia referencja znaku liczbowego. Na przykład w kodzie HTML ikona będzie reprezentowana przez arrow_forward, a nie . W przypadku innych ikon użyj etui w kształcie węża z nazwy ikony.
(np. zastąp spacje znakami podkreślenia).
Ta funkcja jest obsługiwana w większości nowoczesnych przeglądarek na komputerach i urządzeniach mobilnych. Zobacz Czy mogę korzystać z ligatur pomocy aby zobaczyć, czy użytkownicy mogą przetwarzać ligatury, tak.
Jeśli chcesz, aby ikony były obsługiwane w przeglądarkach, które nie obsługują ligatur, określ je za pomocą odwołań do znaków numerycznych (zwanych też punktami kodu), jak w tym przykładzie:
Nazwy i kody punktów ikony znajdziesz w bibliotece Symbols Material, wybierając dowolną ikonę i otwierając panel czcionki ikony. Każda czcionka ikon ma indeks kodów znaków w repozytorium git Google Fonts, który zawiera pełny zestaw nazw i kodów znaków.
Stylizacja ikon w Material Design
Ikony zaprojektowano zgodnie ze stylem Material Design wytycznych, i wyglądają najlepiej w zalecanych rozmiarach i kolorach. Style ułatwiają stosowanie zalecanych rozmiarów, kolorów i stanów aktywności.
Używaj na Androidzie
W bibliotece symboli materiałowych wszystkie ikony mają format rysowalny wektorowo. Więcej informacji znajdziesz w dokumentacji Android Vector Asset Studio.
Używanie na iOS
Ikony są również dostępne w formacie symboli Apple. Więcej informacji znajdziesz w oficjalnej prezentacji i wskazówkach dotyczących symboli Apple.
Używaj w Flutter
Planujemy dodanie obsługi symboli Material Design w Flutterze. Odpowiednie aktualizacje zostaną wkrótce opublikowane.