Material design jako krok w przód w projektowaniu - wprowadzenie

FuruArt · 24 Maja 2016

Każdy kto posiada smartfon z systemem Android w wersji 4.4 lub wyższej jest w stanie zauważyć, że styl w jakim tworzone są aplikacje jest mocno schematyczny i można by rzecz powtarzalny. Owszem, tylko co z tego? Otóż to, że dzięki tej standaryzacji Google wypracowało swój własny, odrębny design, który mimo że pierwotnie był skierowany wyłącznie na smartfony z powodzeniem może służyć na stronach WWW!

Dobrze, ale czym właściwie jest ten unikatowy design słynny dla Google'a? Material design, bo taką nazwę nosi czerpie swój styl z prostoty, użyteczności i stanowi niejako sposób komunikacji użytkownika z interfejsem. Cytując zamysł twórców zawarty na oficjalnej stronie Google'a:
Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

Material design - Introduction

Za cel postawili sobie stworzenie wizualnego języka, który łączy klasyczne reguły dobrego design'u z innowacją oraz możliwościami technologii i nauki. Co jak najbardziej im się udało, ponieważ Material design jest przejrzysty, zachowując nacisk na czytelności dodatkowo jest intuicyjny, wprowadza nowe pomysły (o których za chwilę), a także pozwala nauczyć się jak tworzyć w rytmie Materiału.

3 najważniejsze zasady Material design'u Teraz postaram się wytłumaczyć co autorzy mieli na myśli piszą te trzy jakże wyraziste sentencje. 'Material is the metaphor' - czyli Materiał jest metaforą, to jak to w końcu jest? Ten Material to tak na prawdę nie Material? Już tłumaczę, Materiał w przeciwieństwie do jakiegokolwiek płaskiego obiektu posiada warstwy (tak, podobnie do ogrów i cebuli...), ale zaraz, zaraz warstwy? Przecież strona internetowa czy interfejs w aplikacji na telefonie jest płaski! Właśnie w tym momencie pojawia się metafora, Design ten wyróżnia plany, sprawia że wizualna strona aplikacji nie jest jako jedna zwięzła część, Material wykorzystując cienie, położenie względem osi Z (Trójwymiar, posiada trzy wymiary jak sama nazwa wskazuje, tak jak układ kartezjański posiada oś X i Y, pozioma, pionowa, tak siatka trójwymiarowa posiada trzy osi X, Y oraz Z, czyli pozioma, pionowa i głębia) oraz kolory, aby uprzestrzennić płaską strukturę aplikacji, ukazując przy tym hierarchię elementów (o czym za moment).

Kolejnym postulatem jest: 'Bold, graphic, intentional' - Pogrubiony, obrazowy, zamierzony, brzmi całkiem po chińsku (prawie jak język webdeveloper'a ?), spieszę z wytłumaczeniem. Cała sentencja odnosi się bezpośrednio do użyteczności i intuicyjności Materiału, każdy element na stronie musi być wyraźny, kojarzący się od razu z funkcją jaką pełni w interfejsie w aplikacji oraz służyć określonym celom, wszystko powinno być przemyślane. Teraz posługując się bezpośrednio przykładem, gdy wchodzimy w aplikację gdzie musimy się zarejestrować lub zalogować, aby przeglądać treść, normalnie szukalibyśmy jakiegoś przycisku, tekstu, odnośnika, który mówiłby cokolwiek o Rejestracji, przykładowo: 'Zarejestruj się, aby przeglądać publikacje', Material design kompletnie wyrzuca warstwę tekstową zastępując ją odgórnie przypisanym symbolem ludzika, gdzie będziemy mogli się zalogować po kliknięciu, ikonka ta musi znajdować się na samej górze strony, w celu łatwej dostępności, wykonywać jakiś ruch, aby ukazać do czego służy (o czym za chwilę). W ten sposób, Google wprowadziło standard dla swojego interfejsu, przypisując odpowiednim ikonom określone funkcje, których całą listę znajdziecie pod tym adresem:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

Przyszedł czas na ostatnią regułę zapisaną w świętej księdze Material Design'u (nie, no nie ma takiej, ale uznajmy że oficjalna strona pełni taką funkcję), czyli 'Motion provides meaning' - Ruch przewiduje znaczenie, aha... Dobrze, tutaj poruszamy wspomniany przeze mnie temat 'Jakiegoś ruchu', którego zadaniem jest nieść znaczenie, czyli dawać korzystającemu informację o tym, że element różni się od pozostałych pełniąc jakąś funkcję. Przykładowo przycisk na stronie będzie różnił się od pozostałej treści głównie tym, że wygląda jak przycisk i można go wcisnąć, Material design zadba również o to że wypełnienie przycisku po wciśnięciu zostanie ukazane płynną animacją napełniania kolorem, błyskiem lub innym efektem zwracającym uwagę użytkownika. Dzięki ruchowi jesteśmy sygnalizowani o możliwościach interakcji z interfejsem aplikacji lub strony, tak jak np. pole wyboru z różnymi opcjami, gdy klikniemy na jedną z możliwości zostaniemy poinformowani o zaznaczeniu efektem pląśnięcia (nie wiedziałem jak lepiej nazwać ten efekt). Niby jest to trochę zbędne jednakże ukazuje ideę Ruchu w design'ie, ponieważ standardowe podejście do designu eliminuje wszelkie efekty rozpraszające użytkownika na treści, a tutaj pozwala zrozumieć symbolikę popartą poruszaniem. Aczkolwiek całość musi być wciąż minimalistyczna, czyli przetłok animacji nie jest tutaj mile widziany!

Przykład ruchu, dobrego i złego dostępny tutaj:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

Myślę, że jak na pierwszą ogólnikową lekcję na temat Material Design'u wystarczy, przedstawiłem podstawowe zasady jakimi kieruje się ten styl, w następnych będę już bezpośrednio rozkładał na czynniki pierwsze poszczególne elementy i tłumaczył dlaczego są istotne w Material Design'ie! Oczywiście, jeśli zachęciłem Cię do zainteresowania się temat Material Design'u, miło czytało Ci się ten artykuł lub po prostu doceniasz mój sposób prowadzenia lekcji, zostaw 'Lubię to!', aby zmotywować mnie jeszcze bardziej do kolejnych lekcji oraz w celu szerszej publikacji w sieci. A tymczasem do kolejnej lekcji w Pełni!

Część grafik oraz treść artykułu są moją własnościa - Furu.Art, zakaz kopiowania na inne blogi, fanpage czy strony, bo nogi z **** powyrywam!