wtorek
04
Lipiec
2017
Developers

Czym jest Material Design? Nieco o podstawach

Material Design to stworzony przez Google, łatwy do dostosowania, czytelny i prosty styl graficzny, który łączy zasady dobrego projektowania z innowacyjnością.
Został zaprezentowany podczas premiery aplikacji Google Now, a następnie wdrożony w innych produktach Google.

Kolory

Ważna cechą tego stylu są kolory, które powinny być żywe oraz wyróżniające się. Google daje nam do dyspozycji palety dobrze dobranych kolorów, z których powinniśmy wybrać jeden podstawowy oraz drugi dodatkowy dobrze odznaczający się na tle tego pierwszego, aby wyszczególnić ważniejsze elementy w aplikacji.

Podstawowe kolory w palecie oznaczone są liczbą 500, i to one powinny posłużyć jako kolory bazowe, od których następnie możemy tworzyć elementy w różnych odcieniach tego koloru ( < 500 jaśniejsze, > 500 ciemniejsze). Dzięki takiemu podejściu aplikacja staje się żywsza, ważne elementy dobrze się odznaczają na tle innych, ale wciąż pozostają z nimi w harmonii.

Czcionka

Podstawową czcionką wykorzystywaną w większości produktów Google jest roboto. Po raz pierwszy pojawiła się w systemie Android Ice Cream Sandwich, a następnie zmodyfikowana na potrzeby systemu Android Lollipop i w takiej formie obowiązuje do dziś.

Ikony

Ikony nie powinny być skomplikowane, a wręcz przeciwnie, proste i intuicyjne, o jednakowych wielkościach zaokrągleń oraz kształtów wynoszących 2dp.

  • Oto kilka przykładów zaprezentowanych przez Google:

  • Oraz jeden z przykładów pokazujących dobre i złe praktyki używania ikon:

W tym przykładzie pokazane jest żeby dodawać proste ikony ukazane od przodu, i nie nadawać im wrażenia wielowymiarowości oraz zbędnych efektów.

Cienie

Dość istotnym elementem Material Design są cienie, które mają wskazywać na położenie elementów w przestrzeni trójwymiarowej i zarazem określają ich hierarchię. Elementy które wydają się znajdować wyżej od innych, są odbierane jako ważniejsze do podjęcia akcji.


Źródło : material.io

FacebookTwitterGoogle+LinkedIn