Gadgetshowto
Podczas ostatniej konferencji I / O 2014 Google powrócił ze swoimi nowymi niespodziankami. Oprócz oficjalnego wydania nowej aktualizacji Androida o nazwie kodowej Lollipop, Google wprowadził również nowy, świeży język projektowania, Wygląd materiału. Jest to system projektowania, który jest przeznaczony nie tylko do ulepszania interfejsu użytkownika nowego Lollipopa, ale także do różnych urządzeń i środowisk.
Material Design ma kilka głównych cech, które odróżniają go od innych trendów w projektowaniu dzięki swoim unikalnym sposobom. Tak jak jego nazwa inspirowane prawdziwymi materiałami i połączyliśmy je w jeden system projektowania, aby stworzyć elegancki, intuicyjny, piękny i najbardziej interaktywny interfejs użytkownika. W tym poście przyjrzymy się, co znajduje się w Material Design i podamy krótki przewodnik, jak go wdrożyć. Cytując blog Google, powiem: „This is Material Design”.
Wstęp
Material Design to ujednolicony system projektowania, co oznacza, że został stworzony do współpracy ze wszystkimi dostępnymi obecnie urządzeniami i platformami. Od tabletu, smartfona po komputer stacjonarny i od Androida, iOS, Windows po platformy internetowe. Cały projekt powinien być taki sam, gdziekolwiek się znajduje.
Główne zasady
Istnieją trzy główne zasady konstruowania Material Design. Są to najbardziej podstawowe elementy tego, co ogólnie oferuje Material.
- Materiał jest metaforą. Powstanie Material zainspirowane zostało badaniem dotykowych elementów, których używamy na co dzień, papier i tusz. Sprawia, że światło, powierzchnia i ruchy obiektu są lepsze podczas interakcji ze sobą.
- Odważne, graficzne i zamierzone. Typografia, siatki, przestrzeń, skala, kolor i wykorzystanie obrazów, które są podstawą projektu opartego na druku, sprawiają, że zawartość Materiału jest lepsza.
- Ruch nadaje sens. To jedna z najbardziej zauważalnych rzeczy. W materiale powinieneś mieć znaczący i odpowiedni ruch, subtelną i wyraźną informację zwrotną oraz wydajne i spójne przejście.
Części
Material Design przywiązuje wagę do każdego szczegółu swoich komponentów, aby miały uniwersalne zastosowanie. Te komponenty pomogą Ci zbudować niesamowitą aplikację i witrynę. Jest tak wiele komponentów dostarczanych przez Material, takich jak przyciski, przełącznik, karta, wprowadzanie tekstu, fab (pływający przycisk akcji), okno dialogowe, toast, podmenu, karta i inne. Każdy z nich ma własną zasadę i poradnik, jak je zbudować, aby nie było żadnych zbędnych elementów.
Patterns Thing
Oprócz komponentów, Material zapewnia również kilka podstawowych wzorców dla dodatkowego interfejsu użytkownika. Te wzorce poprawią interfejs użytkownika utworzony za pomocą składników materiału. Wzorce, w tym format danych, szuflada nawigacji, błędy, gesty, technika przewijania, wyszukiwanie, ustawienia, ładowanie obrazów, przesuń palcem, aby odświeżyć i nie tylko.
Kolory Material Design
Kolorystyka Materiału została zaprojektowana w taki sposób, abyś nie czuł się nieswojo, dziwnie i płasko. Czerpiąc inspirację z naszych codziennych środowisk, takich jak znaki drogowe, współczesna architektura, taśma do znakowania chodników i boiska sportowe, Material Design oferuje nieoczekiwane i porywające kolory. Jest tak wiele palet kolorów do wyboru, co zapewnia większą wygodę podczas tworzenia aplikacji lub witryn. Możesz także pobrać próbki kolorów do użytku lokalnego, na przykład do swojej kolekcji programu Photoshop.
Ikona materiału
Jeśli jesteś programistą Androida, musisz znać kilka bezpłatnych pakietów ikon dostarczonych przez Google. Zwykle są używane tylko dla elementu głównego i paska akcji. Podczas gdy w przypadku innych zasobów musimy ręcznie wyszukiwać inne ikony, takie jak folder, plik, kopiowanie i wklejanie itp. W Material Design Google rozwiązało problem z mnóstwo pakietów ikon możesz użyć.
Każda z ikon przeszła pewne podejście projektowe, które również wykorzystuje badanie materiałów dotykowych. Oni również zachowują zasadę Materialną, to jest konsekwentne. Możesz pobrać te ikony z GitHub, są one wyposażone w opcje do różnych zastosowań, takich jak iOS, Internet, Android lub SVG. Jeśli chcesz mieć szerszą opcję łatwego dostosowywania, prawdopodobnie chcesz zobaczyć pakiety ikon Material Design na FlatIcon. W pakiecie otrzymasz wersję wektorową (SVG i EPS), PSD i PNG.
Animacja materiału
To cechy materiału, które lubię najbardziej. Animacje w Material są tak realistyczne i intuicyjne. Każda animacja ma znaczące, spójne i właściwe przejścia czasowe. Pokazane poniżej demo gif to tylko jedna z pięknych animacji materiału. Aby zapewnić angażującą i responsywną interakcję, zespół Google stworzył również animację przypominającą falowanie wody, aby uzyskać efekt wprowadzania danych przez użytkownika. Jest głównie używany na przyciskach i kartach.
Te funkcje, które wyjaśniłem, to tylko niewielka część tego, co oferuje Material Design. Aby dowiedzieć się więcej o świecie materiałów, po prostu przejdź na stronę dokumentacji.
Realizacja
Domyślnie Material Design jest nową aktualizacją interfejsu użytkownika dla Androida Lollipop. Wszystkie wytyczne, że materiał został zastosowany w nim. Ponieważ Material jest przeznaczony dla wszelkiego rodzaju środowisk, zaimplementowanie go w innym systemie nie będzie trudne. A dzięki społecznościom jest to o wiele łatwiejsze dzięki niektórym stworzonym przez nie narzędziom.
Jest kilka sposobów na uzyskanie Material Design poza Androidem, na przykład w Internecie.
Korzystanie ze struktur CSS
To najłatwiejszy sposób, jeśli chcesz zaimplementować Material Design na platformie internetowej. W przypadku frameworków wszystko, co musisz zrobić, to zainicjować je, a następnie napisać potrzebne elementy. Istnieje wiele struktur, których możesz użyć, takich jak Materialise, Material UI lub Polymer, aby wymienić tylko kilka. Mój osobisty wybór dotyczy Materializacji. Jest łatwiejszy w użyciu i zrozumieniu oraz ma świetną dokumentację z ładnym demo.
Przestrzega wytycznych
Jeśli chcesz wdrożyć materiał bez pomocy frameworka i wolisz najbardziej majstrować przy kodach, musisz przestrzegać Wytycznych dotyczących materiałów. Znajdziesz tam wszystkie nakazy i zakazy, na które powinieneś zwrócić uwagę, aby osiągnąć materialne zasady. Zobaczysz wszystkie podstawowe instrukcje dotyczące tworzenia komponentów, układu, animacji, koloru, wzorów i nie tylko. Możesz chcieć zobaczyć listę kontrolną materiałów, aby ułatwić programowanie.
Wniosek
Material design to świetny system projektowania, który stał się jednym z najbardziej oczekiwanych trendów roku. W ciągu najbliższych kilku miesięcy możemy to zobaczyć wszędzie. Więcej aplikacji i witryn zostanie dopracowanych dzięki nowej aktualizacji projektu Google.
Dzięki Material Design Google udowodnił swoją wyższość jako jedna z największych firm technologicznych. To sprawia, że Google jest liderem nie tylko w obszarze wyszukiwarek i mobilnych systemów operacyjnych, ale także w dziedzinie projektowania. Obecnie nie ma innych firm, które rozwinęłyby tak wielką rzecz jak Google. Ale doświadczenie mówi, że to nie potrwa długo. Poczekajmy, aż inne firmy odpowiedzą na Material Design Google.
