Material Design – Projektowanie Interfejsów dla Android i nie tylko…

Witajcie –

W związku z premierą Kompendium Material Design oraz Android na eduweb.pl, w skład którego wchodzą na razie dwa kompletne Kursy:

• Material Design – Projektowanie Interfejsów UI/UX
• Tworzenie Aplikacji Android – Techniki Pracy

Przygotowałem dla Was poradnik, będący wprowadzeniem do tworzenia GUI i projektowania grafiki zgodnej z założeniami Material Design. Poniższe zestawienie może stanowić dobre, hasłowe wprowadzenie dla osób, które rozpoczynają swoją przygodę z Material Design i Androidem, jak również przydatnym dodatkiem dla tych z Was, którzy zdecydują się na zakup Kompendium na eduweb.pl

Czym jest Material Design?

Material Design to język projektowania od Google, który jest intensywnie wykorzystywany w projektach interfejsów aplikacji systemu Android, jednak stopniowo ewoluuje i adaptowany jest na potrzeby rozwiązań aplikacji natywnych czy webowych. Material to dojrzały, uporządkowany system projektowania, który na pierwszym miejscu stawia użyteczność oraz czytelność, dzięki czemu doskonale nadaje się do przeznaczeń na ekrany, jak również jest świetnym punktem odniesienia dla osób, które stawiają swoje pierwsze kroki w projektowaniu UI/UX.

Jak wspomniałem, Material Design jest standardem projektowania dla Androida, ale szereg bibliotek i rozwiązań programistycznych takich jak Material Design Lite czy Polymer pozwala także na stosowanie jego zasad z łatwością do interfejsów  webowych. Najważniejsze miejsca, gdzie znajdziesz informacje o Material Design to serwisy Google:

http://design.google.com oraz
https://www.google.com/design/spec/material-design/introduction.html

Dokumentacja Material Design jest stale uaktualniana i zawiera mnóstwo sekcji omawiających podstawowe koncepcje i zastosowania takich jak:

• Kolorystyka i Typografia
• Ruch i Animacja
• Wzorce projektowania
• Tworzenie responsywnych interfejsów
• I wiele więcej…

Fundament Material Design (MD) opiera się na solidnych podstawach wypracowanych przez lata przez designerów oraz UI/UX designerów i zawiera zbiór pożytecznych praktyk, które możesz zastosować we wszystkich Twoich projektach. Podstawowe konwencje MD stawiają nacisk na:

Materiał jako metaforę – Material Design nawiązuje do przestrzeni będąc metaforą kartki oraz tuszu. Mają tu zastosowania z realnego świata jak światło czy przestrzeń, uzupełnione unikalnymi dla form cyfrowych właściwościami powierzchni.

Znaczenie – Inspiracją Material Design jest projektowanie do druku co znajduje odbicie w dokładnie skonstruowanym schemacie siatki, dużym znaczeniu typografii i koloru.

Ruch i Animacja – Statyczną formę projektowania do druku Material Design uzupełnia o fenomen mediów cyfrowych wprowadzając ruch częściowo oparty na prawach fizyki realizując schematy użyteczności na równi z estetyką.

Jedną z ważnych metafor w MD jest pojęcie materiału, który posiada swoją określoną pozycję w przestrzeni, na osi Z a więc jest bliżej lub dalej od użytkownika. Metaforę tą odzwierciedla tzw. wartość Elevation, która symuluje położenie wyżej / niżej w przestrzeni przez odpowiednio dobrany atrybut cienia. Poziomy Elevation w MD:

• Określają ważność elementów – Dla użytkownika elementy z wyższą wartością Elevation będą ważniejsze do podjęcia priorytetowej akcji.
• Określają widoczność – Ponieważ materiał jest nieprzezroczysty, elementy z wyższym elevation przykrywają te z niższym
• Określają hierarchię – Możliwość znacznego zwiększenia Elevation dla jednego elementu pozwoli rzucić większy cień na pozostałe.

Kluczowe pojęcia w kontekście pracy z ekranami:

• Rozmiar Ekranu  – Definiowany w calach rozmiar przekątnej ekranu. Rozdzielczość – definiowana w pixelach szerokość i wysokość ekranu.
• Orientacja Ekranu – Horyzontalna lub wertykalna – tryb ekranu trzymanego przez użytkownika w pozycji pionowej lub poziomej.
• Gęstość Pixeli (PPI) – Inaczej nasycenie pikseli – ilość pikseli na cal ekranu. W zależności od wartości DPI elementy obrazu mogą być skalowane.
• Density-Independent Pixels (DP) – Wirtualna jednostka, referencyjnie odpowiada 1px przy 160 dpi – określa elementy UI w sposób niezależny od nasycenia.

Formuła, zgodnie z którą wyliczamy DP jest prostą proporcją:

Decydując się na pracę z layoutem wybieramy tzw. Scale Factor w którym będziemy pracować – czyli pracę na rzeczywistych pixelach, lub na dp a zatem jednostkach niezależnych od rozdzielczości. W zależności od dokonanego wyboru, będziemy mieli do czynienia z większą lub mniejszą rozdzielczością grafik w ramach projektu. Pracując na jednostkach dp pamiętaj zatem, żeby pracować na obiektach inteligentnych po to, aby przy eksporcie grafiki móc skorzystać z natywnej, wysokiej rozdzielczości bitmapy. Przykładowe rozmiary w dp kontra px przedstawia screen poniżej, na którym można zobaczyć zalety korzystania z dp – fizycznie podobne rozmiary ekranu będą miały podobne wartości dp, podczas gdy wartości px mogą się różnić:

Ponieważ system Android to środowisko wielu urządzeń i rozdzielczości (fragmentacja), na potrzeby tworzenia zasobów graficznych, zamiast adresować oddzielnie wszystkie możliwe rozdzielczości i DPI, korzystamy z uproszczonego systemu tzw. Density Buckets, czyli wiaderek, które zawierają urządzenia o zbliżonych wartościach DPI. Dzięki temu przygotowanie zasobów graficznych ogranicza się do podstawowych 4 lub maksymalnie 6 rozmiarów. Co do zasady pracując z bitmapami na potrzeby każdego z nich warto przygotować osobny rozmiar obrazka. Problem ten znika gdy korzystamy z wektorów, czyli plików SVG, które są wspierane przez Androida a ich skalowanie jest bezstratnie obsługiwane przez system.

Oto poszczególne Density Buckets

A tutaj dodatkowa kolumna, która oznacza skalę w jakiej powinny zostać przygotowane zasoby graficzne, np. 1 oznacza 100%, 1.5 – 150% itd.

W konsekwencji, jeśli pracujesz z bitmapami, powinieneś przygotować następujące rozmiary plików:

Poniżej znajdziesz informacje o relacjach poszczególnych fizycznych wielkości ekranów w calach do konkretnych Density Buckets, jak również informacje o rozmiarach w zależności od ilości dp.

Z punktu widzenia systemu, odpowiednie zasoby są ładowane na podstawie tzw. Configuration Qualifiers. Struktura katalogów w których eksportowane są grafiki jest przygotowana odpowiednio osobno dla layoutów oraz grafik. Grafiki wysokiej rozdzielczości znajdują się w katalogu z końcówką -hdpi w nazwie, jeszcze wyższe -xhdpi i tak dalej. System ładuje odpowiednie zasoby w zależności od ekranu:

Inne, ważne konwencje Material Design to poszczególne części dokumentacji, z których ważne informacje dotyczą:

Kolorystyka

Zestawienia kolorystyczne w MD opierają się na dobraniu dwóch kluczowych kolorów:

• Koloru głównego
• Koloru akcentu

Kolor główny jest wykorzystywany w dużej mierze w najważniejszych elementach GUI – belkach nawigacji, akcji, jako tła etc. Kolor akcentu to kolor który wykorzystujemy najczęściej w elementach interaktywnych, takich jak przyciski, linki czy guzik FAB. Poza dwoma podstawowymi kolorami stosujemy również ich odcienie, odpowiednio kwalifikowane nazwami 100, 200, 300 etc.

Przykładowe kolory w Material Design są przygotowane w dokumentacji, możesz również pobrać gotowe swatche i załadować je do jednej z ulubionych aplikacji. Cechą kolorów MD jest odpowiednie nasycenie i kontrast a jedno z ciekawych narzędzi do wyboru odpowiedniego koloru głównego i koloru akcentu znajdziesz na:

https://www.materialpalette.com/

Natomiast wytyczne kolorystyki MD na https://www.google.com/design/spec/style/color.html

Typografia:

Material Design proponuje zastosowanie fontów Roboto oraz Noto przy projektowaniu interfejsów. Bardzo szczegółowe wytyczne związane z ich użyciem oraz Type Ramp, w którym znajdziesz informacje o wielkościach, trackingu, ledingu i innych parametrach, znajdują się w dokumentacji:

https://www.google.com/design/spec/style/typography.html

Ikonografia

Ikony w MD są podzielone na sekcje ikon produktowych i systemowych. Ikonki produktowe są bardziej zdetalowane graficznie i pełnią rolę np. Ikonki aplikacji po zainstalowaniu w telefonie z Andrioidem. Ważniejsze są jednak ikony systemowe, których stylistyka jest także widoczna w aplikacjach. Są to proste, wektorowe kształty przygotowane w kolorze czarnym albo białym. Tworzenie ikon związane jest z wykorzystaniem specyficznego grida i zachowaniu podstawowych proporcji:

Jak również geometrii:

Stylistyka ikon systemowych MD:

Dokumentację znajdziesz na: https://www.google.com/design/spec/style/icons.html

Konwencje Nawigacji

Co do zasady stosujemy podstawowe konwencje takie jak:

Content jako nawigacja

• Jeden podstawowy ekran
• Struktura segmentowa
• Najważniejsze funkcje w jednym ekranie

Zakładki (Tabs)

• Równoważne ekrany
• Gdy wymaga częstego przełączania
• Tylko kilka nadrzędznych widoków
• ​Budowanie świadomości

Navigation Drawer

• Gdy mamy wiele widoków nadrzędnych
• Szybka nawigacja pomiędzy niepowiązanymi widokami
• Do najbardziej złożonych schematów nawigacji

Więcej znajdziesz w dokumentacji: https://www.google.com/design/spec/patterns/navigation.html

Responsywne Interfejsy

Podstawowe zasady skalowania na różne ekrany i rozdzielczości opierają się na dwóch koncepcjach:

Breakpointy

• Nasz projekt, zgodnie z MD powinien dobrze prezentować się w widokach 480, 600, 840, 960, 1280, 1440, oraz 1600dp.​
• Layouty poniżej 600dp szerokości powinny wypełniać przestrzeń na jednym poziomie hierarchii – > wyłącznie strony siostrzane.
• Powyżej 600dp możemy umieścić dwa poziomy hierarchii na jednym ekranie np. stronę rodzica oraz dziecko.
• Powyżej 1600dp można: wyśrodkować layout i powiększać marginesy; wyrównać do lewej; wypełniać dalej treścią aż do brzegów ekranu.
• W widoku desktop marginesy optyczne są większe.

Grid

• Siatka w MD definiowana jest przez właściwe odstępy pomiędzy elementami – najbardziej popularne wartości to 8, 16, 24 i 40 dp. Odstępy mogą być różne, dla różnych elementów.
• Full Grid – kolumny mają szerokość oznaczoną w jednostkach relatywnych np. % i skalują się razem z gridem.
• Centered Grid – kolumny mają szerkość stałą i w miarę skalowania układają się jedna pod drugą lub reorganizują w inny sposób.
• Zobacz, jak różne typy nawigacji wpływają na siatkę.

Wytyczne związane z Responsywnym UI znajdziesz na https://www.google.com/design/spec/layout/responsive-ui.html

To tylko krótkie wprowadzenie do zagadnień związanych z projektowaniem UI dla Androida oraz Material Design. Serdecznie zapraszam do obejrzenia kompletnych kursów, które przygotowaliśmy dla Ciebie na eduweb.pl:

• Material Design – Projektowanie Interfejsów UI/UX
• Tworzenie Aplikacji Android – Techniki Pracy

Serdecznie pozdrawiam,
Grzegorz Róg